Update example: Adapting to color schemes

ramiy · Dec 13, 2023 · 8f2f21b · 8f2f21b
1 parent f5f944c
commit 8f2f21b
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/files/en-us/web/css/color-scheme/index.md b/files/en-us/web/css/color-scheme/index.md
@@ -66,6 +66,18 @@ To opt the entire page into the user's color scheme preferences, declare `color-
 }
 ```
 
+To style specific elements based on the user's color scheme preferences, declare `color-scheme` on specific elements.
+
+```css
+header,
+footer {
+  color-scheme: only dark;
+}
+main {
+  color-scheme: only light;
+}
+```
+
 ### Setting colors based on color scheme
 
 To style elements based on color scheme preferences, use the [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query. The example below opts in elements with a class of `.element` to using both light and dark operating system color schemes via the `color-scheme` property, and then uses `prefers-color-scheme` to specify the desired foreground and background colors for those color schemes.