@celar-ui/svelte 0.3.2 → 0.3.3

package/dist/utils.d.ts

@@ -1,4 +1 @@
-/**
- * Apply the chosen color scheme by traversing stylesheet rules and adjusting prefers-color-scheme media queries.
- */
 export declare function applyPreferredColorScheme(scheme: 'light' | 'dark' | 'auto'): void;

package/dist/utils.js

@@ -1,41 +1,6 @@
-/**
- * Apply the chosen color scheme by traversing stylesheet rules and adjusting prefers-color-scheme media queries.
- */
 export function applyPreferredColorScheme(scheme) {
-    for (const styleSheet of Array.from(document.styleSheets)) {
-        // Some stylesheets may be subject to CORS
-        let rules;
-        try {
-            rules = styleSheet.cssRules;
-        }
-        catch {
-            continue;
-        }
-        for (const rule of Array.from(rules)) {
-            if (rule instanceof CSSMediaRule && rule.media.mediaText.includes('prefers-color-scheme')) {
-                switch (scheme) {
-                    case 'light':
-                        rule.media.appendMedium('original-prefers-color-scheme');
-                        if (rule.media.mediaText.includes('light'))
-                            rule.media.deleteMedium('(prefers-color-scheme: light)');
-                        if (rule.media.mediaText.includes('dark'))
-                            rule.media.deleteMedium('(prefers-color-scheme: dark)');
-                        break;
-                    case 'dark':
-                        rule.media.appendMedium('(prefers-color-scheme: light)');
-                        rule.media.appendMedium('(prefers-color-scheme: dark)');
-                        if (rule.media.mediaText.includes('original'))
-                            rule.media.deleteMedium('original-prefers-color-scheme');
-                        break;
-                    default: // auto
-                        rule.media.appendMedium('(prefers-color-scheme: dark)');
-                        if (rule.media.mediaText.includes('light'))
-                            rule.media.deleteMedium('(prefers-color-scheme: light)');
-                        if (rule.media.mediaText.includes('original'))
-                            rule.media.deleteMedium('original-prefers-color-scheme');
-                        break;
-                }
-            }
-        }
+    if (scheme === 'auto') {
+        scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
+    document.documentElement.setAttribute('data-theme', scheme);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",

package/src/styles/colors.scss

@@ -73,10 +73,6 @@ $colors-misc: (
 	@include utils.add_prefix(config.$prefix, $colors-misc);
 }
 
-// Based on this to dynamically switch the interface:
-// https://stackoverflow.com/a/75124760
-@media (prefers-color-scheme: dark) {
-	:root {
-		@include utils.generate_colors(config.$prefix, $colors-theme-dark);
-	}
+:root[data-theme='dark'] {
+	@include utils.generate_colors(config.$prefix, $colors-theme-dark);
 }