Skip to content

Dark mode support#622

Open
ysulyma wants to merge 6 commits intonumberscope:mainfrom
ysulyma:dark_mode
Open

Dark mode support#622
ysulyma wants to merge 6 commits intonumberscope:mainfrom
ysulyma:dark_mode

Conversation

@ysulyma
Copy link
Contributor

@ysulyma ysulyma commented Feb 2, 2026

Basic dark mode support:

numberscope.dark.mode.mov
  • I replaced --ns-color-white with --ns-color-bg when used as a background color, and ns-color-black to --ns-color-fg when used as a text color. Other uses of these variables (e.g. borders) remain intact

  • Uses the light-dark() function. This has 87% browser support compared to 96% support for prefers-color-scheme, but has the advantage of colocating the variants; if desired, I can change it to use prefers-color-scheme instead.

  • the SVG text also changes color

  • I didn't provide a dark variant for --ns-color-primary since it's the brand color and I don't know if it needs to align with other things

@gwhitney
Copy link
Collaborator

gwhitney commented Feb 2, 2026

Not a full review yet, but this feature looks reasonable. One preliminary question: what does light-dark() do when it's not supported?

@ysulyma
Copy link
Contributor Author

ysulyma commented Feb 2, 2026

@gwhitney good catch! I could do

--ns-color-fg: #2f2f2f;
--ns-color-fg: light-dark(#2f2f2f, #ffffff);

for backwards compatibility, but I decided to just go with prefers-color-scheme for better compatibility. (There are only five values here so colocation isn't as much of an issue)

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.

2 participants