From dfa204ec81887fdc4a6b90c1031401fca3dcf841 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 2 Jan 2025 17:58:10 +0000 Subject: [PATCH] looks great, a few edits --- docsite/index.html | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index a4ee21ef..94dc36a6 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -1713,7 +1713,7 @@
NPM Imported Usage Sample
- Color Theming 101 + Color 101: Themes
@@ -1923,31 +1923,30 @@
Typography
- Color Theming 201 + Color 201: Normalize Theme Switch
-

1) Theme switch

-

Color theming 101 shows how open-props implements various themes. With the switch imports, you can customize the appearance of a page by importing the props respectively

-

Similar to how light/dark mode behaviours are controlled with a toggle switch, commonly used with javascript for persistence of user's preference either to localStorage or a cookie on page reload.

+

1) Normalize Theme Switch

+ 
+              
+                @import "https://unpkg.com/open-props/theme.light.switch.min.css";
+                @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
+              
+
+

The Open Props normalize.css has light and dark built in, but it only changes with the media query / operating system. If you want users to be able to change this, you'll need Open Props switch imports. These have the same theme values from normalize, but scoped to selectors.

+ +

Light Selectors: .light | .light-theme | data-theme="light"

+

Dark Selectors: .dark | .dark-theme | data-theme="dark"

+ +

This allows you to apply a light or dark theme to the page or a portion of the page using the selectors imported.

See it in action: here

-
-
- 
-                
-                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
-                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
-                
-
-
-
-

2) Section theme

-

When you need to control the appearance of a specific section, you can use the same imports in a slightly different manner

-

Play with it here

+

When you need to control the appearance of a specific section, use any of the selectors from the switch imports, like .dark or .light, and apply them to HTML elements.

+

Try it here