Skip to content

feat: add dark/light theme toggle and UI improvements#294

Open
Po1nt9 wants to merge 1 commit into
nashsu:mainfrom
Po1nt9:feat/dark-light-theme-toggle
Open

feat: add dark/light theme toggle and UI improvements#294
Po1nt9 wants to merge 1 commit into
nashsu:mainfrom
Po1nt9:feat/dark-light-theme-toggle

Conversation

@Po1nt9
Copy link
Copy Markdown

@Po1nt9 Po1nt9 commented May 28, 2026

Summary

This PR adds a dark/light theme toggle feature and several UI improvements to LLM Wiki.

Features

  1. Dark/Light Theme Toggle

    • Added theme selection in Settings > Interface section
    • Three options: Light, Dark, System (follows OS preference)
    • Real-time preview - theme changes apply immediately when clicked
    • Theme preference persists to local storage
    • Auto-applies saved theme on app startup to prevent flash
  2. Welcome Screen Centering

    • Fixed welcome screen to be fully vertically centered using h-screen
  3. Dark Theme Background Optimization

    • Added subtle blue tint to dark theme background for better visual depth
    • Adjusted card, sidebar, and accent colors for consistency
  4. Test Fixes

    • Fixed pre-existing test failures in ingest-queue.integration.test.ts
    • Fixed path separator issues in ingest-source-path-collision.test.ts
    • All 1214 unit tests now pass

Files Changed

  • src/components/settings/settings-types.ts - Added theme type to SettingsDraft
  • src/components/settings/settings-view.tsx - Added theme state management and applyTheme function
  • src/components/settings/sections/interface-section.tsx - Added theme toggle UI
  • src/lib/project-store.ts - Added saveTheme/loadTheme persistence functions
  • src/main.tsx - Added theme initialization on app startup
  • src/index.css - Optimized dark theme CSS variables
  • src/i18n/en.json - Added theme-related translations
  • src/i18n/zh.json - Added theme-related translations
  • src/components/project/welcome-screen.tsx - Fixed vertical centering
  • src/components/graph/graph-view.tsx - Updated graph background to use theme variable
  • src/lib/ingest-queue.integration.test.ts - Fixed JSON parse timing issues
  • src/lib/ingest-source-path-collision.test.ts - Fixed Windows path separator issues

Test plan

  • TypeScript type check passes
  • Build succeeds
  • All 1214 unit tests pass
  • Theme toggle works in real-time (Light/Dark/System)
  • Theme persists across app restarts
  • Welcome screen centered correctly
  • Dark theme background looks good

Screenshots

Theme toggle is located in Settings > Interface section, below the UI Language selector.

- Add theme toggle (light/dark/system) in Settings > Interface with real-time preview
- Persist theme preference to local storage
- Apply saved theme on app startup
- Center welcome screen vertically
- Optimize dark theme background with subtle blue tint
- Fix pre-existing test failures in ingest-queue and source-path-collision tests

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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