From ac854ee8a82a5469fb8d61576b093316f976c5eb Mon Sep 17 00:00:00 2001
From: Vladimir Krutkin <krutkinvs@gmail.com>
Date: Fri, 28 Feb 2025 16:07:07 +0300
Subject: [PATCH] Add support for style tags for theme styles

---
 src/dark-mode-toggle.mjs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/dark-mode-toggle.mjs b/src/dark-mode-toggle.mjs
index b23a096..dd866cb 100644
--- 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.