feat: dark mode (#32)

* feat: dark mode config

* remove dark:* classes from shadcn

* fix: global color style

* fix: stroke color for select

* feat: move dark mode to new hook

* fix: other dark mode fixes

* fix: many dark mode fixes

* feat: add dark mode checkbox to the playground

* fix: unite colors with console

* fix: darkmode bug with modals

* fix: overflow

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

Author: ytkimirti

src/components/databrowser/components/display/delete-alert-dialog.tsx

@@ -42,7 +42,7 @@ export function DeleteAlertDialog({
         <AlertDialogFooter>
           <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
           <AlertDialogAction
-            className="bg-red-500 text-gray-50 hover:bg-red-600"
+            className="bg-red-500 text-zinc-50 hover:bg-red-600"
             onClick={onDeleteConfirm}
           >
             Yes, Delete

src/components/databrowser/components/display/display-simple.tsx

@@ -63,7 +63,9 @@ const EditorDisplayForm = ({
           {type === "json" ? <div /> : selector}
         </div>
 
-        <div className="grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
+        <div className="grow rounded-md border border-zinc-300 bg-white p-1 dark:!bg-[#192321]">
+          {editor}
+        </div>
       </div>
 
       <div className="flex shrink-0 items-center gap-2">

src/components/databrowser/components/display/index.tsx

@@ -18,7 +18,7 @@ export const DataDisplay = () => {
       ) : !type ? (
         query.isLoading ? (
           <div className="flex h-full items-center justify-center">
-            <span className="text-gray-500">Loading...</span>
+            <span className="text-zinc-500">Loading...</span>
           </div>
         ) : (
           <div />

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react"
+import { useTheme } from "@/dark-mode-context"
 import { useTab } from "@/tab-provider"
 import { Editor, useMonaco } from "@monaco-editor/react"
 
@@ -23,6 +24,7 @@ export const CustomEditor = ({
   const { active } = useTab()
   const monaco = useMonaco()
   const editorRef = useRef()
+  const theme = useTheme()
 
   useEffect(() => {
     if (!active || !monaco || !editorRef.current) {
@@ -35,6 +37,7 @@ export const CustomEditor = ({
 
   const editor = (
     <Editor
+      theme={theme === "dark" ? "vs-dark" : "light"}
       loading={undefined}
       onMount={(editor) => {
         // @ts-expect-error not typing the editor type
@@ -68,7 +71,9 @@ export const CustomEditor = ({
         scrollBeyondLastLine: false,
         renderLineHighlight: "none",
         unusualLineTerminators: "auto",
+        padding: { top: 0, bottom: 0 },
       }}
+      className="[&_.monaco-editor-background]:!bg-transparent [&_.monaco-editor]:!bg-transparent"
     />
   )
 

src/components/databrowser/components/sidebar/index.tsx

@@ -28,7 +28,7 @@ export function Sidebar() {
           <div className="flex gap-1">
             <Button
               aria-label="Refresh"
-              className="h-7 w-7 px-0"
+              className="h-7 w-7 px-0 text-zinc-500"
               onClick={() => {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_KEYS_QUERY_KEY],

src/components/databrowser/components/sidebar/keys-list.tsx

@@ -1,3 +1,4 @@
+import { useTab } from "@/tab-provider"
 import type { DataType, RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
@@ -6,7 +7,6 @@ import { TypeTag } from "@/components/databrowser/components/type-tag"
 
 import { useKeys } from "../../hooks/use-keys"
 import { SidebarContextMenu } from "../sidebar-context-menu"
-import { useTab } from "@/tab-provider"
 
 export const KeysList = () => {
   const { keys } = useKeys()

src/components/databrowser/components/sidebar/search-input.tsx

@@ -134,7 +134,7 @@ export const SearchInput = () => {
           type="button"
           variant="link"
           size="icon"
-          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+          className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500 hover:text-zinc-900"
           onClick={() => {
             setSearchKey("")
             setState("")

src/components/databrowser/components/type-tag.tsx

@@ -13,13 +13,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const iconsMap = {
-  string: <IconQuote size={15} stroke={1.3} />,
-  set: <IconLayersIntersect size={15} stroke={1.3} />,
-  hash: <IconHash size={15} stroke={1.3} />,
-  json: <IconCodeDots size={15} stroke={1.3} />,
-  zset: <IconArrowsSort size={15} stroke={1.3} />,
-  list: <IconList size={15} stroke={1.3} />,
-  stream: <IconList size={15} stroke={1.3} />,
+  string: <IconQuote size={15} stroke={1.2} />,
+  set: <IconLayersIntersect size={15} stroke={1.2} />,
+  hash: <IconHash size={15} stroke={1.2} />,
+  json: <IconCodeDots size={15} stroke={1.2} />,
+  zset: <IconArrowsSort size={15} stroke={1.2} />,
+  list: <IconList size={15} stroke={1.2} />,
+  stream: <IconList size={15} stroke={1.2} />,
 } as const
 
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {

src/components/databrowser/index.tsx

@@ -1,6 +1,7 @@
 import "@/globals.css"
 
 import { useEffect, useMemo, useRef } from "react"
+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"
@@ -9,6 +10,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { QueryClientProvider } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
+import { portalWrapper } from "@/lib/portal-root"
 
 import { DatabrowserInstance } from "./components/databrowser-instance"
 import { DatabrowserTabs } from "./components/databrowser-tabs"
@@ -27,6 +29,7 @@ export const RedisBrowser = ({
   hideTabs,
   storage,
   onFullScreenClick,
+  theme = "light",
 }: RedisCredentials & {
   hideTabs?: boolean
 
@@ -49,6 +52,21 @@ export const RedisBrowser = ({
    * ```
    */
   storage?: RedisBrowserStorage
+
+  /**
+   * Theme configuration (light or dark).
+   *
+   * @default "light"
+   * @example
+   * ```tsx
+   * // Light mode (default)
+   * <RedisBrowser theme="light" />
+   *
+   * // Dark mode
+   * <RedisBrowser theme="dark" />
+   * ```
+   */
+  theme?: DarkModeOption
 }) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
   const rootRef = useRef<HTMLDivElement>(null)
@@ -60,24 +78,53 @@ export const RedisBrowser = ({
   return (
     <QueryClientProvider client={queryClient}>
       <RedisProvider redisCredentials={credentials}>
-        <DatabrowserProvider storage={storage} rootRef={rootRef}>
-          <TooltipProvider>
-            {/* ups-db is the custom class used to prefix every style in the css bundle */}
-            <div
-              className="ups-db"
-              style={{ height: "100%", display: "flex", flexDirection: "column" }}
-              ref={rootRef}
-            >
-              {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
-              <DatabrowserInstances />
-            </div>
-          </TooltipProvider>
-        </DatabrowserProvider>
+        <DarkModeProvider theme={theme}>
+          <DatabrowserProvider storage={storage} rootRef={rootRef}>
+            <TooltipProvider>
+              <RedisBrowserRoot
+                hideTabs={hideTabs}
+                rootRef={rootRef}
+                onFullScreenClick={onFullScreenClick}
+              />
+            </TooltipProvider>
+          </DatabrowserProvider>
+        </DarkModeProvider>
       </RedisProvider>
     </QueryClientProvider>
   )
 }
 
+const RedisBrowserRoot = ({
+  hideTabs,
+  rootRef,
+  onFullScreenClick,
+}: {
+  hideTabs?: boolean
+  rootRef: React.RefObject<HTMLDivElement>
+  onFullScreenClick?: () => void
+}) => {
+  const theme = useTheme()
+
+  useEffect(() => {
+    portalWrapper.classList.add("text-zinc-700")
+    portalWrapper.classList.toggle("dark", theme === "dark")
+  }, [theme])
+
+  return (
+    /* ups-db is the custom class used to prefix every style in the css bundle */
+    <div
+      className={`ups-db ${theme === "dark" ? "dark" : ""}`}
+      style={{ height: "100%" }}
+      ref={rootRef}
+    >
+      <div className="flex h-full flex-col text-zinc-700">
+        {!hideTabs && <DatabrowserTabs onFullScreenClick={onFullScreenClick} />}
+        <DatabrowserInstances />
+      </div>
+    </div>
+  )
+}
+
 const DatabrowserInstances = () => {
   const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore()
 

src/components/ui/alert-dialog.tsx

@@ -20,7 +20,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-zinc-950/80",
+      "fixed inset-0 z-50 bg-white/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,8 +38,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0" +
-          " fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-zinc-800 dark:bg-zinc-950 sm:rounded-lg md:w-full",
+        "antialiased data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
+          " data-[state=open]:slide-in-from-top-[48%]sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 md:w-full",
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-zinc-500 dark:text-zinc-400", className)}
+    className={cn("text-sm text-zinc-500", className)}
     {...props}
   />
 ))