Skip to content

Dark mode#159

Merged
gabrielste1n merged 28 commits intomainfrom
dark-mode-toggling
Feb 3, 2026
Merged

Dark mode#159
gabrielste1n merged 28 commits intomainfrom
dark-mode-toggling

Conversation

@gabrielste1n
Copy link
Copy Markdown
Collaborator

@gabrielste1n gabrielste1n commented Jan 27, 2026

Summary

Comprehensive design system overhaul introducing proper dark mode support and migrating the entire codebase from hardcoded inline styles to a semantic token-based architecture.

Design System Foundation

  • Restructured index.css to use Tailwind v4 @theme block — this was the root cause of light mode transparency issues; color tokens weren't being registered with Tailwind, so utilities like bg-background and bg-card were never generated
  • Established a surface hierarchy (surface-0 through surface-raised) and border state tokens (border-subtle, border-hover, border-active) for consistent dark mode depth layering
  • Light mode defaults live in @theme, dark mode overrides in .dark (unlayered CSS beats @layer theme)

Inline Style Elimination

  • Removed all hardcoded oklch() bracket values from every component and utility file — oklch now only appears in index.css where it belongs
  • Replaced all raw Tailwind color-scale classes (green-700, emerald-500, purple-100, indigo-600, blue-600) with semantic tokens (success, primary, accent, etc.)
  • Zero hardcoded hex, rgb, or oklch values remain in any component file

Component Improvements

  • Fixed transparent backgrounds in light mode across inputs, selects, dialogs, sidebar modal, and cards
  • Improved light mode contrast for toasts, info boxes, badges, and model picker cards (increased opacity values)
  • Added proper dark mode variants to all UI primitives: button, badge, card, dialog, input, select, toggle, tooltip
  • Refactored SidebarModal, ProviderTabs, ModelCardList, DownloadProgressBar, and TranscriptionModelPicker to use semantic tokens exclusively
  • Improved onboarding flow styling and contrast

New Features

  • Added useTheme hook for theme management
  • Added InfoBox component
  • Added dark mode toggle support

Housekeeping

  • Updated .gitignore for local-only skill files
  • 47 files changed across the design system, components, hooks, and utilities

Merged the "Unify prompt system" PR from main while preserving all
dark mode and design system improvements from dark-mode-toggling:

- Applied text-foreground, text-muted-foreground throughout
- Used bg-muted, bg-primary/5 instead of hardcoded grays/blues
- Kept border-border and border-primary/20 patterns
- Maintained dark mode variants (dark:text-*, dark:bg-*)
- Preserved responsive color classes for green/amber indicators

Key merged changes from main:
- Unified prompt system (single intelligent prompt)
- Restructured OnboardingFlow (simplified steps)
- Updated ReasoningModelSelector (API keys first, then models)
- Enhanced TranscriptionModelPicker (conditional mode selector)
- New llama server and prompt management utilities
# Conflicts:
#	src/components/OnboardingFlow.tsx
#	src/components/SettingsPage.tsx
#	src/hooks/useSettings.ts
Skills are now gitignored so they stay on each developer's machine
without cluttering the repository.
…stem, redesigned sidebar, and extracted permissions section
…phism toasts, streamlined 4-step onboarding, compact settings, and DRY icon theming via shared isMonochromeProvider utility
…cting ModeToggle component, separating local/cloud effects, and syncing internal state with props
@gabrielste1n gabrielste1n marked this pull request as ready for review February 3, 2026 09:48
@gabrielste1n gabrielste1n merged commit 6ae83bb into main Feb 3, 2026
0 of 8 checks passed
@gabrielste1n gabrielste1n deleted the dark-mode-toggling branch February 3, 2026 09:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant