Darkmode switcher

[mimarz]

If we are going to define a darkmode for theme for our brands we also need to provide a component for users to decide how dark/light mode is applied.

We need to support manual toggle for dark/light mode aswell as automatic mode, which follows systems preferences for which mode should be active.

Its normal to use localstorage and media query prefers-color-scheme for this.

We should make this when we have a new dropdown menu component ready for this.

Notes:

• https://dev.to/abbeyperini/an-accessible-dark-mode-toggle-in-react-aop
• https://dev.to/stuffbreaker/dark-mode-in-web-components-is-about-to-get-awesome-4i14

[Barsnes]

This is an example of two ways we can apply dark styles to our components. One if on the component, the other is outside: https://codesandbox.io/p/sandbox/ds-darkmode-preview-dzn6sc

[mimarz]

Example of selector from Github:

@media (prefers-color-scheme: dark) {
  [data-color-mode=auto][data-dark-theme*=dark]
}

[mrosvik]

@mimarz Could you update status about this?

[mimarz]

We will not provide a darkmode switcher in the sense of a component, as its conditional on how and where color-modes should be applied. We will leave this up to our users to decide.

If they want the traditional darkmode switcher they can use our DropdownMenu along with our data attribute, data-ds-color-mode for switching color modes (currently dark, light, contrast & auto) in the relevant root element for their web app.

Color mode auto will use prefers-color-scheme to assign light/dark.

With the use of using data-attributes this will give our users ability to enable color modes for a specific section of the page for use-cases such as "inverted" sections or for the whole page if wanted.