@celar-ui/svelte 0.3.1 → 0.3.2

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './utils.js';
 export { default as TextButton } from './buttons/TextButton.svelte';
 export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
 export { default as FilledButton } from './buttons/FilledButton.svelte';

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export * from './utils.js';
 export { default as TextButton } from './buttons/TextButton.svelte';
 export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
 export { default as FilledButton } from './buttons/FilledButton.svelte';

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+/**
+ * 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;
+                }
+            }
+        }
+    }
+}

package/package.json

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

package/src/styles/colors.scss

@@ -51,7 +51,7 @@ $colors-theme-dark: (
 	color-text-warning: #bfa060,
 	color-text-danger: #b36a6a,
 
-	color-bg: #0a0a0a,
+	color-bg: #1a1a1a,
 	color-bg-info: #101a3b,
 	color-bg-success: #184d3a,
 	color-bg-warning: #4a3700,
@@ -59,10 +59,10 @@ $colors-theme-dark: (
 ) !default;
 
 $colors-misc: (
-	color-shadow--soft: rgba(0, 0, 0, 0.05),
-	color-shadow--md: rgba(0, 0, 0, 0.075),
-	color-shadow: rgba(0, 0, 0, 0.1),
-	color-shadow--strong: rgba(0, 0, 0, 0.16),
+	color-shadow--soft: rgba(var(--color-text--rgb), 0.05),
+	color-shadow--md: rgba(var(--color-text--rgb), 0.075),
+	color-shadow: rgba(var(--color-text--rgb), 0.1),
+	color-shadow--strong: rgba(var(--color-text--rgb), 0.16),
 	color-border: rgba(var(--color-text--rgb), 0.07),
 	color-border--strong: rgba(var(--color-text--rgb), 0.1),
 	color-wrapper: rgba(var(--color-text--rgb), 0.024)
@@ -73,12 +73,10 @@ $colors-misc: (
 	@include utils.add_prefix(config.$prefix, $colors-misc);
 }
 
-:root[data-theme='dark'] {
-	@include utils.generate_colors(config.$prefix, $colors-theme-dark);
-}
-
+// Based on this to dynamically switch the interface:
+// https://stackoverflow.com/a/75124760
 @media (prefers-color-scheme: dark) {
-	:root[data-theme='auto'] {
+	:root {
 		@include utils.generate_colors(config.$prefix, $colors-theme-dark);
 	}
 }