feat: added color scheme options and bumped up to shadcn 3.5

src/providers/themeProvider.tsx

@@ -1,20 +1,25 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
-type Theme = "dark" | "light" | "system"
+export type Theme = "dark" | "light" | "system"
+export type ColorScheme = "default" | "blue" | "green" | "orange" | "red" | "rose" | "violet" | "yellow"
 
 type ThemeProviderProps = {
   children: React.ReactNode
   defaultTheme?: Theme
-  storageKey?: string
+  defaultColorScheme?: ColorScheme
+  themeStorageKey?: string
+  colorSchemeStorageKey?: string
 }
 
 type ThemeProviderState = {
   theme: Theme
-  setTheme: (theme: Theme) => void
+  colorScheme: ColorScheme
+  setTheme: (theme: Theme, colorScheme: ColorScheme) => void
 }
 
 const initialState: ThemeProviderState = {
   theme: "system",
+  colorScheme: "default",
   setTheme: () => null,
 }
 
@@ -23,36 +28,56 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 export function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  defaultColorScheme = "default",
+  themeStorageKey = "vite-ui-theme",
+  colorSchemeStorageKey = "vite-ui-color-scheme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () => (localStorage.getItem(themeStorageKey) as Theme) || defaultTheme
+  )
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+    () => (localStorage.getItem(colorSchemeStorageKey) as ColorScheme) || defaultColorScheme
   )
 
   useEffect(() => {
     const root = window.document.documentElement
 
-    root.classList.remove("light", "dark")
+    root.classList.remove("light", "dark", "blue", "blue-dark", "green", "green-dark", "orange", "orange-dark", "red", "red-dark", "rose", "rose-dark", "violet", "violet-dark", "yellow", "yellow-dark")
 
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
         .matches
-        ? "dark"
-        : "light"
+        ? colorScheme === "default"
+          ? "dark"
+          : `${colorScheme}-dark`
+        : colorScheme === "default"
+          ? "light"
+          : colorScheme
 
       root.classList.add(systemTheme)
       return
     }
 
-    root.classList.add(theme)
-  }, [theme])
+    if (theme === "dark") {
+      root.classList.add(colorScheme === "default" ? "dark" : `${colorScheme}-dark`)
+      return
+    }
+
+    if (theme === "light") {
+      root.classList.add(colorScheme === "default" ? "light" : colorScheme)
+      return
+    }
+  }, [theme, colorScheme])
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme)
+    colorScheme,
+    setTheme: (theme: Theme, colorScheme: ColorScheme) => {
+      localStorage.setItem(themeStorageKey, theme)
+      localStorage.setItem(colorSchemeStorageKey, colorScheme)
       setTheme(theme)
+      setColorScheme(colorScheme)
     },
   }
 
@@ -70,4 +95,4 @@ export const useTheme = () => {
     throw new Error("useTheme must be used within a ThemeProvider")
 
   return context
-}
+}