feat(initial-mode): add initial theme mode plugin for dark/light mode handling

guangzan · guangzan · commit 67fb85ab6ea4 · 2026-03-17T18:00:03.000+08:00
- Introduced a new plugin to manage the initial theme mode based on user preferences and local storage.
- Updated main.ts to include the initialMode plugin in the theme creation process.
diff --git a/themes/shadcn/src/main.ts b/themes/shadcn/src/main.ts
@@ -3,5 +3,6 @@ import './styles/globals.css'
 import { codeCopyButton } from './plugins/code-copy-button'
 import { smoothScroll } from './plugins/smooth-scroll'
 import { spa } from './plugins/spa'
+import { initialMode } from './plugins/initial-mode'
 
-createTheme().use(spa).use(smoothScroll).use(codeCopyButton)
+createTheme().use(initialMode).use(spa).use(smoothScroll).use(codeCopyButton)
diff --git a/themes/shadcn/src/plugins/initial-mode/index.ts b/themes/shadcn/src/plugins/initial-mode/index.ts
@@ -0,0 +1,18 @@
+export const initialMode = () => {
+  try {
+    const savedTheme = localStorage.getItem('theme')
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const resolvedTheme =
+      savedTheme === 'dark' || savedTheme === 'light'
+        ? savedTheme
+        : prefersDark
+          ? 'dark'
+          : 'light'
+    const root = document.documentElement
+    root.classList.toggle('dark', resolvedTheme === 'dark')
+    root.classList.toggle('light', resolvedTheme === 'light')
+    root.style.setProperty('color-scheme', resolvedTheme)
+  } catch {
+    // Ignore localStorage or matchMedia access errors.
+  }
+}
