Merge pull request #94 from fastpok/pr-style-tags

tomayac · web-flow · commit 4ea28a445912 · 2025-05-07T18:50:43.000+02:00
Add support for style tags for theme styles
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ Or, alternatively, use a `<script type="module">` tag (served from unpkg's CDN):
 
 ## Usage
 
-There are two ways how you can use `<dark-mode-toggle>`:
+There are three ways how you can use `<dark-mode-toggle>`:
 
 ### ① Using different stylesheets per color scheme that are conditionally loaded
 
@@ -168,6 +168,37 @@ toggle.addEventListener('colorschemechange', () => {
 });
 ```
 
+### ③ Using internal stylesheets for each color scheme
+
+This approach allows you to define styles directly within your HTML using
+`<style>` tags, scoped to specific color schemes.
+
+⚠️ **Warning**  
+Internal stylesheets do not benefit from the loading optimizations provided by
+`<link>` elements, which may increase the page's initial load time.
+
+```html
+<head>
+  <style media="(prefers-color-scheme: light)">
+    body {
+      background-color: #ffffff;
+      color: #000000;
+    }
+  </style>
+  <style media="(prefers-color-scheme: dark)">
+    body {
+      background-color: #000000;
+      color: #ffffff;
+    }
+  </style>
+  <script
+    type="module"
+    src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"
+  ></script>
+</head>
+<!-- ... -->
+```
+
 ## Demo
 
 See the custom element in action in the
diff --git a/demo/index.html b/demo/index.html
@@ -106,6 +106,10 @@ <h1>Hi there!</h1>
           >example without flashing</a
         >).
       </p>
+      <p>
+        You can also check out the
+        <a href="internal-stylesheets.html">demo with internal stylesheets</a>.
+      </p>
     </main>
     <aside>
       <dark-mode-toggle id="dark-mode-toggle-1"></dark-mode-toggle>
diff --git a/demo/internal-stylesheets.html b/demo/internal-stylesheets.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <style media="(prefers-color-scheme: light)">
+      :root {
+        --background-color: #fff;
+        --text-color: #000;
+      }
+    </style>
+    <style media="(prefers-color-scheme: dark)">
+      :root {
+        --background-color: #000;
+        --text-color: #fff;
+      }
+    </style>
+    <style>
+      body {
+        background-color: var(--background-color);
+        color: var(--text-color);
+      }
+    </style>
+    <script type="module" src="../src/dark-mode-toggle.mjs"></script>
+  </head>
+  <body>
+    <h1>Demo with internal stylesheets</h1>
+    <p>
+      Lorem ipsum dolor sit amet, legere ancillae ne vis. Ne vim laudem accusam
+      consectetuer, eu utinam integre abhorreant sea. Quo eius veri ei, nibh
+      invenire democritum vel in, utamur vulputate id est. Possit ceteros vis
+      an.
+    </p>
+    <div>
+      Switch theme:
+      <dark-mode-toggle permanent></dark-mode-toggle>
+    </div>
+  </body>
+</html>
diff --git a/src/dark-mode-toggle.mjs b/src/dark-mode-toggle.mjs
@@ -30,6 +30,7 @@ const SYSTEM = 'system';
 const MQ_DARK = `(${PREFERS_COLOR_SCHEME}:${DARK})`;
 const MQ_LIGHT = `(${PREFERS_COLOR_SCHEME}:${LIGHT})`;
 const LINK_REL_STYLESHEET = 'link[rel=stylesheet]';
+const STYLE = 'style';
 const REMEMBER = 'remember';
 const LEGEND = 'legend';
 const TOGGLE = 'toggle';
@@ -126,10 +127,12 @@ export class DarkModeToggle extends HTMLElement {
     // We need to support `media="(prefers-color-scheme: dark)"` (with space)
     // and `media="(prefers-color-scheme:dark)"` (without space)
     this._darkCSS = doc.querySelectorAll(
-      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
+      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"],
+       ${STYLE}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
     );
     this._lightCSS = doc.querySelectorAll(
-      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
+      `${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"], 
+       ${STYLE}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
     );
 
     // Get DOM references.
