🌗 Toggle theme in the article header block (#214)

jupyter-book · Aug 11, 2023 · 56430d7 · 56430d7
1 parent 88097cf
commit 56430d7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/gentle-bananas-tie.md 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
@@ -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}