js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add JS snppet for setting wa-dark based on OS default

Browse Source
This commit is contained in:
Lea Verou
2025-01-25 14:52:53 -05:00
parent 815cc4220b
commit 10b067e805
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_layouts/theme.njk
View File

@@ -138,6 +138,7 @@ You can apply the class to the `<html>` element on your page to activate the dar
Web Awesome's themes have both light and dark styles built in.
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
This should be done at the application level.
As a best practice, to provide a dark theme in your app, you should:
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
@@ -146,5 +147,18 @@ As a best practice, to provide a dark theme in your app, you should:
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
```js
const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
const applyDark = function (event = systemDark) {
const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
document.documentElement.classList.toggle('wa-dark', isDark);
};
systemDark.addEventListener('change', applyDark);
applyDark();
```
{% endmarkdown %}
{% endblock %}