feat(ui): implement complete dark mode with theme toggle#521
Open
glorisdenisse wants to merge 1 commit into666ghj:mainfrom
Open
feat(ui): implement complete dark mode with theme toggle#521glorisdenisse wants to merge 1 commit into666ghj:mainfrom
glorisdenisse wants to merge 1 commit into666ghj:mainfrom
Conversation
Adds a full dark/light theme system across all frontend views and components. Closes 666ghj#340 - Add `theme.css` with CSS custom properties for light/dark color tokens - Add `ThemeToggle.vue` component (sun/moon button) with localStorage persistence and prefers-color-scheme fallback - Update `LanguageSwitcher.vue` to use `color: inherit` so it adapts to both dark navbars (Home, Process) and light headers (workflow views) - Apply ThemeToggle and CSS variable theming to all views: Home, Process, MainView, InteractionView, SimulationView, SimulationRunView, ReportView - Update all workbench components to replace hardcoded colors with CSS variables: GraphPanel, Step1GraphBuild, Step2EnvSetup, Step3Simulation, Step4Report, Step5Interaction - Pin Python version to 3.12 via `.python-version` for uv compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
dosubot
bot
added
size:XXL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #340
theme.css— Single source of truth for all color tokens using CSS custom properties.:rootdefines light mode defaults;html.darkoverrides them for dark modeThemeToggle.vue— Sun/moon toggle button added to every view header. Persists preference tolocalStorage, falls back toprefers-color-schemeon first visitLanguageSwitcher.vue— Refactored to usecolor: inheritso it adapts automatically to both always-dark navbars (Home, Process) and light-themed headers (workflow views)Home,Process,MainView,InteractionView,SimulationView,SimulationRunView,ReportView— headers, content areas, and panel wrappers use CSS variablesGraphPanel,Step1GraphBuild,Step2EnvSetup,Step3Simulation,Step4Report,Step5Interaction— all hardcoded#FFF/#000colors replaced with semantic CSSvariables
.python-versionset to3.12foruvcompatibility (pillow wheel availability)Design decisions
#000backgrounds — they're a brand element, not a content areabackground: #000) in workbench components are kept as-is — the terminal aesthetic is intentional!importantCSS selectors since D3 sets them as attributes#ff6b35, status greens/reds, indigo badges) are preserved unchanged — they work well in both modesTest plan
prefers-color-scheme: dark— dark mode applied automatically