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

🔧 tweaks

Browse Source
This commit is contained in:
lindsaym-fa
2025-11-06 10:32:53 -05:00
parent b2a2d0b9fd
commit 05bb1f3630
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/webawesome/docs/docs/theming/index.md
View File

@@ -54,7 +54,7 @@ TODO: Add theme preview
Your color palette is determined by `class="wa-theme-{name}"` on the `<html>` element. If no class is specified, the default theme is used.
### Light and Dark Modes
`.wa-light` | `.wa-dark` | `.wa-invert`
`.wa-light` | `.wa-dark`
Every theme is designed to adapt to light and dark mode. Light mode styles are applied by default, but you can apply a specific color scheme to an entire page or just a section with `class="wa-light"` or `class="wa-dark"`.
@@ -102,7 +102,10 @@ Every theme is designed to adapt to light and dark mode. Light mode styles are a
</div>
```
You can also use `class="wa-invert"`, which allows a section to behave as `.wa-dark` in light mode and like `.wa-light` in dark mode.
#### Inverting the Color Scheme
`.wa-invert`
You can force a section to behave like `.wa-dark` in light mode and like `.wa-light` in dark mode by using `class="wa-invert"`.
```html {.example}
<p>This card will always use the opposite of the color scheme applied to the docs.</p>