diff --git a/packages/site/src/components/Navigation/TopNav.tsx b/packages/site/src/components/Navigation/TopNav.tsx
index 51217672..c44bb094 100644
--- a/packages/site/src/components/Navigation/TopNav.tsx
+++ b/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?
{!hideSearch && }
-
+ {!hideThemeToggle && }
diff --git a/themes/book/app/root.tsx b/themes/book/app/root.tsx
index f68869a5..4b2d2f55 100644
--- a/themes/book/app/root.tsx
+++ b/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 =
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',
diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx
index 9639893c..65f1a3eb 100644
--- a/themes/book/app/routes/$.tsx
+++ b/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 (
<>
-
+
@@ -145,7 +150,7 @@ 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,
};
@@ -153,6 +158,7 @@ export default function Page() {
{/* */}
diff --git a/themes/book/app/types.ts b/themes/book/app/types.ts
index 82fd76ba..01b2486f 100644
--- a/themes/book/app/types.ts
+++ b/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;
}
diff --git a/themes/book/template.yml b/themes/book/template.yml
index db30fcb8..83259024 100644
--- a/themes/book/template.yml
+++ b/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