From 613ec3583ff20c47b5a1a9d0ba91fafbc96b9226 Mon Sep 17 00:00:00 2001
From: sanka <44424604+sankaSanjeeva@users.noreply.github.com>
Date: Sat, 26 Aug 2023 16:15:34 +0530
Subject: [PATCH] docs(www): update dark-mode for vite (#1118)

Co-authored-by: sanka <sanka.s@fidenz.com>
Co-authored-by: shadcn <m@shadcn.com>
---
 apps/www/content/docs/dark-mode/vite.mdx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/www/content/docs/dark-mode/vite.mdx b/apps/www/content/docs/dark-mode/vite.mdx
index 53afa99618..4617f4295e 100644
--- a/apps/www/content/docs/dark-mode/vite.mdx
+++ b/apps/www/content/docs/dark-mode/vite.mdx
@@ -12,18 +12,20 @@ description: Adding dark mode to your vite app.
 ```tsx title="components/theme-provider.tsx"
 import { createContext, useContext, useEffect, useState } from "react"
 
+type Theme = "dark" | "light" | "system"
+
 type ThemeProviderProps = {
   children: React.ReactNode
-  defaultTheme?: string
+  defaultTheme?: Theme
   storageKey?: string
 }
 
 type ThemeProviderState = {
-  theme: string
-  setTheme: (theme: string) => void
+  theme: Theme
+  setTheme: (theme: Theme) => void
 }
 
-const initialState = {
+const initialState: ThemeProviderState = {
   theme: "system",
   setTheme: () => null,
 }
@@ -36,8 +38,8 @@ export function ThemeProvider({
   storageKey = "vite-ui-theme",
   ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState(
-    () => localStorage.getItem(storageKey) || defaultTheme
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
   )
 
   useEffect(() => {
@@ -60,7 +62,7 @@ export function ThemeProvider({
 
   const value = {
     theme,
-    setTheme: (theme: string) => {
+    setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme)
       setTheme(theme)
     },