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….