@windrun-huaiin/third-ui 31.0.1 → 31.2.0

package/dist/fuma/base/custom-header.d.ts

@@ -50,4 +50,4 @@ export interface CustomHomeHeaderProps extends HomeLayoutProps {
 export type DesktopAction = 'search' | 'theme' | 'i18n' | 'secondary' | 'github';
 export type MobileBarAction = 'pinned' | 'search' | 'menu';
 export type MobileMenuAction = 'secondary' | 'github' | 'separator' | 'i18n' | 'theme';
-export declare function CustomHomeHeader({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, bannerHeight, headerHeight, maxContentWidth, navbarClassName, floating, desktopActionsOrder, mobileBarActionsOrder, mobileMenuActionsOrder, }: CustomHomeHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomHomeHeader({ nav, i18n, links, githubUrl, searchToggle, bannerHeight, headerHeight, maxContentWidth, navbarClassName, floating, desktopActionsOrder, mobileBarActionsOrder, mobileMenuActionsOrder, }: CustomHomeHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/custom-header.js

@@ -15,6 +15,7 @@ var popover = require('fumadocs-ui/components/ui/popover');
 var button = require('fumadocs-ui/components/ui/button');
 var i18n = require('fumadocs-ui/contexts/i18n');
 var headerThemeSwitch = require('./header-theme-switch.js');
+var siteThemeContext = require('./site-theme-context.js');
 
 const PrefetchLinkItem = shared.LinkItem;
 const DEFAULT_DESKTOP_ACTIONS = [
@@ -34,8 +35,9 @@ const DEFAULT_MOBILE_MENU_ACTIONS = [
     'i18n',
     'theme',
 ];
-function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
+    var _a, _b, _c, _d, _e;
+    const themeMode = siteThemeContext.useSiteThemeMode();
     const finalLinks = React.useMemo(() => shared.resolveLinkItems({ links, githubUrl }), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
@@ -55,8 +57,8 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         search: searchToggle.enabled !== false
             ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : null
             : null,
-        theme: themeSwitch.enabled !== false
-            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+        theme: shouldShowThemeSwitch(themeMode)
+            ? (jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: normalizeThemeSwitchMode() }))
             : null,
         i18n: i18n ? (jsxRuntime.jsx(CompactLanguageToggle, { children: jsxRuntime.jsx(icons.LanguagesIcon, { className: "size-5" }) })) : null,
         secondary: desktopSecondaryDisplayItems.length ? (jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: utils.cn(item.type === 'icon' && [
@@ -78,8 +80,8 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         github: githubMobileMenuItem ? (jsxRuntime.jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
         separator: jsxRuntime.jsx("div", { role: "separator", className: "flex-1" }),
         i18n: i18n ? (jsxRuntime.jsxs(CompactLanguageToggle, { children: [jsxRuntime.jsx(icons.LanguagesIcon, { className: "size-5" }), jsxRuntime.jsx(languageSelect.LanguageSelectText, {}), jsxRuntime.jsx(icons.ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
-        theme: themeSwitch.enabled !== false
-            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+        theme: shouldShowThemeSwitch(themeMode)
+            ? (jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: normalizeThemeSwitchMode() }))
             : null,
     };
     const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
@@ -100,7 +102,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                         }) })) : null] })] }));
     const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobilePinnedItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
     const mobileSearchNode = searchToggle.enabled !== false
-        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : null
+        ? (_d = (_c = searchToggle.components) === null || _c === void 0 ? void 0 : _c.sm) !== null && _d !== void 0 ? _d : null
         : null;
     const mobileBarNodes = {
         pinned: mobilePinnedNode,
@@ -108,7 +110,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         menu: menuNode,
     };
     const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
-    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', prefetch: false, className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_e = nav.url) !== null && _e !== void 0 ? _e : '/', prefetch: false, className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
                     .map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
                     const node = desktopActionNodes[action];
@@ -120,6 +122,12 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                     return node ? (jsxRuntime.jsx(React.Fragment, { children: node }, `mobile-bar-${action}`)) : null;
                 }) })] }));
 }
+function shouldShowThemeSwitch(mode) {
+    return mode === 'light-dark-system' || mode == null;
+}
+function normalizeThemeSwitchMode(mode) {
+    return 'light-dark-system';
+}
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = tslib.__rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
     const [value, setValue] = React.useState('');

package/dist/fuma/base/custom-header.mjs

@@ -13,6 +13,7 @@ import { Popover, PopoverTrigger, PopoverContent } from 'fumadocs-ui/components/
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { useI18n } from 'fumadocs-ui/contexts/i18n';
 import { HeaderThemeSwitch } from './header-theme-switch.mjs';
+import { useSiteThemeMode } from './site-theme-context.mjs';
 
 const PrefetchLinkItem = LinkItem;
 const DEFAULT_DESKTOP_ACTIONS = [
@@ -32,8 +33,9 @@ const DEFAULT_MOBILE_MENU_ACTIONS = [
     'i18n',
     'theme',
 ];
-function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
+    var _a, _b, _c, _d, _e;
+    const themeMode = useSiteThemeMode();
     const finalLinks = useMemo(() => resolveLinkItems({ links, githubUrl }), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
@@ -53,8 +55,8 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         search: searchToggle.enabled !== false
             ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : null
             : null,
-        theme: themeSwitch.enabled !== false
-            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsx(HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+        theme: shouldShowThemeSwitch(themeMode)
+            ? (jsx(HeaderThemeSwitch, { mode: normalizeThemeSwitchMode() }))
             : null,
         i18n: i18n ? (jsx(CompactLanguageToggle, { children: jsx(LanguagesIcon, { className: "size-5" }) })) : null,
         secondary: desktopSecondaryDisplayItems.length ? (jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: cn(item.type === 'icon' && [
@@ -76,8 +78,8 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         github: githubMobileMenuItem ? (jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
         separator: jsx("div", { role: "separator", className: "flex-1" }),
         i18n: i18n ? (jsxs(CompactLanguageToggle, { children: [jsx(LanguagesIcon, { className: "size-5" }), jsx(LanguageSelectText, {}), jsx(ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
-        theme: themeSwitch.enabled !== false
-            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsx(HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+        theme: shouldShowThemeSwitch(themeMode)
+            ? (jsx(HeaderThemeSwitch, { mode: normalizeThemeSwitchMode() }))
             : null,
     };
     const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
@@ -98,7 +100,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                         }) })) : null] })] }));
     const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsx(Fragment, { children: mobilePinnedItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
     const mobileSearchNode = searchToggle.enabled !== false
-        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : null
+        ? (_d = (_c = searchToggle.components) === null || _c === void 0 ? void 0 : _c.sm) !== null && _d !== void 0 ? _d : null
         : null;
     const mobileBarNodes = {
         pinned: mobilePinnedNode,
@@ -106,7 +108,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         menu: menuNode,
     };
     const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
-    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', prefetch: false, className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_e = nav.url) !== null && _e !== void 0 ? _e : '/', prefetch: false, className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
                     .map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
                     const node = desktopActionNodes[action];
@@ -118,6 +120,12 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                     return node ? (jsx(Fragment$1, { children: node }, `mobile-bar-${action}`)) : null;
                 }) })] }));
 }
+function shouldShowThemeSwitch(mode) {
+    return mode === 'light-dark-system' || mode == null;
+}
+function normalizeThemeSwitchMode(mode) {
+    return 'light-dark-system';
+}
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = __rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
     const [value, setValue] = useState('');

package/dist/fuma/base/docs-root-provider.d.ts

@@ -1,17 +1,14 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { NextProvider } from 'fumadocs-core/framework/next';
 import { type I18nProviderProps } from 'fumadocs-ui/contexts/i18n';
-import { type ThemeProviderProps } from 'next-themes';
+import type { SiteThemeProviderProps } from './site-theme-provider';
 type NextProviderComponents = {
     Link?: ComponentProps<typeof NextProvider>['Link'];
     Image?: ComponentProps<typeof NextProvider>['Image'];
 };
-type ThemeOptions = ThemeProviderProps & {
-    enabled?: boolean;
-};
 export interface DocsRootProviderProps {
     i18n: Omit<I18nProviderProps, 'children'>;
-    theme?: ThemeOptions;
+    theme?: Omit<SiteThemeProviderProps, 'children'>;
     components?: NextProviderComponents;
     children: ReactNode;
 }

package/dist/fuma/base/docs-root-provider.js

@@ -3,15 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var next = require('fumadocs-core/framework/next');
 var i18n = require('fumadocs-ui/contexts/i18n');
-var nextThemes = require('next-themes');
+var siteThemeContext = require('./site-theme-context.js');
 
 function DocsRootProvider({ i18n: i18n$1, theme = {}, components, children, }) {
-    let body = children;
-    if (theme.enabled !== false) {
-        body = (jsxRuntime.jsx(nextThemes.ThemeProvider, Object.assign({ attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true }, theme, { children: body })));
-    }
-    body = (jsxRuntime.jsx(i18n.I18nProvider, Object.assign({}, i18n$1, { children: body })));
-    return (jsxRuntime.jsx(next.NextProvider, { Link: components === null || components === void 0 ? void 0 : components.Link, Image: components === null || components === void 0 ? void 0 : components.Image, children: body }));
+    var _a;
+    const themeMode = (_a = theme.mode) !== null && _a !== void 0 ? _a : 'light-dark-system';
+    return (jsxRuntime.jsx(next.NextProvider, { Link: components === null || components === void 0 ? void 0 : components.Link, Image: components === null || components === void 0 ? void 0 : components.Image, children: jsxRuntime.jsx(i18n.I18nProvider, Object.assign({}, i18n$1, { children: jsxRuntime.jsx(siteThemeContext.SiteThemeRootProvider, Object.assign({}, theme, { mode: themeMode, children: children })) })) }));
 }
 
 exports.DocsRootProvider = DocsRootProvider;

package/dist/fuma/base/docs-root-provider.mjs

@@ -1,15 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { NextProvider } from 'fumadocs-core/framework/next';
 import { I18nProvider } from 'fumadocs-ui/contexts/i18n';
-import { ThemeProvider } from 'next-themes';
+import { SiteThemeRootProvider } from './site-theme-context.mjs';
 
 function DocsRootProvider({ i18n, theme = {}, components, children, }) {
-    let body = children;
-    if (theme.enabled !== false) {
-        body = (jsx(ThemeProvider, Object.assign({ attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true }, theme, { children: body })));
-    }
-    body = (jsx(I18nProvider, Object.assign({}, i18n, { children: body })));
-    return (jsx(NextProvider, { Link: components === null || components === void 0 ? void 0 : components.Link, Image: components === null || components === void 0 ? void 0 : components.Image, children: body }));
+    var _a;
+    const themeMode = (_a = theme.mode) !== null && _a !== void 0 ? _a : 'light-dark-system';
+    return (jsx(NextProvider, { Link: components === null || components === void 0 ? void 0 : components.Link, Image: components === null || components === void 0 ? void 0 : components.Image, children: jsx(I18nProvider, Object.assign({}, i18n, { children: jsx(SiteThemeRootProvider, Object.assign({}, theme, { mode: themeMode, children: children })) })) }));
 }
 
 export { DocsRootProvider };

package/dist/fuma/base/header-theme-switch.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react';
 export interface HeaderThemeSwitchProps extends ComponentProps<'div'> {
-    mode?: 'light-dark' | 'light-dark-system';
+    mode?: 'light-dark-system';
 }
-export declare function HeaderThemeSwitch({ className, mode, ...props }: HeaderThemeSwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderThemeSwitch({ className, ...props }: HeaderThemeSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/header-theme-switch.js

@@ -19,22 +19,14 @@ const itemVariants = classVarianceAuthority.cva('inline-flex size-6.5 items-cent
 });
 const full = [['light', icons.SunIcon], ['dark', icons.MoonIcon], ['system', icons.AirplayIcon]];
 function HeaderThemeSwitch(_a) {
-    var { className, mode = 'light-dark' } = _a, props = tslib.__rest(_a, ["className", "mode"]);
-    const { setTheme, theme, resolvedTheme } = nextThemes.useTheme();
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    const { setTheme, theme } = nextThemes.useTheme();
     const [mounted, setMounted] = React.useState(false);
     React.useEffect(() => {
         setMounted(true);
     }, []);
     const container = utils.cn('inline-flex items-center rounded-full border p-1 overflow-hidden *:rounded-full', className);
     const iconClassName = 'size-3.5 text-neutral-600 dark:text-neutral-300';
-    if (mode === 'light-dark') {
-        const value = mounted ? resolvedTheme : null;
-        return (jsxRuntime.jsx("button", { type: "button", className: container, "aria-label": "Toggle Theme", onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", children: full.map(([key, Icon]) => {
-                if (key === 'system')
-                    return null;
-                return (jsxRuntime.jsx(Icon, { fill: "currentColor", className: utils.cn(itemVariants({ active: value === key }), iconClassName) }, key));
-            }) }));
-    }
     const value = mounted ? theme : null;
     return (jsxRuntime.jsx("div", Object.assign({ className: container, "data-theme-toggle": "" }, props, { children: full.map(([key, Icon]) => (jsxRuntime.jsx("button", { type: "button", "aria-label": key, className: utils.cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: jsxRuntime.jsx(Icon, { className: iconClassName, fill: "currentColor" }) }, key))) })));
 }

package/dist/fuma/base/header-theme-switch.mjs

@@ -17,22 +17,14 @@ const itemVariants = cva('inline-flex size-6.5 items-center justify-center round
 });
 const full = [['light', SunIcon], ['dark', MoonIcon], ['system', AirplayIcon]];
 function HeaderThemeSwitch(_a) {
-    var { className, mode = 'light-dark' } = _a, props = __rest(_a, ["className", "mode"]);
-    const { setTheme, theme, resolvedTheme } = useTheme();
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { setTheme, theme } = useTheme();
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
     }, []);
     const container = cn('inline-flex items-center rounded-full border p-1 overflow-hidden *:rounded-full', className);
     const iconClassName = 'size-3.5 text-neutral-600 dark:text-neutral-300';
-    if (mode === 'light-dark') {
-        const value = mounted ? resolvedTheme : null;
-        return (jsx("button", { type: "button", className: container, "aria-label": "Toggle Theme", onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", children: full.map(([key, Icon]) => {
-                if (key === 'system')
-                    return null;
-                return (jsx(Icon, { fill: "currentColor", className: cn(itemVariants({ active: value === key }), iconClassName) }, key));
-            }) }));
-    }
     const value = mounted ? theme : null;
     return (jsx("div", Object.assign({ className: container, "data-theme-toggle": "" }, props, { children: full.map(([key, Icon]) => (jsx("button", { type: "button", "aria-label": key, className: cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: jsx(Icon, { className: iconClassName, fill: "currentColor" }) }, key))) })));
 }

package/dist/fuma/base/site-docs-layout.d.ts

@@ -4,6 +4,7 @@ import { type SiteBaseLayoutConfig } from './site-layout-shared';
 export interface SiteDocsLayoutConfig extends SiteBaseLayoutConfig {
     tree: DocsLayoutProps['tree'];
     sidebar?: DocsLayoutProps['sidebar'];
+    slots?: DocsLayoutProps['slots'];
 }
 export declare function SiteDocsLayout({ config, children, }: {
     config: SiteDocsLayoutConfig;

package/dist/fuma/base/site-docs-layout.js

@@ -3,9 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var docs = require('fumadocs-ui/layouts/docs');
 var siteLayoutShared = require('./site-layout-shared.js');
+var siteDocsThemeSwitch = require('./site-docs-theme-switch.js');
 
 function toDocsLayoutOptions(config) {
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: siteLayoutShared.normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {})), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: siteLayoutShared.normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), { slots: Object.assign(Object.assign({}, config.slots), { themeSwitch: siteDocsThemeSwitch.SiteDocsThemeSwitch }) }), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
 }
 function SiteDocsLayout({ config, children, }) {
     const options = toDocsLayoutOptions(config);

package/dist/fuma/base/site-docs-layout.mjs

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import { normalizeNavItems } from './site-layout-shared.mjs';
+import { SiteDocsThemeSwitch } from './site-docs-theme-switch.mjs';
 
 function toDocsLayoutOptions(config) {
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {})), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), { slots: Object.assign(Object.assign({}, config.slots), { themeSwitch: SiteDocsThemeSwitch }) }), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
 }
 function SiteDocsLayout({ config, children, }) {
     const options = toDocsLayoutOptions(config);

package/dist/fuma/base/site-docs-theme-switch.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from 'react';
+export declare function SiteDocsThemeSwitch(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element | null;

package/dist/fuma/base/site-docs-theme-switch.js

@@ -0,0 +1,16 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var headerThemeSwitch = require('./header-theme-switch.js');
+var siteThemeContext = require('./site-theme-context.js');
+
+function SiteDocsThemeSwitch(props) {
+    const themeMode = siteThemeContext.useSiteThemeMode();
+    if (themeMode !== 'light-dark-system') {
+        return null;
+    }
+    return jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, Object.assign({}, props, { mode: "light-dark-system" }));
+}
+
+exports.SiteDocsThemeSwitch = SiteDocsThemeSwitch;

package/dist/fuma/base/site-docs-theme-switch.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { HeaderThemeSwitch } from './header-theme-switch.mjs';
+import { useSiteThemeMode } from './site-theme-context.mjs';
+
+function SiteDocsThemeSwitch(props) {
+    const themeMode = useSiteThemeMode();
+    if (themeMode !== 'light-dark-system') {
+        return null;
+    }
+    return jsx(HeaderThemeSwitch, Object.assign({}, props, { mode: "light-dark-system" }));
+}
+
+export { SiteDocsThemeSwitch };

package/dist/fuma/base/site-layout-shared.d.ts

@@ -47,7 +47,10 @@ export interface SiteBaseLayoutConfig {
     githubUrl?: string;
     links?: SiteNavItemConfig[];
     searchToggle?: HomeLayoutProps['searchToggle'];
-    themeSwitch?: HomeLayoutProps['themeSwitch'];
+}
+export type SiteThemeSwitchMode = 'light-dark-system' | 'light-only' | 'dark-only';
+export interface SiteThemeSwitchConfig {
+    mode?: SiteThemeSwitchMode;
 }
 export interface SiteMenuLeafConfig {
     text: ReactNode;

package/dist/fuma/base/site-layout-shared.js

@@ -38,7 +38,7 @@ function createSiteBaseLayoutConfig(options) {
         } }, (options.i18n ? { i18n: options.i18n } : {})), (options.githubUrl ? { githubUrl: options.githubUrl } : {}));
 }
 function toHomeLayoutOptions(config) {
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {}));
 }
 
 exports.createSiteBaseLayoutConfig = createSiteBaseLayoutConfig;

package/dist/fuma/base/site-layout-shared.mjs

@@ -36,7 +36,7 @@ function createSiteBaseLayoutConfig(options) {
         } }, (options.i18n ? { i18n: options.i18n } : {})), (options.githubUrl ? { githubUrl: options.githubUrl } : {}));
 }
 function toHomeLayoutOptions(config) {
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {}));
 }
 
 export { createSiteBaseLayoutConfig, createSiteNavGroup, createSiteNavLink, normalizeNavItems, toHomeLayoutOptions };

package/dist/fuma/base/site-theme-context.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { SiteThemeSwitchMode } from './site-layout-shared';
+import { type SiteThemeProviderProps } from './site-theme-provider';
+export declare function useSiteThemeMode(): SiteThemeSwitchMode;
+export interface SiteThemeRootProviderProps extends Omit<SiteThemeProviderProps, 'children'> {
+    children: ReactNode;
+}
+export declare function SiteThemeRootProvider({ mode, children, ...props }: SiteThemeRootProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/site-theme-context.js

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var siteThemeProvider = require('./site-theme-provider.js');
+
+const SiteThemeModeContext = React.createContext('light-dark-system');
+function useSiteThemeMode() {
+    return React.useContext(SiteThemeModeContext);
+}
+function SiteThemeRootProvider(_a) {
+    var { mode = 'light-dark-system', children } = _a, props = tslib.__rest(_a, ["mode", "children"]);
+    return (jsxRuntime.jsx(SiteThemeModeContext.Provider, { value: mode, children: jsxRuntime.jsx(siteThemeProvider.SiteThemeProvider, Object.assign({}, props, { mode: mode, children: children })) }));
+}
+
+exports.SiteThemeRootProvider = SiteThemeRootProvider;
+exports.useSiteThemeMode = useSiteThemeMode;

package/dist/fuma/base/site-theme-context.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { SiteThemeProvider } from './site-theme-provider.mjs';
+
+const SiteThemeModeContext = createContext('light-dark-system');
+function useSiteThemeMode() {
+    return useContext(SiteThemeModeContext);
+}
+function SiteThemeRootProvider(_a) {
+    var { mode = 'light-dark-system', children } = _a, props = __rest(_a, ["mode", "children"]);
+    return (jsx(SiteThemeModeContext.Provider, { value: mode, children: jsx(SiteThemeProvider, Object.assign({}, props, { mode: mode, children: children })) }));
+}
+
+export { SiteThemeRootProvider, useSiteThemeMode };

package/dist/fuma/base/site-theme-provider.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { type ThemeProviderProps } from 'next-themes';
+import type { SiteThemeSwitchMode } from './site-layout-shared';
+export interface SiteThemeProviderProps extends Omit<ThemeProviderProps, 'children'> {
+    mode?: SiteThemeSwitchMode;
+    children: ReactNode;
+}
+export declare function SiteThemeProvider({ mode, children, ...props }: SiteThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/site-theme-provider.js

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var nextThemes = require('next-themes');
+
+function SiteThemeProvider(_a) {
+    var { mode = 'light-dark-system', children } = _a, props = tslib.__rest(_a, ["mode", "children"]);
+    return (jsxRuntime.jsx(nextThemes.ThemeProvider, Object.assign({ attribute: "class", disableTransitionOnChange: true }, resolveThemeProviderProps(mode), props, { children: children })));
+}
+function resolveThemeProviderProps(mode) {
+    if (mode === 'light-only') {
+        return {
+            forcedTheme: 'light',
+            enableSystem: false,
+            defaultTheme: 'light',
+        };
+    }
+    if (mode === 'dark-only') {
+        return {
+            forcedTheme: 'dark',
+            enableSystem: false,
+            defaultTheme: 'dark',
+        };
+    }
+    return {
+        enableSystem: true,
+        defaultTheme: 'system',
+        forcedTheme: undefined,
+    };
+}
+
+exports.SiteThemeProvider = SiteThemeProvider;

package/dist/fuma/base/site-theme-provider.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from 'next-themes';
+
+function SiteThemeProvider(_a) {
+    var { mode = 'light-dark-system', children } = _a, props = __rest(_a, ["mode", "children"]);
+    return (jsx(ThemeProvider, Object.assign({ attribute: "class", disableTransitionOnChange: true }, resolveThemeProviderProps(mode), props, { children: children })));
+}
+function resolveThemeProviderProps(mode) {
+    if (mode === 'light-only') {
+        return {
+            forcedTheme: 'light',
+            enableSystem: false,
+            defaultTheme: 'light',
+        };
+    }
+    if (mode === 'dark-only') {
+        return {
+            forcedTheme: 'dark',
+            enableSystem: false,
+            defaultTheme: 'dark',
+        };
+    }
+    return {
+        enableSystem: true,
+        defaultTheme: 'system',
+        forcedTheme: undefined,
+    };
+}
+
+export { SiteThemeProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.0.1",
+  "version": "31.2.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -243,9 +243,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
+    "@windrun-huaiin/lib": "^31.0.1",
     "@windrun-huaiin/base-ui": "^31.0.0",
-    "@windrun-huaiin/contracts": "^31.0.0",
-    "@windrun-huaiin/lib": "^31.0.0"
+    "@windrun-huaiin/contracts": "^31.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/base/custom-header.tsx

@@ -35,7 +35,11 @@ import { Popover, PopoverContent, PopoverTrigger } from 'fumadocs-ui/components/
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { useI18n } from 'fumadocs-ui/contexts/i18n';
 import { HeaderThemeSwitch } from './header-theme-switch';
-import type { ExtendedLinkItem } from './site-layout-shared';
+import { useSiteThemeMode } from './site-theme-context';
+import type {
+  ExtendedLinkItem,
+  SiteThemeSwitchMode,
+} from './site-layout-shared';
 
 export type NavbarCSSVars = CSSProperties & {
   '--fd-banner-height'?: string;
@@ -131,7 +135,6 @@ export function CustomHomeHeader({
   i18n = false,
   links,
   githubUrl,
-  themeSwitch = {},
   searchToggle = {},
   bannerHeight = 0,
   headerHeight = 2.5,
@@ -142,6 +145,7 @@ export function CustomHomeHeader({
   mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS,
   mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS,
 }: CustomHomeHeaderProps) {
+  const themeMode = useSiteThemeMode();
   const finalLinks = useMemo(
     () => resolveLinkItems({ links, githubUrl }),
     [links, githubUrl],
@@ -175,8 +179,12 @@ export function CustomHomeHeader({
         ? searchToggle.components?.lg ?? null
         : null,
     theme:
-      themeSwitch.enabled !== false
-        ? themeSwitch.component ?? <HeaderThemeSwitch mode={themeSwitch?.mode} />
+      shouldShowThemeSwitch(themeMode)
+        ? (
+            <HeaderThemeSwitch
+              mode={normalizeThemeSwitchMode(themeMode)}
+            />
+          )
         : null,
     i18n: i18n ? (
       <CompactLanguageToggle>
@@ -238,8 +246,12 @@ export function CustomHomeHeader({
       </CompactLanguageToggle>
     ) : null,
     theme:
-      themeSwitch.enabled !== false
-        ? themeSwitch.component ?? <HeaderThemeSwitch mode={themeSwitch?.mode} />
+      shouldShowThemeSwitch(themeMode)
+        ? (
+            <HeaderThemeSwitch
+              mode={normalizeThemeSwitchMode(themeMode)}
+            />
+          )
         : null,
   };
   const shouldRenderMobileUtilities = mobileMenuActionsOrder.some(
@@ -356,6 +368,16 @@ export function CustomHomeHeader({
   );
 }
 
+function shouldShowThemeSwitch(mode?: SiteThemeSwitchMode): boolean {
+  return mode === 'light-dark-system' || mode == null;
+}
+
+function normalizeThemeSwitchMode(
+  mode?: SiteThemeSwitchMode,
+): 'light-dark-system' {
+  return 'light-dark-system';
+}
+
 interface CustomNavbarProps extends ComponentProps<'div'> {
   bannerHeight?: number;
   headerHeight?: number;

package/src/fuma/base/custom-home-layout.tsx

@@ -159,18 +159,18 @@ export function CustomHomeLayout({
         />
       )}
       <HomeLayout
-        {...homeLayoutProps}
-        nav={{
-          ...navOptions,
-          component: header,
-        }}
-        className='bg-neutral-100 dark:bg-neutral-900'
-        style={layoutStyle}
-      >
-        {children}
-        {showFooter ? footer ?? <Footer locale={locale} localePrefixAsNeeded={localePrefixAsNeeded} defaultLocale={defaultLocale} /> : null}
-        {showGoToTop ? goToTop ?? <GoToTop /> : null}
-      </HomeLayout>
+          {...homeLayoutProps}
+          nav={{
+            ...navOptions,
+            component: header,
+          }}
+          className='bg-neutral-100 dark:bg-neutral-900'
+          style={layoutStyle}
+        >
+          {children}
+          {showFooter ? footer ?? <Footer locale={locale} localePrefixAsNeeded={localePrefixAsNeeded} defaultLocale={defaultLocale} /> : null}
+          {showGoToTop ? goToTop ?? <GoToTop /> : null}
+        </HomeLayout>
     </>
   );
 }

package/src/fuma/base/docs-root-provider.tsx

@@ -1,20 +1,17 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { NextProvider } from 'fumadocs-core/framework/next';
 import { I18nProvider, type I18nProviderProps } from 'fumadocs-ui/contexts/i18n';
-import { ThemeProvider, type ThemeProviderProps } from 'next-themes';
+import { SiteThemeRootProvider } from './site-theme-context';
+import type { SiteThemeProviderProps } from './site-theme-provider';
 
 type NextProviderComponents = {
   Link?: ComponentProps<typeof NextProvider>['Link'];
   Image?: ComponentProps<typeof NextProvider>['Image'];
 };
 
-type ThemeOptions = ThemeProviderProps & {
-  enabled?: boolean;
-};
-
 export interface DocsRootProviderProps {
   i18n: Omit<I18nProviderProps, 'children'>;
-  theme?: ThemeOptions;
+  theme?: Omit<SiteThemeProviderProps, 'children'>;
   components?: NextProviderComponents;
   children: ReactNode;
 }
@@ -25,34 +22,18 @@ export function DocsRootProvider({
   components,
   children,
 }: DocsRootProviderProps) {
-  let body = children;
-
-  if (theme.enabled !== false) {
-    body = (
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-        {...theme}
-      >
-        {body}
-      </ThemeProvider>
-    );
-  }
-
-  body = (
-    <I18nProvider {...i18n}>
-      {body}
-    </I18nProvider>
-  );
+  const themeMode = theme.mode ?? 'light-dark-system';
 
   return (
     <NextProvider
       Link={components?.Link}
       Image={components?.Image}
     >
-      {body}
+      <I18nProvider {...i18n}>
+        <SiteThemeRootProvider {...theme} mode={themeMode}>
+          {children}
+        </SiteThemeRootProvider>
+      </I18nProvider>
     </NextProvider>
   );
 }

package/src/fuma/base/header-theme-switch.tsx

@@ -5,6 +5,7 @@ import { AirplayIcon, MoonIcon, SunIcon } from '@windrun-huaiin/base-ui/icons';
 import { useTheme } from 'next-themes';
 import { type ComponentProps, useEffect, useState } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
+import type { SiteThemeSwitchMode } from './site-layout-shared';
 
 const itemVariants = cva('inline-flex size-6.5 items-center justify-center rounded-full p-1.5', {
   variants: {
@@ -18,15 +19,14 @@ const itemVariants = cva('inline-flex size-6.5 items-center justify-center round
 const full = [['light', SunIcon] as const, ['dark', MoonIcon] as const, ['system', AirplayIcon] as const];
 
 export interface HeaderThemeSwitchProps extends ComponentProps<'div'> {
-  mode?: 'light-dark' | 'light-dark-system';
+  mode?: 'light-dark-system';
 }
 
 export function HeaderThemeSwitch({
   className,
-  mode = 'light-dark',
   ...props
 }: HeaderThemeSwitchProps) {
-  const { setTheme, theme, resolvedTheme } = useTheme();
+  const { setTheme, theme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -39,35 +39,6 @@ export function HeaderThemeSwitch({
   );
   const iconClassName = 'size-3.5 text-neutral-600 dark:text-neutral-300';
 
-  if (mode === 'light-dark') {
-    const value = mounted ? resolvedTheme : null;
-
-    return (
-      <button
-        type="button"
-        className={container}
-        aria-label="Toggle Theme"
-        onClick={() => setTheme(value === 'light' ? 'dark' : 'light')}
-        data-theme-toggle=""
-      >
-        {full.map(([key, Icon]) => {
-          if (key === 'system') return null;
-
-          return (
-            <Icon
-              key={key}
-              fill="currentColor"
-              className={cn(
-                itemVariants({ active: value === key }),
-                iconClassName,
-              )}
-            />
-          );
-        })}
-      </button>
-    );
-  }
-
   const value = mounted ? theme : null;
 
   return (

package/src/fuma/base/site-docs-layout.tsx

@@ -4,10 +4,12 @@ import {
   normalizeNavItems,
   type SiteBaseLayoutConfig,
 } from './site-layout-shared';
+import { SiteDocsThemeSwitch } from './site-docs-theme-switch';
 
 export interface SiteDocsLayoutConfig extends SiteBaseLayoutConfig {
   tree: DocsLayoutProps['tree'];
   sidebar?: DocsLayoutProps['sidebar'];
+  slots?: DocsLayoutProps['slots'];
 }
 
 function toDocsLayoutOptions(config: SiteDocsLayoutConfig): DocsLayoutProps {
@@ -17,7 +19,10 @@ function toDocsLayoutOptions(config: SiteDocsLayoutConfig): DocsLayoutProps {
     ...(config.githubUrl ? { githubUrl: config.githubUrl } : {}),
     ...(config.links ? { links: normalizeNavItems(config.links) } : {}),
     ...(config.searchToggle ? { searchToggle: config.searchToggle } : {}),
-    ...(config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}),
+    slots: {
+      ...config.slots,
+      themeSwitch: SiteDocsThemeSwitch,
+    },
     ...(config.sidebar ? { sidebar: config.sidebar } : {}),
     tree: config.tree,
   };
@@ -31,5 +36,6 @@ export function SiteDocsLayout({
   children: ReactNode;
 }) {
   const options = toDocsLayoutOptions(config);
+
   return <DocsLayout {...options}>{children}</DocsLayout>;
 }

package/src/fuma/base/site-docs-theme-switch.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { HeaderThemeSwitch } from './header-theme-switch';
+import { useSiteThemeMode } from './site-theme-context';
+
+export function SiteDocsThemeSwitch(props: ComponentProps<'div'>) {
+  const themeMode = useSiteThemeMode();
+
+  if (themeMode !== 'light-dark-system') {
+    return null;
+  }
+
+  return <HeaderThemeSwitch {...props} mode="light-dark-system" />;
+}

package/src/fuma/base/site-layout-shared.tsx

@@ -58,7 +58,15 @@ export interface SiteBaseLayoutConfig {
   githubUrl?: string;
   links?: SiteNavItemConfig[];
   searchToggle?: HomeLayoutProps['searchToggle'];
-  themeSwitch?: HomeLayoutProps['themeSwitch'];
+}
+
+export type SiteThemeSwitchMode =
+  | 'light-dark-system'
+  | 'light-only'
+  | 'dark-only';
+
+export interface SiteThemeSwitchConfig {
+  mode?: SiteThemeSwitchMode;
 }
 
 export interface SiteMenuLeafConfig {
@@ -185,6 +193,5 @@ export function toHomeLayoutOptions(config: SiteBaseLayoutConfig): HomeLayoutPro
     ...(config.githubUrl ? { githubUrl: config.githubUrl } : {}),
     ...(config.links ? { links: normalizeNavItems(config.links) } : {}),
     ...(config.searchToggle ? { searchToggle: config.searchToggle } : {}),
-    ...(config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}),
   };
 }

package/src/fuma/base/site-theme-context.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { createContext, type ReactNode, useContext } from 'react';
+import type { SiteThemeSwitchMode } from './site-layout-shared';
+import { SiteThemeProvider, type SiteThemeProviderProps } from './site-theme-provider';
+
+const SiteThemeModeContext = createContext<SiteThemeSwitchMode>('light-dark-system');
+
+export function useSiteThemeMode(): SiteThemeSwitchMode {
+  return useContext(SiteThemeModeContext);
+}
+
+export interface SiteThemeRootProviderProps
+  extends Omit<SiteThemeProviderProps, 'children'> {
+  children: ReactNode;
+}
+
+export function SiteThemeRootProvider({
+  mode = 'light-dark-system',
+  children,
+  ...props
+}: SiteThemeRootProviderProps) {
+  return (
+    <SiteThemeModeContext.Provider value={mode}>
+      <SiteThemeProvider {...props} mode={mode}>
+        {children}
+      </SiteThemeProvider>
+    </SiteThemeModeContext.Provider>
+  );
+}

package/src/fuma/base/site-theme-provider.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ThemeProvider, type ThemeProviderProps } from 'next-themes';
+import type { SiteThemeSwitchMode } from './site-layout-shared';
+
+export interface SiteThemeProviderProps extends Omit<ThemeProviderProps, 'children'> {
+  mode?: SiteThemeSwitchMode;
+  children: ReactNode;
+}
+
+export function SiteThemeProvider({
+  mode = 'light-dark-system',
+  children,
+  ...props
+}: SiteThemeProviderProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      disableTransitionOnChange
+      {...resolveThemeProviderProps(mode)}
+      {...props}
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+
+function resolveThemeProviderProps(mode: SiteThemeSwitchMode): ThemeProviderProps {
+  if (mode === 'light-only') {
+    return {
+      forcedTheme: 'light',
+      enableSystem: false,
+      defaultTheme: 'light',
+    };
+  }
+
+  if (mode === 'dark-only') {
+    return {
+      forcedTheme: 'dark',
+      enableSystem: false,
+      defaultTheme: 'dark',
+    };
+  }
+
+  return {
+    enableSystem: true,
+    defaultTheme: 'system',
+    forcedTheme: undefined,
+  };
+}