feat(ui): add support for auto theme mode (system preference)

itsjavi · Aug 30, 2023 · 7bc1833 · 7bc1833
1 parent a2c38c5
commit 7bc1833
Showing 1 changed file with 17 additions and 23 deletions.
diff --git a/packages/storylite/src/app/getToolbarAddons.tsx b/packages/storylite/src/app/getToolbarAddons.tsx
@@ -1,5 +1,6 @@
 import {
   BoxSelectIcon,
+  ContrastIcon,
   ExpandIcon,
   ExternalLinkIcon,
   GridIcon,
@@ -161,42 +162,35 @@ function getDefaultRightToolbarAddons(): AddonSetup[] {
   const darkModeAddon: AddonSetup = [
     SLCoreAddon.ColorScheme,
     {
-      tooltip: 'Toggle Dark Mode',
+      tooltip: 'Toggle Dark/Light/Auto theme',
       defaultContent: <SunIcon />,
       activeContent: <MoonIcon />,
       placement,
       stateful: true,
       persistent: true,
       defaultValue: SLColorScheme.Auto,
-      onRender: (ctx, [value, , setValue]) => {
-        if (value !== SLColorScheme.Auto) {
-          return
-        }
-
-        const updateColorScheme = (e: MediaQueryList | MediaQueryListEvent) => {
-          setValue(e.matches ? SLColorScheme.Dark : SLColorScheme.Light)
-        }
+      onClick: (_, [value, setValue]) => {
+        // Rotate between Auto -> Light -> Dark
+        if (value === SLColorScheme.Light) {
+          setValue(SLColorScheme.Auto)
 
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-        if (mediaQuery.matches) {
-          updateColorScheme(mediaQuery)
+          return
         }
+        if (value === SLColorScheme.Dark) {
+          setValue(SLColorScheme.Light)
 
-        mediaQuery.addEventListener('change', updateColorScheme)
-
-        return () => {
-          mediaQuery.removeEventListener('change', updateColorScheme)
+          return
         }
+        setValue(SLColorScheme.Dark)
       },
-      onClick: (_, [value, setValue]) => {
-        if (value === false || value === SLColorScheme.Light) {
-          setValue(SLColorScheme.Dark)
-
-          return
+      render: (_, [value]) => {
+        if (value === SLColorScheme.Auto || !value) {
+          return <ContrastIcon />
         }
-        setValue(SLColorScheme.Light)
+
+        return value === SLColorScheme.Light ? <SunIcon /> : <MoonIcon />
       },
-      isActive: (_, [value]) => value === SLColorScheme.Dark,
+      isActive: (_, [value]) => value !== SLColorScheme.Auto,
     } satisfies SLAddonPropsWithoutId<true>,
   ]