Skip to content

Commit 8e14e87

Browse files
macdonstcolepeters
andauthored
Light/dark mode docs (#219)
* Light/dark mode Signed-off-by: macdonst <[email protected]> * Apply suggestions from code review Co-authored-by: Cole Peters <[email protected]> --------- Signed-off-by: macdonst <[email protected]> Co-authored-by: Cole Peters <[email protected]>
1 parent 2b1bba2 commit 8e14e87

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

app/docs/md/enhance-styles/customization.md

+14
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,20 @@ If you’d like to opt out of the styles generated by the `theme` module, you ca
101101
}
102102
```
103103

104+
#### Light/dark mode
105+
106+
By default, Enhance Styles ships with support for automatic light and dark mode styles. If you want your app to support only light *or* dark mode, drop this CSS in your [head](/docs/conventions/head) as a global style:
107+
108+
109+
```html
110+
<style>
111+
:root {
112+
color-scheme: only light; /* if you want to force light mode */
113+
color-scheme: only dark; /* if you want to force dark mode */
114+
}
115+
</style>
116+
```
117+
104118
<doc-link-callout link="https://github.com/enhance-dev/enhance-styles?tab=readme-ov-file#theme" mark="🎨">
105119
Read more about themes
106120
</doc-link-callout>

0 commit comments

Comments
 (0)