fix: use globalThis instead of global in test setup (TS build compatibility)

Tabs now dynamically reduce their max-width when the total width exceeds
the TabBar container, similar to browser tab behavior. Uses a
ResizeObserver on the tab area to calculate per-tab max-width as
min(360, containerWidth / tabCount), floored at 60px minimum.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

design/tab-responsive-width.pen

@@ -0,0 +1 @@
+{"children":[],"variables":{}}

src/App.tsx

@@ -395,6 +395,7 @@ function App() {
             onGoBack={handleGoBack}
             onGoForward={handleGoForward}
             leftPanelsCollapsed={!sidebarVisible && !noteListVisible}
+            isDarkTheme={themeManager.isDark}
           />
         </div>
       </div>

src/components/Editor.tsx

@@ -60,6 +60,7 @@ interface EditorProps {
   onGoBack?: () => void
   onGoForward?: () => void
   leftPanelsCollapsed?: boolean
+  isDarkTheme?: boolean
 }
 
 function EditorEmptyState() {
@@ -82,6 +83,7 @@ export const Editor = memo(function Editor({
   onTrashNote, onRestoreNote, onArchiveNote, onUnarchiveNote,
   onRenameTab, onContentChange, onTitleSync,
   canGoBack, canGoForward, onGoBack, onGoForward, leftPanelsCollapsed,
+  isDarkTheme,
 }: EditorProps) {
   const vaultPathRef = useRef(vaultPath)
   useEffect(() => { vaultPathRef.current = vaultPath }, [vaultPath])
@@ -161,6 +163,7 @@ export const Editor = memo(function Editor({
               onArchiveNote={onArchiveNote}
               onUnarchiveNote={onUnarchiveNote}
               vaultPath={vaultPath}
+              isDarkTheme={isDarkTheme}
             />
         }
         {showRightPanel && <ResizeHandle onResize={onInspectorResize} />}

src/components/EditorContent.tsx

@@ -32,6 +32,7 @@ interface EditorContentProps {
   onArchiveNote?: (path: string) => void
   onUnarchiveNote?: (path: string) => void
   vaultPath?: string
+  isDarkTheme?: boolean
 }
 
 function EditorLoadingSkeleton() {
@@ -97,7 +98,7 @@ function ActiveTabBreadcrumb({ activeTab, props }: {
 export function EditorContent({
   activeTab, isLoadingNewTab, entries, editor,
   diffMode, diffContent, onToggleDiff,
-  onNavigateWikilink, onEditorChange, vaultPath,
+  onNavigateWikilink, onEditorChange, vaultPath, isDarkTheme,
   ...breadcrumbProps
 }: EditorContentProps) {
   return (
@@ -106,7 +107,7 @@ export function EditorContent({
       {diffMode && <DiffModeView diffContent={diffContent} onToggleDiff={onToggleDiff} />}
       {!diffMode && activeTab && (
         <div style={{ display: 'flex', flex: 1, flexDirection: 'column', minHeight: 0 }}>
-          <SingleEditorView editor={editor} entries={entries} onNavigateWikilink={onNavigateWikilink} onChange={onEditorChange} vaultPath={vaultPath} />
+          <SingleEditorView editor={editor} entries={entries} onNavigateWikilink={onNavigateWikilink} onChange={onEditorChange} vaultPath={vaultPath} isDarkTheme={isDarkTheme} />
         </div>
       )}
       {isLoadingNewTab && !diffMode && <EditorLoadingSkeleton />}

src/components/SettingsPanel.test.tsx

@@ -40,6 +40,7 @@ const mockThemeManager: ThemeManager = {
   themes: [],
   activeThemeId: null,
   activeTheme: null,
+  isDark: false,
   switchTheme: vi.fn(),
   createTheme: vi.fn().mockResolvedValue('untitled'),
   reloadThemes: vi.fn(),

src/components/SingleEditorView.tsx

@@ -23,12 +23,13 @@ function useInsertImageCallback(editor: ReturnType<typeof useCreateBlockNote>) {
 }
 
 /** Single BlockNote editor view — content is swapped via replaceBlocks */
-export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange, vaultPath }: {
+export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange, vaultPath, isDarkTheme }: {
   editor: ReturnType<typeof useCreateBlockNote>
   entries: VaultEntry[]
   onNavigateWikilink: (target: string) => void
   onChange?: () => void
   vaultPath?: string
+  isDarkTheme?: boolean
 }) {
   const navigateRef = useRef(onNavigateWikilink)
   useEffect(() => { navigateRef.current = onNavigateWikilink }, [onNavigateWikilink])
@@ -100,7 +101,7 @@ export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange
       )}
       <BlockNoteView
         editor={editor}
-        theme="light"
+        theme={isDarkTheme ? 'dark' : 'light'}
         onChange={onChange}
       >
         <SuggestionMenuController

src/components/TabBar.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import { TabBar } from './TabBar'
+import { computeTabMaxWidth } from '../utils/tabLayout'
 import type { VaultEntry } from '../types'
 
 function makeEntry(path: string, title: string): VaultEntry {
@@ -257,4 +258,59 @@ describe('TabBar', () => {
     fireEvent.click(screen.getByText('Beta'))
     expect(onSwitchTab).toHaveBeenCalledWith(tabs[1].entry.path)
   })
+
+  describe('responsive tab width', () => {
+    it('wraps tabs in an overflow-hidden flex container', () => {
+      const tabs = makeTabs(['Alpha'])
+      const { container } = render(
+        <TabBar tabs={tabs} activeTabPath={tabs[0].entry.path} {...defaultProps} />
+      )
+      const tabArea = container.querySelector('.overflow-hidden')
+      expect(tabArea).toBeInTheDocument()
+      expect(tabArea?.classList.contains('flex')).toBe(true)
+      expect(tabArea?.classList.contains('min-w-0')).toBe(true)
+      expect(tabArea?.classList.contains('flex-1')).toBe(true)
+    })
+
+    it('tab elements are shrinkable with min-w-0', () => {
+      const tabs = makeTabs(['Alpha', 'Beta'])
+      const { container } = render(
+        <TabBar tabs={tabs} activeTabPath={tabs[0].entry.path} {...defaultProps} />
+      )
+      const tabEls = container.querySelectorAll('[draggable="true"]')
+      expect(tabEls).toHaveLength(2)
+      for (const el of tabEls) {
+        expect(el.classList.contains('shrink-0')).toBe(false)
+        expect(el.classList.contains('min-w-0')).toBe(true)
+      }
+    })
+  })
+
+  describe('computeTabMaxWidth', () => {
+    it('caps at 360px when container is wide', () => {
+      expect(computeTabMaxWidth(1200, 2)).toBe(360)
+    })
+
+    it('divides space equally among tabs', () => {
+      expect(computeTabMaxWidth(500, 5)).toBe(100)
+    })
+
+    it('enforces minimum of 60px', () => {
+      expect(computeTabMaxWidth(300, 10)).toBe(60)
+    })
+
+    it('returns 360 for zero tabs', () => {
+      expect(computeTabMaxWidth(800, 0)).toBe(360)
+    })
+
+    it('floors the result to integer pixels', () => {
+      // 1000 / 3 = 333.33 → 333
+      expect(computeTabMaxWidth(1000, 3)).toBe(333)
+    })
+
+    it('handles single tab', () => {
+      expect(computeTabMaxWidth(200, 1)).toBe(200)
+      expect(computeTabMaxWidth(500, 1)).toBe(360)
+    })
+  })
 })

src/components/TabBar.tsx

@@ -4,6 +4,7 @@ import type { VaultEntry, NoteStatus } from '../types'
 import { cn } from '@/lib/utils'
 import { X } from 'lucide-react'
 import { Plus, Columns, ArrowsOutSimple, ArrowLeft, ArrowRight } from '@phosphor-icons/react'
+import { computeTabMaxWidth } from '@/utils/tabLayout'
 
 interface Tab {
   entry: VaultEntry
@@ -199,7 +200,7 @@ function StatusDot({ status }: { status: NoteStatus }) {
   )
 }
 
-function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBefore, showDropAfter, onSwitch, onClose, onDoubleClick, onRenameSave, onRenameCancel, dragProps }: {
+function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBefore, showDropAfter, tabMaxWidth, onSwitch, onClose, onDoubleClick, onRenameSave, onRenameCancel, dragProps }: {
   tab: Tab
   isActive: boolean
   isEditing: boolean
@@ -207,6 +208,7 @@ function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBef
   isDragging: boolean
   showDropBefore: boolean
   showDropAfter: boolean
+  tabMaxWidth: number
   onSwitch: () => void
   onClose: () => void
   onDoubleClick: () => void
@@ -219,10 +221,11 @@ function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBef
       draggable={!isEditing}
       {...dragProps}
       className={cn(
-        "group flex shrink-0 items-center gap-1.5 whitespace-nowrap max-w-[360px] transition-all relative",
+        "group flex min-w-0 items-center gap-1.5 whitespace-nowrap transition-all relative",
         isActive ? "text-foreground" : "text-muted-foreground hover:text-secondary-foreground"
       )}
       style={{
+        maxWidth: tabMaxWidth,
         background: isActive ? 'var(--background)' : 'transparent',
         borderRight: `1px solid ${isActive ? 'var(--border)' : 'var(--sidebar-border)'}`,
         borderBottom: isActive ? 'none' : '1px solid var(--sidebar-border)',
@@ -331,8 +334,20 @@ export const TabBar = memo(function TabBar({
 }: TabBarProps) {
   const { dragIndex, dropIndex, handleDragStart, handleDragEnd, handleDragOver, handleDrop, handleBarDragLeave } = useTabDrag(onReorderTabs)
   const [editingPath, setEditingPath] = useState<string | null>(null)
+  const tabAreaRef = useRef<HTMLDivElement>(null)
+  const [tabMaxWidth, setTabMaxWidth] = useState(360)
   const { onMouseDown: onDragMouseDown } = useDragRegion()
 
+  useEffect(() => {
+    const el = tabAreaRef.current
+    if (!el) return
+    const recalc = () => setTabMaxWidth(computeTabMaxWidth(el.clientWidth, tabs.length))
+    recalc()
+    const observer = new ResizeObserver(recalc)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [tabs.length])
+
   return (
     <div
       className="flex shrink-0 items-stretch"
@@ -340,30 +355,33 @@ export const TabBar = memo(function TabBar({
       onDragLeave={handleBarDragLeave}
     >
       <NavButtons canGoBack={canGoBack} canGoForward={canGoForward} onGoBack={onGoBack} onGoForward={onGoForward} />
-      {tabs.map((tab, index) => (
-        <TabItem
-          key={tab.entry.path}
-          tab={tab}
-          isActive={tab.entry.path === activeTabPath}
-          isEditing={editingPath === tab.entry.path}
-          noteStatus={getNoteStatus?.(tab.entry.path) ?? 'clean'}
-          isDragging={dragIndex !== null}
-          showDropBefore={dropIndex === index}
-          showDropAfter={dropIndex === index + 1 && index === tabs.length - 1}
-          onSwitch={() => onSwitchTab(tab.entry.path)}
-          onClose={() => onCloseTab(tab.entry.path)}
-          onDoubleClick={() => onRenameTab && setEditingPath(tab.entry.path)}
-          onRenameSave={(newTitle) => { setEditingPath(null); onRenameTab?.(tab.entry.path, newTitle) }}
-          onRenameCancel={() => setEditingPath(null)}
-          dragProps={{
-            onDragStart: (e) => handleDragStart(e, index),
-            onDragEnd: handleDragEnd,
-            onDragOver: (e) => handleDragOver(e, index),
-            onDrop: handleDrop,
-          }}
-        />
-      ))}
-      <div className="flex-1" style={{ borderBottom: '1px solid var(--border)', cursor: 'default' }} onMouseDown={onDragMouseDown} />
+      <div ref={tabAreaRef} className="flex flex-1 min-w-0 items-stretch overflow-hidden">
+        {tabs.map((tab, index) => (
+          <TabItem
+            key={tab.entry.path}
+            tab={tab}
+            isActive={tab.entry.path === activeTabPath}
+            isEditing={editingPath === tab.entry.path}
+            noteStatus={getNoteStatus?.(tab.entry.path) ?? 'clean'}
+            isDragging={dragIndex !== null}
+            showDropBefore={dropIndex === index}
+            showDropAfter={dropIndex === index + 1 && index === tabs.length - 1}
+            tabMaxWidth={tabMaxWidth}
+            onSwitch={() => onSwitchTab(tab.entry.path)}
+            onClose={() => onCloseTab(tab.entry.path)}
+            onDoubleClick={() => onRenameTab && setEditingPath(tab.entry.path)}
+            onRenameSave={(newTitle) => { setEditingPath(null); onRenameTab?.(tab.entry.path, newTitle) }}
+            onRenameCancel={() => setEditingPath(null)}
+            dragProps={{
+              onDragStart: (e) => handleDragStart(e, index),
+              onDragEnd: handleDragEnd,
+              onDragOver: (e) => handleDragOver(e, index),
+              onDrop: handleDrop,
+            }}
+          />
+        ))}
+        <div className="flex-1 shrink-0" style={{ borderBottom: '1px solid var(--border)', cursor: 'default' }} onMouseDown={onDragMouseDown} />
+      </div>
       <TabBarActions onCreateNote={onCreateNote} />
     </div>
   )

src/hooks/useThemeManager.test.ts

@@ -37,7 +37,22 @@ vi.mock('../mock-tauri', () => ({
 }))
 
 // Must import after mocks
-const { useThemeManager } = await import('./useThemeManager')
+const { useThemeManager, isColorDark } = await import('./useThemeManager')
+
+describe('isColorDark', () => {
+  it('identifies dark colors', () => {
+    expect(isColorDark('#000000')).toBe(true)
+    expect(isColorDark('#0F0F23')).toBe(true)
+    expect(isColorDark('#1a1a2e')).toBe(true)
+    expect(isColorDark('#0f0f1a')).toBe(true)
+  })
+
+  it('identifies light colors', () => {
+    expect(isColorDark('#FFFFFF')).toBe(false)
+    expect(isColorDark('#F7F6F3')).toBe(false)
+    expect(isColorDark('#E0E0E0')).toBe(false)
+  })
+})
 
 describe('useThemeManager', () => {
   beforeEach(() => {
@@ -228,6 +243,101 @@ describe('useThemeManager', () => {
     expect(newId).toBe('')
   })
 
+  it('isDark is false for light theme', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.activeTheme?.id).toBe('default')
+    })
+    expect(result.current.isDark).toBe(false)
+  })
+
+  it('isDark is true for dark theme', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    await act(async () => {
+      await result.current.switchTheme('dark')
+    })
+
+    expect(result.current.isDark).toBe(true)
+  })
+
+  it('isDark is false when no active theme', async () => {
+    const { result } = renderHook(() => useThemeManager(null))
+    expect(result.current.isDark).toBe(false)
+  })
+
+  it('derives app-specific CSS variables from theme colors', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.activeTheme).not.toBeNull()
+    })
+
+    const root = document.documentElement
+    expect(root.style.getPropertyValue('--bg-primary')).toBe('#FFFFFF')
+    expect(root.style.getPropertyValue('--text-primary')).toBe('#1A1A2E')
+    expect(root.style.getPropertyValue('--text-heading')).toBe('#1A1A2E')
+    expect(root.style.getPropertyValue('--border-primary')).toBe('#E2E8F0')
+  })
+
+  it('sets color-scheme and data-theme-mode for dark theme', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    await act(async () => {
+      await result.current.switchTheme('dark')
+    })
+
+    const root = document.documentElement
+    await waitFor(() => {
+      expect(root.style.getPropertyValue('color-scheme')).toBe('dark')
+    })
+    expect(root.dataset.themeMode).toBe('dark')
+    expect(root.style.getPropertyValue('--bg-primary')).toBe('#0F0F23')
+    expect(root.style.getPropertyValue('--text-primary')).toBe('#E2E8F0')
+  })
+
+  it('sets color-scheme to light for light theme', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.activeTheme).not.toBeNull()
+    })
+
+    const root = document.documentElement
+    expect(root.style.getPropertyValue('color-scheme')).toBe('light')
+    expect(root.dataset.themeMode).toBe('light')
+  })
+
+  it('updates derived variables when switching between themes', async () => {
+    const { result } = renderHook(() => useThemeManager('/vault'))
+    await waitFor(() => {
+      expect(result.current.themes).toHaveLength(2)
+    })
+
+    await act(async () => {
+      await result.current.switchTheme('dark')
+    })
+
+    const root = document.documentElement
+    await waitFor(() => {
+      expect(root.style.getPropertyValue('--bg-primary')).toBe('#0F0F23')
+    })
+
+    await act(async () => {
+      await result.current.switchTheme('default')
+    })
+
+    await waitFor(() => {
+      expect(root.style.getPropertyValue('--bg-primary')).toBe('#FFFFFF')
+    })
+    expect(root.style.getPropertyValue('color-scheme')).toBe('light')
+    expect(root.dataset.themeMode).toBe('light')
+  })
+
   it('reloadThemes re-fetches theme list', async () => {
     const { result } = renderHook(() => useThemeManager('/vault'))
     await waitFor(() => {

src/hooks/useThemeManager.ts

@@ -7,6 +7,118 @@ function tauriCall<T>(command: string, args: Record<string, unknown>): Promise<T
   return isTauri() ? invoke<T>(command, args) : mockInvoke<T>(command, args)
 }
 
+// --- Color utilities for theme variable derivation ---
+
+function parseHex(hex: string): [number, number, number] {
+  const h = hex.replace('#', '')
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+}
+
+function toHex(r: number, g: number, b: number): string {
+  return '#' + [r, g, b].map(c => Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')).join('')
+}
+
+/** Blend two hex colors. ratio=0 → color1, ratio=1 → color2. */
+function mixColors(hex1: string, hex2: string, ratio: number): string {
+  const [r1, g1, b1] = parseHex(hex1)
+  const [r2, g2, b2] = parseHex(hex2)
+  return toHex(r1 + (r2 - r1) * ratio, g1 + (g2 - g1) * ratio, b1 + (b2 - b1) * ratio)
+}
+
+/** Check if a hex color is perceptually dark (luminance < 0.5). */
+export function isColorDark(hex: string): boolean {
+  const [r, g, b] = parseHex(hex)
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5
+}
+
+// Variables derived from theme core colors (not present in theme.colors directly)
+const DERIVED_VAR_NAMES = [
+  'bg-primary', 'bg-sidebar', 'bg-card', 'bg-hover', 'bg-hover-subtle', 'bg-selected',
+  'bg-input', 'bg-button', 'bg-dialog',
+  'text-primary', 'text-heading', 'text-secondary', 'text-tertiary', 'text-muted', 'text-faint',
+  'border-primary', 'border-subtle', 'border-input', 'border-dialog',
+  'link-color', 'link-hover',
+  // shadcn variables that may not be in the theme
+  'card', 'card-foreground', 'popover', 'popover-foreground',
+  'secondary', 'secondary-foreground', 'muted-foreground',
+  'accent', 'accent-foreground', 'input', 'ring',
+  'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
+  'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring',
+]
+
+/** Derive app-specific and missing shadcn CSS variables from core theme colors. */
+function deriveThemeVariables(root: HTMLElement, colors: Record<string, string>): void {
+  const bg = colors.background
+  const fg = colors.foreground
+  if (!bg || !fg) return
+
+  const isDark = isColorDark(bg)
+  root.style.setProperty('color-scheme', isDark ? 'dark' : 'light')
+  root.dataset.themeMode = isDark ? 'dark' : 'light'
+
+  const primary = colors.primary ?? (isDark ? '#5C9CFF' : '#155DFF')
+  const border = colors.border ?? mixColors(bg, fg, isDark ? 0.15 : 0.08)
+  const muted = colors.muted ?? mixColors(bg, fg, isDark ? 0.08 : 0.05)
+  const sidebarBg = colors['sidebar-background'] ?? mixColors(bg, fg, 0.04)
+
+  // App-specific variables
+  root.style.setProperty('--bg-primary', bg)
+  root.style.setProperty('--bg-sidebar', sidebarBg)
+  root.style.setProperty('--bg-card', mixColors(bg, fg, 0.03))
+  root.style.setProperty('--bg-hover', mixColors(bg, fg, 0.1))
+  root.style.setProperty('--bg-hover-subtle', muted)
+  root.style.setProperty('--bg-selected', `${primary}25`)
+  root.style.setProperty('--bg-input', bg)
+  root.style.setProperty('--bg-button', mixColors(bg, fg, 0.1))
+  root.style.setProperty('--bg-dialog', mixColors(bg, fg, 0.02))
+
+  root.style.setProperty('--text-primary', fg)
+  root.style.setProperty('--text-heading', fg)
+  root.style.setProperty('--text-secondary', mixColors(fg, bg, 0.25))
+  root.style.setProperty('--text-tertiary', mixColors(fg, bg, 0.35))
+  root.style.setProperty('--text-muted', mixColors(fg, bg, 0.5))
+  root.style.setProperty('--text-faint', mixColors(fg, bg, 0.6))
+
+  root.style.setProperty('--border-primary', border)
+  root.style.setProperty('--border-subtle', border)
+  root.style.setProperty('--border-input', border)
+  root.style.setProperty('--border-dialog', border)
+
+  root.style.setProperty('--link-color', primary)
+  root.style.setProperty('--link-hover', mixColors(primary, fg, 0.2))
+
+  // Shadcn variables — only set if not already provided by the theme
+  const setIfMissing = (name: string, value: string) => {
+    if (!(name in colors)) root.style.setProperty(`--${name}`, value)
+  }
+  setIfMissing('card', mixColors(bg, fg, 0.03))
+  setIfMissing('card-foreground', fg)
+  setIfMissing('popover', mixColors(bg, fg, 0.04))
+  setIfMissing('popover-foreground', fg)
+  setIfMissing('secondary', mixColors(bg, fg, 0.08))
+  setIfMissing('secondary-foreground', fg)
+  setIfMissing('muted-foreground', mixColors(fg, bg, 0.3))
+  setIfMissing('accent', mixColors(bg, fg, 0.08))
+  setIfMissing('accent-foreground', fg)
+  setIfMissing('input', border)
+  setIfMissing('ring', primary)
+  setIfMissing('sidebar-foreground', fg)
+  setIfMissing('sidebar-accent', mixColors(sidebarBg, fg, 0.1))
+  setIfMissing('sidebar-accent-foreground', fg)
+  setIfMissing('sidebar-border', border)
+  setIfMissing('sidebar-primary', primary)
+  setIfMissing('sidebar-primary-foreground', '#FFFFFF')
+  setIfMissing('sidebar-ring', primary)
+}
+
+function clearDerivedVariables(root: HTMLElement): void {
+  for (const name of DERIVED_VAR_NAMES) {
+    root.style.removeProperty(`--${name}`)
+  }
+  root.style.removeProperty('color-scheme')
+  delete root.dataset.themeMode
+}
+
 /** Map theme colors/typography/spacing to CSS custom properties on :root. */
 function applyThemeToDom(theme: ThemeFile): void {
   const root = document.documentElement
@@ -23,6 +135,7 @@ function applyThemeToDom(theme: ThemeFile): void {
   if (theme.colors['sidebar-background']) {
     root.style.setProperty('--sidebar', theme.colors['sidebar-background'])
   }
+  deriveThemeVariables(root, theme.colors)
 }
 
 function clearThemeFromDom(theme: ThemeFile): void {
@@ -38,12 +151,14 @@ function clearThemeFromDom(theme: ThemeFile): void {
     root.style.removeProperty(`--theme-${key}`)
   }
   root.style.removeProperty('--sidebar')
+  clearDerivedVariables(root)
 }
 
 export interface ThemeManager {
   themes: ThemeFile[]
   activeThemeId: string | null
   activeTheme: ThemeFile | null
+  isDark: boolean
   switchTheme: (themeId: string) => Promise<void>
   createTheme: (sourceId?: string) => Promise<string>
   reloadThemes: () => Promise<void>
@@ -69,6 +184,7 @@ export function useThemeManager(vaultPath: string | null): ThemeManager {
   const prevThemeRef = useRef<ThemeFile | null>(null)
 
   const activeTheme = themes.find(t => t.id === activeThemeId) ?? null
+  const isDark = activeTheme?.colors.background ? isColorDark(activeTheme.colors.background) : false
 
   const loadThemes = useCallback(async () => {
     if (!vaultPath) return
@@ -120,5 +236,5 @@ export function useThemeManager(vaultPath: string | null): ThemeManager {
     }
   }, [vaultPath, loadThemes, switchTheme])
 
-  return { themes, activeThemeId, activeTheme, switchTheme, createTheme, reloadThemes: loadThemes }
+  return { themes, activeThemeId, activeTheme, isDark, switchTheme, createTheme, reloadThemes: loadThemes }
 }

src/main.tsx

@@ -4,9 +4,6 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 import './index.css'
 import App from './App.tsx'
 
-// Force light mode — dark mode removed for now
-document.documentElement.classList.remove('dark')
-
 // Disable native WebKit context menu in Tauri (WKWebView intercepts right-click
 // at native level before React's synthetic events can call preventDefault).
 // Capture phase fires first → prevents native menu; React bubble phase still fires

src/test/setup.ts

@@ -5,6 +5,13 @@ import { createElement, type ReactNode, type ComponentType } from 'react'
 // Mock scrollIntoView for jsdom (not implemented)
 Element.prototype.scrollIntoView = vi.fn()
 
+// Mock ResizeObserver for jsdom (not implemented)
+globalThis.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof ResizeObserver
+
 // Mock @tauri-apps/plugin-opener for test environment
 vi.mock('@tauri-apps/plugin-opener', () => ({
   openUrl: vi.fn(),

src/utils/tabLayout.ts

@@ -0,0 +1,5 @@
+/** Compute per-tab max-width so all tabs fit within the container. */
+export function computeTabMaxWidth(containerWidth: number, tabCount: number): number {
+  if (tabCount === 0) return 360
+  return Math.max(60, Math.min(360, Math.floor(containerWidth / tabCount)))
+}