How to enable dark mode

[6be709c0]

Hello,

Cloudscape is such a great design-system, thank you so much for releasing it. It is going to be wildely used.
I have a question about dark mode.

In the documentation it is said:

Dark mode
Cloudscape offers a dark mode. Each color-related design token has a light mode and a dark mode value. If you don't specify a dark mode custom value, it will automatically apply the default one offered by the system. To maintain correlation and brand identity in themed interfaces, we recommend that you specify the dark mode alternative for modified color tokens.

I'm not sure if there is a built-in function available to switch between light mode and dark mode?
I did look into the doc and github code but couldn't find an example?

[timogasda]

Hello,

great question! You can use the applyMode helper from the @cloudscape-design/global-styles package. This is described in detail on the Global styles page: https://cloudscape.design/get-started/integration/global-styles/.

For example:

import { applyMode, Mode } from '@cloudscape-design/global-styles';

applyMode(Mode.Dark);

Hope that helps! :)

[6be709c0]

Sweet thank you!