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">
*/