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"
@@ -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
 }