nebari-dev · jbouder · Jul 10, 2026 · Jul 10, 2026
diff --git a/frontend/assets/Nebari-Logo-Horizontal-Lockup-Dark.svg b/frontend/assets/Nebari-Logo-Horizontal-Lockup-Dark.svg
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,6 +8,20 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <title>Nebari Chat</title>
+    <script>
+      // Apply the persisted (or OS-preferred) theme before first paint to
+      // avoid a flash of the wrong theme. Kept in sync with useThemePreference.
+      (function () {
+        try {
+          var mode = localStorage.getItem('nebari-chat:themeMode');
+          var prefersDark = window.matchMedia(
+            '(prefers-color-scheme: dark)',
+          ).matches;
+          var isDark = mode === 'dark' || (mode !== 'light' && prefersDark);
+          document.documentElement.classList.toggle('dark', isDark);
+        } catch (e) {}
+      })();
+    </script>
   </head>
   <body>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/frontend/src/chat/chatinput.tsx b/frontend/src/chat/chatinput.tsx
@@ -283,7 +283,7 @@ export function ChatInput(): ReactNode {
   return (
     <div
       className={cn(
-        'pb-6 bg-white mx-auto w-full min-w-3xs max-w-3xl sticky bottom-0',
+        'pb-6 bg-background mx-auto w-full min-w-3xs max-w-3xl sticky bottom-0',
       )}
     >
       <form

diff --git a/frontend/src/chat/sidebartools.tsx b/frontend/src/chat/sidebartools.tsx
@@ -5,12 +5,14 @@ import type * as agui from '@ag-ui/core';
 
 import { useQuery } from '@tanstack/react-query';
 
-import { JsonEditor } from 'json-edit-react';
+import { githubDarkTheme, JsonEditor } from 'json-edit-react';
 
 import type { ReactNode } from 'react';
 
 import { useChatConfig } from '@/context/chat';
 
+import { useTheme } from '@/hooks/themecontext';
+
 import { threadMessagesQuery } from '@/queries';
 
 /**
@@ -89,6 +91,9 @@ namespace Private {
     // Extract the props.
     const { toolCall } = props;
 
+    // Match the JSON viewer theme to the active app theme.
+    const { isDarkMode } = useTheme();
+
     // Try to parse the arguments to JSON, falling back on the string.
     const args = (() => {
       try {
@@ -102,6 +107,7 @@ namespace Private {
     return (
       <JsonEditor
         className="ot-NebariChat-jer"
+        theme={isDarkMode ? githubDarkTheme : undefined}
         data={args}
         maxWidth="100%"
         rootName="arguments"
@@ -119,6 +125,9 @@ namespace Private {
     // Extract the props.
     const { toolCall } = props;
 
+    // Match the JSON viewer theme to the active app theme.
+    const { isDarkMode } = useTheme();
+
     // Find the tool message that matches the tool call id.
     const toolMessage = useToolMessage(toolCall.id);
 
@@ -135,6 +144,7 @@ namespace Private {
     return (
       <JsonEditor
         className="ot-NebariChat-jer"
+        theme={isDarkMode ? githubDarkTheme : undefined}
         data={result}
         maxWidth="100%"
         rootName="result"

diff --git a/frontend/src/hooks/themecontext.tsx b/frontend/src/hooks/themecontext.tsx
@@ -0,0 +1,28 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2025-present, OpenTeams Inc.
+|----------------------------------------------------------------------------*/
+
+import { createContext, type ReactNode, useContext } from 'react';
+
+import { type ThemeMode, useThemePreference } from './usethemepreference';
+
+type ThemeContextValue = {
+  themeMode: ThemeMode;
+  isDarkMode: boolean;
+  setThemeMode: (mode: ThemeMode) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const theme = useThemePreference();
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}
diff --git a/frontend/src/hooks/uselocalstoragestate.ts b/frontend/src/hooks/uselocalstoragestate.ts
@@ -0,0 +1,49 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2025-present, OpenTeams Inc.
+|----------------------------------------------------------------------------*/
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Read a value from localStorage, returning null when storage is unavailable
+ * (private browsing, disabled, security errors) instead of throwing.
+ */
+export function getStoredValue(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write a value to localStorage, swallowing errors when storage is unavailable
+ * or the quota is exceeded.
+ */
+export function setStoredValue(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    console.error(`Failed to persist "${key}" to localStorage`);
+  }
+}
+
+/**
+ * State persisted to localStorage as a plain string. Reads and writes are
+ * guarded so disabled or unavailable storage never throws.
+ *
+ * `deserialize` turns the raw stored string (or null when absent) into the
+ * initial value — also the place to validate and run one-off migrations.
+ */
+export function useLocalStorageState<T extends string>(
+  key: string,
+  deserialize: (raw: string | null) => T,
+): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(() => deserialize(getStoredValue(key)));
+
+  useEffect(() => {
+    setStoredValue(key, value);
+  }, [key, value]);
+
+  return [value, setValue];
+}
diff --git a/frontend/src/hooks/usethemepreference.ts b/frontend/src/hooks/usethemepreference.ts
@@ -0,0 +1,75 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2025-present, OpenTeams Inc.
+|----------------------------------------------------------------------------*/
+
+import { useEffect, useState } from 'react';
+
+import { useLocalStorageState } from './uselocalstoragestate';
+
+export const THEME_MODES = ['light', 'dark', 'system'] as const;
+export type ThemeMode = (typeof THEME_MODES)[number];
+
+export function isThemeMode(value: string): value is ThemeMode {
+  return (THEME_MODES as readonly string[]).includes(value);
+}
+
+/**
+ * The localStorage key under which the theme preference is persisted. Kept in
+ * sync with the inline bootstrap script in `index.html` that prevents a flash
+ * of the wrong theme on initial load.
+ */
+export const THEME_MODE_STORAGE_KEY = 'nebari-chat:themeMode';
+
+function prefersDark(): boolean {
+  try {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  } catch {
+    return false;
+  }
+}
+
+function readStoredMode(raw: string | null): ThemeMode {
+  if (raw !== null && isThemeMode(raw)) {
+    return raw;
+  }
+
+  return 'system';
+}
+
+/**
+ * Track the user's theme preference, persist it, and keep the root `dark` class
+ * in sync so the whole app responds. In `system` mode the OS preference is
+ * followed live via `prefers-color-scheme`.
+ */
+export function useThemePreference() {
+  const [themeMode, setThemeMode] = useLocalStorageState<ThemeMode>(
+    THEME_MODE_STORAGE_KEY,
+    readStoredMode,
+  );
+  const [systemPrefersDark, setSystemPrefersDark] =
+    useState<boolean>(prefersDark);
+
+  // Keep "system" mode in sync with the OS preference as it changes.
+  useEffect(() => {
+    let mediaQuery: MediaQueryList;
+    try {
+      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    } catch {
+      return;
+    }
+
+    const onChange = (event: MediaQueryListEvent) =>
+      setSystemPrefersDark(event.matches);
+    mediaQuery.addEventListener('change', onChange);
+    return () => mediaQuery.removeEventListener('change', onChange);
+  }, []);
+
+  const isDarkMode =
+    themeMode === 'system' ? systemPrefersDark : themeMode === 'dark';
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode);
+  }, [isDarkMode]);
+
+  return { themeMode, isDarkMode, setThemeMode };
+}
diff --git a/frontend/src/main.css b/frontend/src/main.css
@@ -13,7 +13,6 @@ html {
 body {
   font-family: Inter;
   font-weight: 400;
-  color: #1e1e1e;
   height: 100%;
   font-size: 14px;
 }
@@ -153,31 +152,27 @@ body {
 }
 
 @theme {
-  /* Background Colors */
-  --color-bg-neutral-dark: #ededed;
-  --color-bg-neutral-xdark: #d5d5d5;
-  --color-bg-neutral-default: #f5f5f5;
-  --color-bg-neutral-white: #fbfbfb;
-  --color-bg-brand-default: #9b3dcc;
-  --color-bg-brand-secondary: #e8d7fb;
-  --color-bg-white: #ffffff;
-
-  /* Border Colors */
-  --color-bd-neutral-default: #d9d9d9;
-  --color-bd-neutral-secondary: #b3b3b3;
-  --color-bd-brand-default: #682888;
-
-  /* Text Colors */
-  --color-text-brand-on-brand: #fbfbfb;
-  --color-text-neutral-default: #1e1e1e;
-  --color-text-neutral-secondary: #757575;
-
   --thread-max-width: 44rem;
 }
 
 /*---break---*/
 
 @theme inline {
+  /* Custom brand tokens, driven by CSS variables so they respond to `.dark`. */
+  --color-bg-neutral-dark: var(--bg-neutral-dark);
+  --color-bg-neutral-xdark: var(--bg-neutral-xdark);
+  --color-bg-neutral-default: var(--bg-neutral-default);
+  --color-bg-neutral-white: var(--bg-neutral-white);
+  --color-bg-brand-default: var(--bg-brand-default);
+  --color-bg-brand-secondary: var(--bg-brand-secondary);
+  --color-bg-white: var(--bg-white);
+  --color-bd-neutral-default: var(--bd-neutral-default);
+  --color-bd-neutral-secondary: var(--bd-neutral-secondary);
+  --color-bd-brand-default: var(--bd-brand-default);
+  --color-text-brand-on-brand: var(--text-brand-on-brand);
+  --color-text-neutral-default: var(--text-neutral-default);
+  --color-text-neutral-secondary: var(--text-neutral-secondary);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -218,6 +213,21 @@ body {
 /*---break---*/
 
 :root {
+  /* Custom brand tokens (light). */
+  --bg-neutral-dark: #ededed;
+  --bg-neutral-xdark: #d5d5d5;
+  --bg-neutral-default: #f5f5f5;
+  --bg-neutral-white: #fbfbfb;
+  --bg-brand-default: #9b3dcc;
+  --bg-brand-secondary: #e8d7fb;
+  --bg-white: #ffffff;
+  --bd-neutral-default: #d9d9d9;
+  --bd-neutral-secondary: #b3b3b3;
+  --bd-brand-default: #682888;
+  --text-brand-on-brand: #fbfbfb;
+  --text-neutral-default: #1e1e1e;
+  --text-neutral-secondary: #757575;
+
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -255,6 +265,21 @@ body {
 /*---break---*/
 
 .dark {
+  /* Custom brand tokens (dark). */
+  --bg-neutral-dark: #333333;
+  --bg-neutral-xdark: #404040;
+  --bg-neutral-default: #2a2a2a;
+  --bg-neutral-white: #262626;
+  --bg-brand-default: #9b3dcc;
+  --bg-brand-secondary: #3a2352;
+  --bg-white: #1e1e1e;
+  --bd-neutral-default: #404040;
+  --bd-neutral-secondary: #525252;
+  --bd-brand-default: #b45ee0;
+  --text-brand-on-brand: #fbfbfb;
+  --text-neutral-default: #ededed;
+  --text-neutral-secondary: #a3a3a3;
+
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -14,6 +14,7 @@ import { createRoot } from 'react-dom/client';
 
 import { ErrorBoundary, ErrorFallback } from '@/components/error-boundary';
 import { Toaster } from '@/components/ui/sonner';
+import { ThemeProvider } from '@/hooks/themecontext';
 import { notifyError } from '@/lib/notifications';
 
 import { routeTree } from './routeTree.gen';
@@ -52,10 +53,12 @@ function App() {
   return (
     <StrictMode>
       <ErrorBoundary>
-        <QueryClientProvider client={client}>
-          <RouterProvider router={router} />
-          <Toaster />
-        </QueryClientProvider>
+        <ThemeProvider>
+          <QueryClientProvider client={client}>
+            <RouterProvider router={router} />
+            <Toaster />
+          </QueryClientProvider>
+        </ThemeProvider>
       </ErrorBoundary>
     </StrictMode>
   );

diff --git a/frontend/src/sidebar/header.tsx b/frontend/src/sidebar/header.tsx
@@ -28,6 +28,7 @@ export function Header(props: Header.Props): ReactNode {
         to="/"
         className={cn(
           'bg-[url(/assets/Nebari-Logo-Horizontal-Lockup.svg)] bg-[auto_100px]',
+          'dark:bg-[url(/assets/Nebari-Logo-Horizontal-Lockup-Dark.svg)]',
           'bg-center bg-no-repeat w-[100px] cursor-pointer ml-2',
           isSidebarOpen ? '' : 'hidden',
         )}