[Feature Request]: Add support for prefers-color-scheme #4128
Description
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
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate requests