Skip to content

Implement dark mode #5740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
arai-a wants to merge 38 commits into
base: main
Choose a base branch
from
Open

Implement dark mode #5740

arai-a wants to merge 38 commits into from
+2,269 −583

Conversation

@arai-a
Copy link
Contributor

@arai-a arai-a commented Dec 27, 2025

Fixed #2097

This patch stack implements the dark mode:

  • almost all colors and icons are moved to variables
  • the variables are defined either in the root, or as the element internal variables
  • canvas-related colors are handled in the script side, with a new dark-mode module added
home profiler

This stack doesn't cover the user documents.

@codecov
Copy link

codecov bot commented Dec 27, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 93.26923% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.69%. Comparing base (0dd124f) to head (72a2efd).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/components/marker-chart/Canvas.tsx 85.18% 4 Missing ⚠️
src/index.tsx 0.00% 1 Missing ⚠️
src/profile-logic/graph-color.ts 0.00% 1 Missing ⚠️
src/utils/colors.ts 93.33% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #5740      +/-   ##
==========================================
+ Coverage   85.67%   85.69%   +0.01%     
==========================================
  Files         315      316       +1     
  Lines       31110    31185      +75     
  Branches     8472     8485      +13     
==========================================
+ Hits        26654    26724      +70     
- Misses       4026     4031       +5     
  Partials      430      430

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@arai-a arai-a mentioned this pull request Dec 28, 2025
Open
43 tasks
@arai-a
Copy link
Contributor Author

arai-a commented Jan 3, 2026 •
edited
Loading

This patch stack allows controlling the color for HCM more easily.
I'll prepare another patch stack to improve the HCM after this.
(prototype: https://github.com/arai-a/profiler/tree/hcm)

@mstange
Copy link
Contributor

mstange commented Jan 9, 2026

Very cool! Thank you!

Is there a way we could land this off-by-default? I'd like to tweak some colors but I don't want this PR to bitrot in the meantime.

Also, Nazim said he probably prefers the profiler in light mode even though he's using his operating system and browser in dark mode... I don't really agree with that idea (I think website-internal theme toggle buttons are silly) but it suggests that it might be a good idea to have a way to opt out. I'm fine with the opt-in/opt-out being rather hidden if that makes the implementation easier. For example it could be a function you call from the console, or an alternate stylesheet that you access via View -> Page Style -> ... in Firefox

@arai-a
Copy link
Contributor Author

arai-a commented Jan 9, 2026

Sure, I'll look into making it configurable.
The canvas-related things need to be made in sync with the CSS, so we need something JavaScript-initiated, or possibly the opposite way by detecting some CSS variable from JavaScript.

@arai-a arai-a requested a review from a team as a code owner January 9, 2026 17:45
@arai-a
Copy link
Contributor Author

arai-a commented Jan 9, 2026

Make it controlled by localStorage "theme" item, which sets/unsets "dark-mode" class on <html> element,
and modified each style rule to use the :root.dark-mode selector.
Some rules are moved/reordered to make stylelint happy.

Without the last patch, it's controllable by setDarkMode()/setLightMode() functions from console.

With the last patch, it's exposed to the home view, and the above functions are no longer exposed.
checkbox

@arai-a
Copy link
Contributor Author

arai-a commented Jan 9, 2026

Actually, the :root.dark-mode FOO selector interacts badly with the current HCM styling, given it has higher selectivity than the media query @media (forced-colors: active) { ... },
and now the dark mode colors overwrites the HCM rules.

I'll look into making things inside @media (forced-colors: active) have more priority.

@arai-a
Copy link
Contributor Author

arai-a commented Jan 9, 2026 •
edited
Loading

Added a temporary fix for the HCM coloring.
ultimately the HCM should also use the CSS variables, but that's for another bug, which I already have prototype.
Another option is to hide the checkbox until the HCM styling gets fully fixed (so, remove the topmost 2 commits).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Implement a dark mode in the profiler UI

2 participants

@arai-a @mstange