Repository navigation
Flag to disable dark mode #647
Description
#632 introduced dark mode. While I personally use dark mode at the OS level, I do not want dark mode on a ECMA standard. IMO, it does not look professional or authoritative.
I would like a way to disable dark mode, perhaps with a flag passed to ecmarkup. The only way I have found to revert the dark mode is to redefine the CSS variables.
This excerpt simply forces the original (light) color scheme for dark mode. But really, users should not have to do this.
@supports (color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:root {
--foreground-color: #111;
--background-color: #fff;
--link-foreground-color: #206ca7;
--link-hover-foreground-color: #239dee;
--user-code-foreground-color: brown;
--var-foreground-color: #218379;
--referenced0-background-color: #ffff6c;
--referenced1-background-color: #ffa4a8;
--referenced2-background-color: #96e885;
--referenced3-background-color: #3eeed2;
--referenced4-background-color: #eacfb6;
--referenced5-background-color: #82ddff;
--referenced6-background-color: #ffbcf2;
--note-background-color: #e9fbe9;
--note-border-color: #52e052;
--note-editor-border-color: #faa;
--nt-link-foreground-color: #333;
--production-rhs-background-color: #f0f0f0;
--production-rhs-border-color: #888;
--params-foreground-color: #2aa198;
--opt-foreground-color: #b58900;
--title-foreground-color: #f60;
--caption-foreground-color: #555555;
--table-header-background-color: #eeeeee;
--highlight-background-color-start: rgba(249, 241, 172, 1);
--highlight-background-color-end: rgba(249, 241, 172, 0);
--highlight-background-color: rgba(249, 241, 172, 1);
--ins-background-color: #e0f8e0;
--ins-border-color: #396;
--del-background-color: #fee;
--control-foreground-color: #eee;
--control-dimmed-foreground-color: #666;
--control-background-color: #ddd;
--control-dark-background-color: #ccc;
--control-border-color: #aaa;
--control-light-border-color: #bbb;
--control-shortcut-background-color: #eee;
--control-shortcut-shadow-color: #ccc;
--control-dialog-fade-color: rgba(255, 255, 255, 0.6);
--control-link-foreground-color: #1567a2;
--control-input-background-color: #bbb;
--control-input-border-color: #999;
--menu-header-background-color: #bbb;
--menu-revealed-link-foreground-color: #206ca7;
--menu-unpin-hover-foreground-color: #bb1212;
--menu-trace-list-foreground-color: #999;
--menu-trace-list-background-color: #222;
--toolbox-tail-background-outside-color: rgba(0, 0, 0, 0);
--toolbox-tail-border-outside-color: rgba(204, 204, 204, 0);
--normative-optional-background-color: #ffeedd;
--normative-optional-border-color: #ff6600;
--attributes-tag-foreground-color: #884400;
--figure-background: #fff;
}
}
}Reacted by Aki
Reacted by Jan Kowalleck
Activity
stevespringett commentedon Sep 22, 2026
Yet another Ecma standard that has to override dark mode with light mode styles. This is due to a very poor design choice in #632 that forced dark mode if the operating system's preference is dark mode, without a way to toggle it or disable dark mode entirely upon build.
I'm aware of three Ecma standards affected by this. All three standards override dark mode with light-mode styles as a workaround.
8.5% of the population is color blind and will not be able to see the following diagram in an Ecma document. I should not have to change my operating system preferences in order to read official ECMA documentation. Furthermore, I should not have to continuously override dark mode styles with light mode ones, as that method is fragile and may break in a future version of ecmarkup.
Please consider a way to disable dark mode entirely when building the HTML docs. Document authors will know in advance if they have diagrams like the one above that could cause issues and can proactively disable dark mode.
ctcpip commentedon Sep 22, 2026
I don't agree that this was a poor design choice. Users who have configured a preference for dark mode, should get content in dark mode. And I don't think any specs should be disabling dark mode for those users.
If something is not legible in dark mode, then we should fix those problems rather than abandoning dark mode support.
Dark mode is an important accommodation for users with visual or cognitive impairments. "Light mode is better and more professional" is not a universally held position, and difficult to defend in the context of individuals relying on accessibility features, as many users with photophobia or low vision rely on dark mode to prevent eye strain and navigate interfaces comfortably.
Some would consider a toggle to be an anti-pattern. I don't have strong feelings on adding a toggle, but a toggle is already easily available via several browser extensions and they work on every website.
stevespringett commentedon Sep 22, 2026
To add a bit more context to this ticket. #632 limited its accessibility testing to Lighthouse.
Lighthouse
The Ecma docs above score a respectable 91 on Lighthouse, which didn't flag any SVG accessibility issues that we frequently see in various Ecma standards, nor did it flag many of the existing text style issues in the dark mode theme. As a result, it scored decently.
Wave
Running the same test on Wave, a more capable accessibility evaluation tool, yields a very different result. The docs score a failing score of 2.3 out of 10, which indicates the dark mode color choices need a lot of work to be acceptable. Wave also didn't flag the SVG issues.
For reference, the same Ecma docs in light mode scored a moderately better 3.5 out of 10 with a dramatic reduction in contrast issues.
Color Contrast Checker
The last browser plugin I used was Color Contrast Checker, a tool where I performed each evaluation manually. I analyzed the SVG image, specifically the text on the dark background.
ctcpip commentedon Sep 22, 2026
Thanks Steve. We clearly have work to do, particularly to improve dark mode rendering. I opened up #733 to add a built-in toggle.
We should create a separate issue to track problems with dark mode.
jkowalleck commentedon Oct 1, 2026
re: that screenshot
hm, maybe the issue lies in the embedded SVG itself. it probably uses absolute colors, instead of relative ones.
AFAIK, SVG can - like css - use
<system-color>.see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color
so the text should not be some specific gray, but be
CanvasText, and the boxes should useFieldor something , and so on ...