search

unpreset / unocss-preset-theme

The dynamic theme presets for UnoCSS.
https://unocss-preset-theme.todev.cc
123 stars 11 forks source link

Issue with generated prefers-color-scheme @media queries #5

Closed acoreyj closed 1 year ago

acoreyj commented 1 year ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch unocss-preset-theme@0.3.0 for the project I'm working on.

If setting dark:'media' this preset spits out invalid css for the prefers-color-scheme @media queries. They need to be in a rule like :root

Here is the diff that solved my problem:

diff --git a/node_modules/unocss-preset-theme/dist/index.cjs b/node_modules/unocss-preset-theme/dist/index.cjs
index e7730b2..558503b 100644
--- a/node_modules/unocss-preset-theme/dist/index.cjs
+++ b/node_modules/unocss-preset-theme/dist/index.cjs
@@ -96,7 +96,7 @@ const presetTheme = (options) => {
           return css.replace(/\/\* layer: .* \*\/\n/, "").replace(new RegExp(`(?:\\.(?:dark|light))?.*${PRESET_THEME_RULE}\\\\\\:(${keys.join("|")})\\\\\\:\\d+({(.*)})?`, "gm"), (full, kind, targetCSS, cleanCode) => {
             if (isMedia) {
               if (kind === "dark" || kind === "light")
-                return cleanCode;
+                return `:root{${cleanCode}}`;
             }
             return `${selectors[kind] || `.${kind}`}${targetCSS || ""}`;
           });
diff --git a/node_modules/unocss-preset-theme/dist/index.mjs b/node_modules/unocss-preset-theme/dist/index.mjs
index 0ace6fb..be5e948 100644
--- a/node_modules/unocss-preset-theme/dist/index.mjs
+++ b/node_modules/unocss-preset-theme/dist/index.mjs
@@ -92,7 +92,7 @@ const presetTheme = (options) => {
           return css.replace(/\/\* layer: .* \*\/\n/, "").replace(new RegExp(`(?:\\.(?:dark|light))?.*${PRESET_THEME_RULE}\\\\\\:(${keys.join("|")})\\\\\\:\\d+({(.*)})?`, "gm"), (full, kind, targetCSS, cleanCode) => {
             if (isMedia) {
               if (kind === "dark" || kind === "light")
-                return cleanCode;
+                return `:root{${cleanCode}}`;
             }
             return `${selectors[kind] || `.${kind}`}${targetCSS || ""}`;
           });

This issue body was partially generated by patch-package.

Dunqing commented 1 year ago

Thanks for your feedback and the solution you provided, I've fixed it in 0.3.1.