From 56430d7c6d28f92458154caeccee140fc99e0d0a Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Fri, 11 Aug 2023 13:41:35 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=97=20Toggle=20theme=20in=20the=20arti?=
 =?UTF-8?q?cle=20header=20block=20(#214)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/gentle-bananas-tie.md         | 5 +++++
 packages/site/src/components/Headers.tsx | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/gentle-bananas-tie.md

diff --git a/.changeset/gentle-bananas-tie.md b/.changeset/gentle-bananas-tie.md
new file mode 100644
index 000000000..530ed95ab
--- /dev/null
+++ b/.changeset/gentle-bananas-tie.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Allow to toggle theme in the article header
diff --git a/packages/site/src/components/Headers.tsx b/packages/site/src/components/Headers.tsx
index a53236378..79a893efd 100644
--- a/packages/site/src/components/Headers.tsx
+++ b/packages/site/src/components/Headers.tsx
@@ -8,14 +8,17 @@ import {
 import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
+import { ThemeButton } from './Navigation';
 
 export function ArticleHeader({
   frontmatter,
   children,
+  toggleTheme,
   className,
 }: {
   frontmatter: PageFrontmatter;
   children?: React.ReactNode;
+  toggleTheme?: boolean;
   className?: string;
 }) {
   const grid = useGridSystemProvider();
@@ -78,6 +81,7 @@ export function ArticleHeader({
             <OpenAccessBadge open_access={frontmatter?.open_access} />
             <GitHubLink github={frontmatter?.github} />
           </div>
+          {toggleTheme && <ThemeButton className="inline-block w-5 h-5 mt-0.5 ml-1" />}
         </div>
         <FrontmatterBlock
           frontmatter={rest}