sk-clib 1.10.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css
CHANGED
|
@@ -478,6 +478,9 @@
|
|
|
478
478
|
}
|
|
479
479
|
@layer utilities;
|
|
480
480
|
@layer utilities {
|
|
481
|
+
.bg-seed > * {
|
|
482
|
+
color: var(--color-on-primary);
|
|
483
|
+
}
|
|
481
484
|
.bg-background > * {
|
|
482
485
|
color: var(--color-on-background);
|
|
483
486
|
}
|
|
@@ -528,6 +531,12 @@
|
|
|
528
531
|
}
|
|
529
532
|
}
|
|
530
533
|
@layer utilities {
|
|
534
|
+
.bg-seed {
|
|
535
|
+
background: var(--color-seed);
|
|
536
|
+
}
|
|
537
|
+
.bg-on-seed {
|
|
538
|
+
background: var(--color-on-primary);
|
|
539
|
+
}
|
|
531
540
|
.bg-primary {
|
|
532
541
|
background: var(--color-primary);
|
|
533
542
|
}
|
package/dist/theme/logic.js
CHANGED
|
@@ -30,6 +30,7 @@ export function build(seedHex, mode, variant, contrast) {
|
|
|
30
30
|
}
|
|
31
31
|
export function applyScheme(scheme) {
|
|
32
32
|
var map = {
|
|
33
|
+
"--color-seed": scheme.sourceColorArgb,
|
|
33
34
|
"--color-primary": scheme.primary,
|
|
34
35
|
"--color-on-primary": scheme.onPrimary,
|
|
35
36
|
"--color-primary-container": scheme.primaryContainer,
|
|
@@ -15,6 +15,13 @@
|
|
|
15
15
|
}
|
|
16
16
|
}: Props = $props();
|
|
17
17
|
|
|
18
|
+
onMount(() => {
|
|
19
|
+
const colorSeed = document.documentElement.style.getPropertyValue("--color-seed")
|
|
20
|
+
if (colorSeed) {
|
|
21
|
+
theme.seedColor = colorSeed
|
|
22
|
+
}
|
|
23
|
+
})
|
|
24
|
+
|
|
18
25
|
/**
|
|
19
26
|
* Checks if the user already has a set md-theme
|
|
20
27
|
*/
|
|
@@ -41,14 +48,10 @@
|
|
|
41
48
|
|
|
42
49
|
// Build the theme with material utilities
|
|
43
50
|
const built = build(theme.seedColor, theme.mode, theme.variant);
|
|
44
|
-
|
|
51
|
+
|
|
45
52
|
// Create css variables object and save to body
|
|
46
53
|
let applied = applyScheme(built);
|
|
47
54
|
|
|
48
|
-
// Inject Seed Color
|
|
49
|
-
applied["--color-primary-fallback"] = applied["--color-primary"]
|
|
50
|
-
applied["--color-primary"] = theme.seedColor
|
|
51
|
-
|
|
52
55
|
// Save the theme to the user's cookies
|
|
53
56
|
saveTheme(applied);
|
|
54
57
|
});
|
|
@@ -72,12 +75,10 @@
|
|
|
72
75
|
*/
|
|
73
76
|
function applyTheme(theme) {
|
|
74
77
|
if (theme === undefined) {
|
|
75
|
-
console.warn('No theme specified, defaulting to doing nothing');
|
|
76
78
|
return;
|
|
77
79
|
}
|
|
78
80
|
|
|
79
81
|
for (const [name, hex] of Object.entries(theme)) {
|
|
80
|
-
console.info(`Setting ${name} to ${hex}`);
|
|
81
82
|
document.documentElement.style.setProperty(name, hex);
|
|
82
83
|
}
|
|
83
84
|
}
|