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