Repository navigation
Conversation
Adds an Appearance setting (Dark / Light / System) under Settings > Application. Dark stays the default. style.css hard-codes its colors, so instead of rewriting it around variables, scripts/generate-light-theme.js derives public/theme-light.generated.css from it: every rule that sets a color is re-emitted under :root[data-theme="light"] with the color mapped by how it is used (text, background, border, shadow). style.css itself is untouched. Re-run `npm run generate:light-theme` after changing it; hand-tuned fixes go in public/theme-light.css. - app-theme.js applies the theme before first paint (cached in localStorage, settings remain the source of truth) and follows the OS for System. - The default Switchboard terminal theme follows the appearance; adds Solarized Light and GitHub Light terminal themes. - CodeMirror editors switch between Dracula and GitHub Light live. - Project marks and track tags use darker hues in the light theme.
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
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
Adds an Appearance setting (Dark / Light / System) under Settings → Application. Dark stays the default, so nothing changes for existing users.
How it works
style.csshard-codes its ~350 colors. Rewriting it around CSS variables would touch nearly every line, so the light theme is generated from it instead:scripts/generate-light-theme.js(npm run generate:light-theme) readsstyle.cssandwhats-new.cssand writespublic/theme-light.generated.css. Every rule that sets a color is re-emitted under:root[data-theme="light"], with the color mapped by how it is used: light text becomes dark text, dark surfaces become light surfaces, white veils become dark veils, and accent colors are darkened until they read on white. Background, border and outline declarations are re-emitted per family, so scoping doesn't change the cascade between shorthands and longhands.style.cssitself is untouched. After changing it, re-run the generator.public/theme-light.cssis the place for hand-tuned fixes (empty for now).Other pieces:
public/app-theme.jsloads in<head>and setsdata-themebefore first paint, so there's no dark flash at startup. The global settings remain the source of truth; localStorage only caches the choice. System followsprefers-color-schemelive.Testing
Checked in a dev instance (
SWITCHBOARD_DATA_DIR): the session list, transcript viewer, settings, project overview, What's New dialog, editor and terminal colors. I also switched between themes at runtime, including saving through the settings form.Not yet checked by eye: stats, grid view, Git tab, plans and schedules. They get the same generated mapping, but they may need a fix or two in
theme-light.css.