Perfect Dark Mode#38
The current implementation of the dark mode feature includes a toggle button that allows switching between dark and light modes. However, there is no option available for selecting system preferences. To improve the functionality of the dark mode, it would be ideal to provide a select button that offers users the option to choose between dark mode, light mode, and system preference settings.
#nicetohave
changes image src with dark mode changes…
:root:not([theme]),:root[theme=”system”],:root[theme=”auto”],:root[theme=”os”],.theme-light,
:root[theme=”light”],:root[theme=”dark”] .theme-invert /light theme color/
}
:root:not([theme]) .theme-invert,:root[theme=”system”] .theme-invert,:root[theme=”auto”] .theme-invert,:root[theme=”os”] .theme-invert,.theme-dark,
:root[theme=”dark”],:root[theme=”light”] .theme-invert /dark theme color/
}
@media(prefers-color-scheme:dark) :root:not([theme]) .theme-invert,:root[theme=”system”] .theme-invert,:root[theme=”auto”] .theme-invert,:root[theme=”os”] .theme-invert /light theme color/
}
:root:not([theme]),:root[theme=”system”],:root[theme=”auto”],:root[theme=”os”] /dark theme color/
}
}
/*
<html theme="os">
<html theme="light">
<html theme="dark">
<element class="theme-invert">
<element class="theme-light">
<element class="theme-dark">
*/
Yeah, the current dark mode implementation is not ideal. Especially when i want a section to always be dark regardless of whether it is light or dark.
I would also definitely like an option to respect user preferences similar to MDN website
I second the idea to make an element/section “always dark”. Right now you can only invert, which is not the same.
dark mode image changes is a must needed feature
dark mode fixed attribute syntex in html element is hard coded (cf-). can it be changeable??? then it can be work with any custom framework….
Just to leave a few ideas for the perfect dark mode here. Can we also have some sort of option that will allow us to change design based on light/dark mode? Because in some scenarios we might e.g. change font weight based on the mode, we could also desaturate our images when in dark mode etc. it’s not just about the colors itself. Also, what if we want to add a third color option to our toggle or even more? It would maybe be better to allow changing of “css themes”, not just toggle between dark and light modes. This way you could build a light mode, dark mode, super high contrast mode, black and white mode or simply allow users to change a theme between multiple of your predefined color themes etc.
I posted this in one ov my request without realizing this is the right one so posting here for others to comment and upvote:
Problem
The color generator is clearly designed with light mode as the primary design foundation. When generating a color palette, the base colors are oriented toward light mode, and the dark mode colors are created as supplemental variations.
This works well for most projects – as long as the design starts in light mode.
But in my case (and many others in modern web design), the client’s requirement is to start with a dark mode as the primary aesthetic direction, with light mode being the alternative or fallback.
Currently, there’s no way to flip the logic of the color generator. Even if I enable “Dark Mode” in the UI while generating colors, I still have to:
Choose a base color for the light theme,
Hope that the generated dark variant will be suitable,
And reverse-engineer my design from there.
This is unintuitive and inefficient, especially when the dark palette is meant to be the main identity of the brand or project.
Suggestion
It would be incredibly helpful to have a toggle or option at the beginning of the project, such as:
“Choose your primary design mode: Light / Dark”
When “Dark” is selected:
The color generator would treat dark mode colors as the base,
And generate the light mode variants as secondary (just like it currently does the other way around).
Additionally, the label “Enable Dark Mode” in the color generator could dynamically change to “Enable Light Mode,” reflecting the new primary mode context.
Question
Do you have any plans to implement something like this in the future?
Or perhaps is there an alternative workflow you would recommend for dark-first projects using the current system?
Thanks again for the great tool – I’d love to hear your thoughts on this, and I truly believe such a feature would improve flexibility and adoption for dark-first design projects.