Description
Currently, you can switch your Cloudscape application to dark mode by adding the dark mode classes awsui-polaris-dark-mode and awsui-dark-mode to <body>. (Incidentally, this behavior doesn't seem to be documented at https://cloudscape.design/foundation/visual-foundation/visual-modes/.) But there's no class you can use to match the browser's prefers-color-scheme.
You could consume that preference in JavaScript and then set the appropriate class, but that doesn't work for SSR: The server has no way of knowing what the user's prefers-color-scheme value is. In practice, this means that any Cloudscape app that uses SSR and automatically switches the theme to match the browser-level preference will show an initial flicker of the wrong mode for some users.
This could be addressed by providing an awsui-auto-mode class that looks like this:
.awsui-auto-mode {
@media (prefers-color-scheme: dark) {
/* dark mode styles... */
}
}Code of Conduct
Description
Currently, you can switch your Cloudscape application to dark mode by adding the dark mode classes
awsui-polaris-dark-modeandawsui-dark-modeto<body>. (Incidentally, this behavior doesn't seem to be documented at https://cloudscape.design/foundation/visual-foundation/visual-modes/.) But there's no class you can use to match the browser's prefers-color-scheme.You could consume that preference in JavaScript and then set the appropriate class, but that doesn't work for SSR: The server has no way of knowing what the user's
prefers-color-schemevalue is. In practice, this means that any Cloudscape app that uses SSR and automatically switches the theme to match the browser-level preference will show an initial flicker of the wrong mode for some users.This could be addressed by providing an
awsui-auto-modeclass that looks like this:Code of Conduct