refactor: rename "darkMode" to "theme" for clarity

Author: ytkimirti

src/components/databrowser/components/display/input/custom-editor.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react"
+import { useTheme } from "@/dark-mode-context"
 import { useTab } from "@/tab-provider"
 import { Editor, useMonaco } from "@monaco-editor/react"
 
 import { cn, isTest } from "@/lib/utils"
-import { useDarkMode } from "@/dark-mode-context"
 import { CopyButton } from "@/components/databrowser/copy-button"
 
 export const CustomEditor = ({
@@ -24,7 +24,7 @@ export const CustomEditor = ({
   const { active } = useTab()
   const monaco = useMonaco()
   const editorRef = useRef()
-  const theme = useDarkMode()
+  const theme = useTheme()
 
   useEffect(() => {
     if (!active || !monaco || !editorRef.current) {

src/components/databrowser/index.tsx

@@ -1,7 +1,7 @@
 import "@/globals.css"
 
 import { useEffect, useMemo, useRef } from "react"
-import { DarkModeProvider, useDarkMode, type DarkModeOption } from "@/dark-mode-context"
+import { DarkModeProvider, useTheme, type DarkModeOption } from "@/dark-mode-context"
 import { RedisProvider, type RedisCredentials } from "@/redis-context"
 import type { TabId } from "@/store"
 import { DatabrowserProvider, useDatabrowserStore } from "@/store"
@@ -28,8 +28,8 @@ export const RedisBrowser = ({
   url,
   hideTabs,
   storage,
-  darkMode = "light",
   onFullScreenClick,
+  theme = "light",
 }: RedisCredentials & {
   hideTabs?: boolean
 
@@ -54,19 +54,19 @@ export const RedisBrowser = ({
   storage?: RedisBrowserStorage
 
   /**
-   * Dark mode configuration.
+   * Theme configuration (light or dark).
    *
    * @default "light"
    * @example
    * ```tsx
    * // Light mode (default)
-   * <RedisBrowser darkMode="light" />
+   * <RedisBrowser theme="light" />
    *
    * // Dark mode
-   * <RedisBrowser darkMode="dark" />
+   * <RedisBrowser theme="dark" />
    * ```
    */
-  darkMode?: DarkModeOption
+  theme?: DarkModeOption
 }) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
   const rootRef = useRef<HTMLDivElement>(null)
@@ -78,7 +78,7 @@ export const RedisBrowser = ({
   return (
     <QueryClientProvider client={queryClient}>
       <RedisProvider redisCredentials={credentials}>
-        <DarkModeProvider darkMode={darkMode}>
+        <DarkModeProvider theme={theme}>
           <DatabrowserProvider storage={storage} rootRef={rootRef}>
             <TooltipProvider>
               <RedisBrowserRoot
@@ -103,8 +103,7 @@ const RedisBrowserRoot = ({
   rootRef: React.RefObject<HTMLDivElement>
   onFullScreenClick?: () => void
 }) => {
-  const theme = useDarkMode()
-  
+  const theme = useTheme()
 
   useEffect(() => {
     portalWrapper.classList.add("text-zinc-700")

src/dark-mode-context.tsx

@@ -1,24 +1,20 @@
-import { createContext, type PropsWithChildren, useContext } from "react"
+import { createContext, useContext, type PropsWithChildren } from "react"
 
 export type DarkModeOption = "dark" | "light"
 
-type DarkModeContextProps = {
-  darkMode: DarkModeOption
-}
-
-const DarkModeContext = createContext<DarkModeContextProps | undefined>(undefined)
+const DarkModeContext = createContext<DarkModeOption | undefined>(undefined)
 
 export const DarkModeProvider = ({
   children,
-  darkMode,
-}: PropsWithChildren<{ darkMode: DarkModeOption }>) => {
-  return <DarkModeContext.Provider value={{ darkMode }}>{children}</DarkModeContext.Provider>
+  theme,
+}: PropsWithChildren<{ theme: DarkModeOption }>) => {
+  return <DarkModeContext.Provider value={theme}>{children}</DarkModeContext.Provider>
 }
 
-export const useDarkMode = (): DarkModeOption => {
+export const useTheme = (): DarkModeOption => {
   const context = useContext(DarkModeContext)
   if (!context) {
     throw new Error("useDarkMode must be used within a DarkModeProvider")
   }
-  return context.darkMode
+  return context
 }

src/playground/index.tsx

@@ -11,7 +11,7 @@ const safeProcess = typeof process === "undefined" ? { env: {} as Record<string,
 
 const App = () => {
   const { credentials } = useCredentialsStore()
-  const [darkMode, setDarkMode] = useState<DarkModeOption>("light")
+  const [theme, setTheme] = useState<DarkModeOption>("light")
 
   useEffect(() => {
     if (safeProcess.env.UPSTASH_REDIS_REST_URL && safeProcess.env.UPSTASH_REDIS_REST_TOKEN) {
@@ -25,15 +25,15 @@ const App = () => {
   }, [safeProcess.env.UPSTASH_REDIS_REST_URL, safeProcess.env.UPSTASH_REDIS_REST_TOKEN])
 
   const toggleDarkMode = () => {
-    setDarkMode((prev) => (prev === "light" ? "dark" : "light"))
+    setTheme((prev) => (prev === "light" ? "dark" : "light"))
   }
 
   return (
     <main
       style={{
         position: "fixed",
         inset: 0,
-        backgroundColor: darkMode === "dark" ? "#18181b" : "rgb(var(--color-zinc-50))",
+        backgroundColor: theme === "dark" ? "#18181b" : "rgb(var(--color-zinc-50))",
         padding: "20px",
         transition: "background-color 0.2s",
       }}
@@ -56,17 +56,17 @@ const App = () => {
             style={{
               padding: "8px",
               border: "1px solid",
-              borderColor: darkMode === "dark" ? "#3f3f46" : "#d4d4d8",
+              borderColor: theme === "dark" ? "#3f3f46" : "#d4d4d8",
               borderRadius: "6px",
-              backgroundColor: darkMode === "dark" ? "#27272a" : "#ffffff",
-              color: darkMode === "dark" ? "#fafafa" : "#18181b",
+              backgroundColor: theme === "dark" ? "#27272a" : "#ffffff",
+              color: theme === "dark" ? "#fafafa" : "#18181b",
               cursor: "pointer",
               fontSize: "14px",
               fontWeight: "500",
               transition: "all 0.2s",
             }}
           >
-            {darkMode === "dark" ? <IconMoon size={20} /> : <IconSun size={20} />}
+            {theme === "dark" ? <IconMoon size={20} /> : <IconSun size={20} />}
           </button>
         </div>
         <div style={{ height: "800px" }}>
@@ -82,7 +82,7 @@ const App = () => {
               }}
               token={credentials.token}
               url={credentials.url}
-              darkMode={darkMode}
+              theme={theme}
             />
           ) : (
             <CredentialsForm />