feat: dark mode

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}
   />
 ))

src/components/ui/button.tsx

@@ -7,34 +7,18 @@ import { cn } from "@/lib/utils"
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm " +
     "ring-offset-white transition-colors " +
-    // Disabled ring
     "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
-    "disabled:pointer-events-none disabled:opacity-50 " +
-    "dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+    "disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default:
-          "bg-white text-black border shadow-sm border-zinc-300 " +
-          "hover:bg-[#FFFFFF]/70 dark:bg-black" +
-          " dark:text-[#FFFFFF]" +
-          " dark:hover:bg-black/10",
-        destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 " +
-          "dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-zinc-200 bg-white " +
-          "hover:bg-zinc-100 hover:text-zinc-900 " +
-          "dark:border-zinc-800 dark:bg-zinc-950 " +
-          "dark:hover:bg-zinc-800 dark:hover:text-neutral-50",
-        primary:
-          "bg-emerald-500 text-white shadow-sm " +
-          "hover:bg-emerald-600 dark:bg-emerald-500 dark:text-white" +
-          " dark:hover:bg-emerald-600",
-        secondary:
-          "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-[#0000000A] dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+        default: "bg-white text-black border shadow-sm border-zinc-300 " + "hover:bg-white/70",
+        destructive: "bg-red-500 text-zinc-50 hover:bg-red-500/90",
+        outline: "border border-zinc-200 bg-white " + "hover:bg-zinc-100 hover:text-zinc-900",
+        primary: "bg-emerald-500 text-white shadow-sm " + "hover:bg-emerald-600",
+        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80",
+        ghost: "hover:bg-black/10",
+        link: "text-zinc-900 underline-offset-4 hover:underline",
       },
       size: {
         default: "h-8 px-4 py-2",

src/components/ui/command.tsx

@@ -12,7 +12,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-zinc-950",
       className
     )}
     {...props}
@@ -24,7 +24,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-neutral-400">
+        <Command className="[&_[cmdk-group-heading]]:text-zinc-500[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-neutral-400",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -68,11 +68,7 @@ const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 ))
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
@@ -84,7 +80,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
+      "text-zinc-950[&_[cmdk-group-heading]]:px-2 overflow-hidden p-1 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500",
       className
     )}
     {...props}
@@ -99,7 +95,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-neutral-200 dark:bg-neutral-800", className)}
+    className={cn("-mx-1 h-px bg-zinc-200", className)}
     {...props}
   />
 ))
@@ -112,7 +108,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:data-[selected=true]:bg-neutral-800 dark:data-[selected=true]:text-neutral-50",
+      "data-[disabled=true]:opacity-50[&_svg]:pointer-events-none relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
@@ -121,18 +117,9 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
+    <span className={cn("ml-auto text-xs tracking-widest text-zinc-500", className)} {...props} />
   )
 }
 CommandShortcut.displayName = "CommandShortcut"