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]>
enhance-dev · Jun 25, 2024 · 8e14e87 · 8e14e87
1 parent 2b1bba2
commit 8e14e87
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/app/docs/md/enhance-styles/customization.md b/app/docs/md/enhance-styles/customization.md
@@ -101,6 +101,20 @@ If you’d like to opt out of the styles generated by the `theme` module, you ca
 }
 ```
 
+#### Light/dark mode
+
+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:
+
+
+```html
+<style>
+ :root {
+ color-scheme: only light; /* if you want to force light mode */
+ color-scheme: only dark; /* if you want to force dark mode */
+ }
+</style>
+```
+
 <doc-link-callout link="https://github.com/enhance-dev/enhance-styles?tab=readme-ov-file#theme" mark="🎨">
  Read more about themes
 </doc-link-callout>