feat: add github dark mode variant switchable in user settings#10002
Draft
Guilhem-lm wants to merge 1 commit into
Draft
feat: add github dark mode variant switchable in user settings#10002Guilhem-lm wants to merge 1 commit into
Guilhem-lm wants to merge 1 commit into
Conversation
Deploying windmill with
|
| Latest commit: |
7bd8101
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://752d48ad.windmill.pages.dev |
| Branch Preview URL: | https://glm-dark-mode.windmill.pages.dev |
Guilhem-lm
force-pushed
the
glm/dark-mode
branch
9 times, most recently
from
cf01981 to
e0aa04a
Compare
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
Adds a GitHub dark theme variant alongside the existing dark mode, switchable per-user from User settings → Theme → Dark variant (Default / GitHub). The choice is persisted client-side and applied on load. The variant retints the whole app chrome — surfaces, sidebar rail, splitpanes, borders — and the Monaco editors, using GitHub's dark palette.
How it works
The default dark theme is baked into
html.dark { … }at build time. To support a second dark theme switchable at runtime with no rebuild, the variant is layered ashtml.dark.github-dark { … }(higher specificity) that re-emits the color variables. Agithub-darkclass lives permanently on<html>(via a small localStorage-backed helper), gated on.darkso it's inert in light mode.Changes
tokens.json— newgithub-darktoken set (same 33 keys as the defaultdarkset).tailwind.config.cjs— generates the github-dark CSS variables underhtml.dark.github-dark; adds a theme-driven--sidebar-bg-darkvar; converts the hardcoded.dark .splitpanes__pane/__splitterbackgrounds torgb(var(--color-…))so they follow the active theme (behavior-identical for light/dark).darkModeVariant.ts(new) —get/set/applyDarkModeVarianthelper: reads/writesdark-mode-variantin localStorage and toggles thegithub-darkclass.(root)/+layout.svelte— applies the variant on load.UserSettings.svelte— Default/GitHub toggle in the Theme row (visible in both light and dark).vscode.ts/EditorTheme.svelte/utils.ts— matchinggithub-darkMonaco editor theme; editor theme selection centralized ingetEditorTheme();getCssColorgains ahex-github-darkformat. Switching the variant retints open editors live via the existingDarkModeObserver.ScriptEditor.svelte— editor wrapperdark:bg-[#272D38]→dark:bg-surface-secondaryso it adapts.sidebarChrome.ts—SIDEBAR_BG_DARK→var(--sidebar-bg-dark)so the rail adapts across variants.Test plan
github-darktheme live.Screenshots
Not attached — the Playwright MCP screenshot tool repeatedly exceeded its 5s call limit on the running dev server in this session (page reached "fonts loaded" then the encode ran past the cap). The UI was verified instead by reading computed
--color-*variables and renderedbackgroundColor/boxShadowacross all three themes (light / default dark / github dark), including the sidebar rail, splitpanes panes, the separator, and the Monaco editor background. I'll add screenshots once the tooling recovers.