Book theme options to specify theme and disable theme toggle button

packages/site/src/components/Navigation/TopNav.tsx

@@ -103,7 +103,7 @@ export function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   );
 }
 
-export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?: boolean }) {
+export function TopNav({ hideToc, hideSearch, hideThemeToggle }: { hideToc?: boolean; hideSearch?: boolean; hideThemeToggle?: boolean }) {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
@@ -131,7 +131,7 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
           <NavItems nav={nav} />
           <div className="flex-grow block"></div>
           {!hideSearch && <Search />}
-          <ThemeButton />
+	  {!hideThemeToggle && <ThemeButton />}
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />
           </div>

themes/book/app/root.tsx

@@ -3,6 +3,7 @@ import tailwind from '~/styles/app.css';
 import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
 import type { SiteLoader } from '@myst-theme/common';
+import { Theme } from '@myst-theme/common';
 import {
   Document,
   responseNoSite,
@@ -54,8 +55,11 @@ export const loader: LoaderFunction = async ({ request }): Promise<SiteLoader> =
     getThemeSession(request),
   ]);
   if (!config) throw responseNoSite();
+  const themeOption = config?.options?.theme ?? '';
+  const theme = themeOption === 'light' ? Theme.light : themeOption === 'dark' ? Theme.dark : themeSession.getTheme();
+  themeSession.setTheme(theme);
   const data = {
-    theme: themeSession.getTheme(),
+    theme: theme,
     config,
     CONTENT_CDN_PORT: process.env.CONTENT_CDN_PORT ?? 3100,
     MODE: (process.env.MODE ?? 'app') as 'app' | 'static',

themes/book/app/routes/$.tsx

@@ -78,11 +78,13 @@ function ArticlePageAndNavigationInternal({
   children,
   hide_toc,
   hideSearch,
+  hideThemeToggle,
   projectSlug,
   inset = 20, // begin text 20px from the top (aligned with menu)
 }: {
   hide_toc?: boolean;
   hideSearch?: boolean;
+  hideThemeToggle?: boolean;
   projectSlug?: string;
   children: React.ReactNode;
   inset?: number;
@@ -91,7 +93,7 @@ function ArticlePageAndNavigationInternal({
   const { container, toc } = useSidebarHeight(top, inset);
   return (
     <>
-      <TopNav hideToc={hide_toc} hideSearch={hideSearch} />
+      <TopNav hideToc={hide_toc} hideSearch={hideSearch} hideThemeToggle={hideThemeToggle}/>
       <PrimaryNavigation
         sidebarRef={toc}
         hide_toc={hide_toc}
@@ -116,11 +118,13 @@ export function ArticlePageAndNavigation({
   children,
   hide_toc,
   hideSearch,
+  hideThemeToggle,
   projectSlug,
   inset = 20, // begin text 20px from the top (aligned with menu)
 }: {
   hide_toc?: boolean;
   hideSearch?: boolean;
+  hideThemeToggle?: boolean;
   projectSlug?: string;
   children: React.ReactNode;
   inset?: number;
@@ -131,6 +135,7 @@ export function ArticlePageAndNavigation({
         children={children}
         hide_toc={hide_toc}
         hideSearch={hideSearch}
+	hideThemeToggle={hideThemeToggle}
         projectSlug={projectSlug}
         inset={inset}
       />
@@ -145,14 +150,15 @@ export default function Page() {
   const pageDesign: TemplateOptions = (data.page.frontmatter as any)?.site ?? {};
   const siteDesign: TemplateOptions =
     (useSiteManifest() as SiteManifest & TemplateOptions)?.options ?? {};
-  const { hide_toc, hide_search, hide_footer_links } = {
+  const { hide_toc, hide_search, hide_footer_links, hide_theme_toggle} = {
     ...siteDesign,
     ...pageDesign,
   };
   return (
     <ArticlePageAndNavigation
       hide_toc={hide_toc}
       hideSearch={hide_search}
+      hideThemeToggle={hide_theme_toggle}
       projectSlug={data.page.project}
     >
       {/* <ProjectProvider project={project}> */}

themes/book/app/types.ts

@@ -3,6 +3,7 @@ export interface TemplateOptions {
   hide_outline?: boolean;
   hide_search?: boolean;
   hide_footer_links?: boolean;
+  hide_theme_toggle?: boolean;
   outline_maxdepth?: number;
   hide_title_block?: boolean;
 }

themes/book/template.yml

@@ -61,6 +61,12 @@ options:
   - type: boolean
     id: folders
     description: Respect nested folder structure in URL paths.
+  - type: string
+    id: theme
+    description: Force initial theme. Either 'light' or 'dark'
+  - type: boolean
+    id: hide_theme_toggle
+    description: Hide the theme toggle button on the header
 build:
   install: npm install
   start: npm run start