Add dark mode support (system-follow) - #147
Merged
Merged
Conversation
Contributor
Author
|
Windows build and screenshots coming later tonight 
|
saucy-tech
marked this pull request as draft
July 6, 2026 23:29
The native window-control overlay (min/max/close strip on Windows/Linux) was pinned to a light color, so it stayed white in dark mode even though `nativeTheme.themeSource = "system"` drove the rest of the chrome. Derive the overlay colors from the current appearance and repaint them on `nativeTheme` "updated" so the button strip tracks live theme switches, and seed the initial `titleBarOverlay` from the same helper so a cold launch into dark starts dark instead of flashing a white strip. Colors are the resolved sRGB of the `--background` / `--muted-foreground` tokens in index.css and its `.dark` block. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@saucy-tech is attempting to deploy a commit to the bholmesdev's projects Team on Vercel. A member of the Team first needs to authorize it. |
saucy-tech
marked this pull request as ready for review
July 7, 2026 01:59
…dark-mode # Conflicts: # CHANGELOG.md
Owner
|
Amazing work @saucy-tech! Made some subtle tweaks to bring out the highlight in the left sidebar and reduce the warmth a degree. Otherwise looked good to me. Also, note-to-self for the future: product and tech specs are too much paperwork today. Need to pair down their level of detail and only use them when needed. 
|
bholmesdev
approved these changes
Jul 9, 2026
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
2 participants
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.
Description
Adds dark mode that follows the system appearance, as discussed in #110 (spec + implementation, per your comment there).
How it works:
nativeTheme.themeSourceflips from"light"to"system", so the native chrome and menus follow the OS.@custom-variant dark (&:is(.dark *))), so a small renderer module (apps/desktop/src/theme.ts) watchesmatchMedia("(prefers-color-scheme: dark)")and toggles.darkon<html>, reacting to live OS changes. An inline<head>guard sets the class before first paint so a cold launch into dark doesn't flash light.Surfaces covered:
.darktoken block inindex.cssactivates; placeholder values replaced with a warmer palette (neutrals at hue ~95 matching the light palette's warm family, background near Notion's#191919, warm amber selection, brand green accent).EditorView.csshad hardcoded Xcode-light hex for.hljs-*; added a.dark-scoped Atom One Dark palette.html-app-theme.cssmoves tocolor-scheme: light darkwith a@media (prefers-color-scheme: dark)token block mirroring the desktop palette. The sandboxed iframe inherits the host's resolved scheme, so no host→iframe messaging is needed..darkon<html>with a MutationObserver and ships its own dark ANSI palette, so it lights up as soon as the toggle exists.Product + tech specs are in
specs/gh-110/(PRODUCT.md, TECH.md).Scope note: system-follow only — no in-app theme override in this slice. The
.darkclass toggle keeps that easy to add later.Closes #110
Type of Change
Testing
New
happy-domunit test for the theme toggle (apps/desktop/src/theme.test.ts) covering initial dark, initial light, and live OS switching. Full workspace suites pass;pnpm build:desktop(electron-vite + tsc) and Biome are clean. (Pre-existing, unrelated on main:TerminalPanel.test.tsxfails withuseResizeSeparator is not a function— fails identically on a cleanmaincheckout.)Manual Testing Details:
Verified on macOS: cold launch into dark (no flash), live switching while the app is open (editor, code blocks, embedded HTML app, and terminal panel all follow), and light mode unchanged. Windows smoke test + screenshots coming shortly (draft until then). The mechanism is all standard Electron/
matchMedia.Screenshots
dark-mode-macos-toggle-web.mp4
Checklist