From 8e14e8758639e5ba1622e93b37b96ac9d735ef6d Mon Sep 17 00:00:00 2001
From: Simon MacDonald <simon.macdonald@gmail.com>
Date: Tue, 25 Jun 2024 14:27:15 -0400
Subject: [PATCH] Light/dark mode docs (#219)

* Light/dark mode

Signed-off-by: macdonst <simon.macdonald@gmail.com>

* Apply suggestions from code review

Co-authored-by: Cole Peters <cole@colepeters.com>

---------

Signed-off-by: macdonst <simon.macdonald@gmail.com>
Co-authored-by: Cole Peters <cole@colepeters.com>
---
 app/docs/md/enhance-styles/customization.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/docs/md/enhance-styles/customization.md b/app/docs/md/enhance-styles/customization.md
index 8e4a63bb..eea4f4e7 100644
--- 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>