fix: system theme (#1139)

fern-api · Jul 12, 2024 · ed12fcd · ed12fcd
1 parent 0086714
commit ed12fcd
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 17 deletions.
diff --git a/packages/ui/app/src/atoms/theme.ts b/packages/ui/app/src/atoms/theme.ts
@@ -23,10 +23,10 @@ const SETTABLE_THEME_ATOM = atomWithStorageString<Theme | typeof SYSTEM>(STORAGE
 
 const IS_SYSTEM_THEME_ATOM = atom((get) => get(SETTABLE_THEME_ATOM) === SYSTEM);
 
-export const COLORS_ATOM = atom<ColorsConfig>({ dark: undefined, light: undefined });
+export const COLORS_ATOM = atom<Partial<ColorsConfig>>({});
 export const AVAILABLE_THEMES_ATOM = atom((get) => getAvailableThemes(get(COLORS_ATOM)));
 
-export function useColors(): ColorsConfig {
+export function useColors(): Partial<ColorsConfig> {
     return useAtomValue(COLORS_ATOM);
 }
 
@@ -38,11 +38,13 @@ export const THEME_SWITCH_ENABLED_ATOM = atom((get) => {
 export const THEME_ATOM = atomWithRefresh((get): Theme => {
     const storedTheme = get(SETTABLE_THEME_ATOM);
     const availableThemes = get(AVAILABLE_THEMES_ATOM);
-    if (storedTheme === SYSTEM) {
+    if (availableThemes.length === 1) {
+        return availableThemes[0];
+    } else if (storedTheme === SYSTEM) {
         if (typeof window !== "undefined") {
             return getSystemTheme();
         }
-    } else if (availableThemes.includes(storedTheme)) {
+    } else {
         return storedTheme;
     }
     return availableThemes[0];
@@ -62,6 +64,11 @@ export function useToggleTheme(): () => void {
     return () => setTheme(theme === "dark" ? "light" : "dark");
 }
 
+export function useSetSystemTheme(): () => void {
+    const setTheme = useSetTheme();
+    return () => setTheme(SYSTEM);
+}
+
 export const THEME_BG_COLOR = atom((get) => {
     const theme = get(THEME_ATOM);
     const colors = get(COLORS_ATOM);

diff --git a/packages/ui/app/src/docs/ThemeButton.tsx b/packages/ui/app/src/docs/ThemeButton.tsx
@@ -1,10 +1,10 @@
 import { FernButton, FernButtonProps } from "@fern-ui/components";
 import { useMounted } from "@fern-ui/react-commons";
+import * as Popover from "@radix-ui/react-popover";
 import cn from "clsx";
-
-import { memo } from "react";
-import { Moon as MoonIcon, Sun as SunIcon } from "react-feather";
-import { useTheme, useToggleTheme } from "../atoms/theme";
+import { memo, useState } from "react";
+import { Monitor, Moon as MoonIcon, Sun as SunIcon } from "react-feather";
+import { useSetSystemTheme, useTheme, useToggleTheme } from "../atoms/theme";
 
 export declare namespace ThemeButton {
     export interface Props extends FernButtonProps {
@@ -15,20 +15,53 @@ export declare namespace ThemeButton {
 export const ThemeButton = memo(({ className, ...props }: ThemeButton.Props) => {
     const resolvedTheme = useTheme();
     const toggleTheme = useToggleTheme();
+    const setSystemTheme = useSetSystemTheme();
     const mounted = useMounted();
+    const [isOpen, setOpen] = useState(false);
 
     const IconToUse = mounted && resolvedTheme === "dark" ? MoonIcon : SunIcon;
 
     return (
-        <FernButton
-            {...props}
-            className={cn("fern-theme-button", className)}
-            onClick={toggleTheme}
-            rounded={true}
-            variant="minimal"
-            intent="primary"
-            icon={<IconToUse className="fern-theme-button-icon" />}
-        />
+        <Popover.Root
+            open={isOpen}
+            onOpenChange={(open) => {
+                if (!open) {
+                    setOpen(false);
+                }
+            }}
+        >
+            <Popover.Trigger asChild>
+                <FernButton
+                    {...props}
+                    className={cn("fern-theme-button", className)}
+                    onClick={toggleTheme}
+                    onContextMenu={(e) => {
+                        e.preventDefault();
+                        setOpen(true);
+                    }}
+                    rounded={true}
+                    variant="minimal"
+                    intent="primary"
+                    icon={<IconToUse className="fern-theme-button-icon" />}
+                    title="toggle theme"
+                />
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content sideOffset={5} side="bottom" align="center">
+                    <FernButton
+                        onClick={() => {
+                            setSystemTheme();
+                            setOpen(false);
+                        }}
+                        variant="outlined"
+                        intent="none"
+                        icon={<Monitor className="fern-theme-button-icon" />}
+                        text="Auto"
+                        title="set system theme"
+                    />
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
     );
 });