Dark mode
Dark mode
Introduction
This pattern details how to implement dark mode theme switching into an application using a top navigation. A similar approach has been used in the ICDS guidance site.
This pattern includes the components:
As well as the
CSS color-scheme
When manually switching the theme using this pattern, things like browser scrollbars and other native elements may not switch their color-scheme. To ensure consistency, you may need to add the following CSS to the root of your project:
html:has(#theme-wrapper.ic-theme-dark) {
color-scheme: dark;
}
html:has(#theme-wrapper.ic-theme-light) {
color-scheme: light;
}