@likable-hair/svelte 3.0.7 → 3.0.10

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
+export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
 export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
 export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';

package/dist/index.js

@@ -42,6 +42,7 @@ export { default as ProgressBar } from './components/simple/progress/ProgressBar
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
 export { default as mediaQuery } from './stores/mediaQuery';
+export { default as theme, toggleTheme, setTheme } from './stores/theme';
 export { default as SimpleTimeLine } from './components/simple/timeline/SimpleTimeLine.svelte';
 export { default as CollapsibleSideBarLayout } from './components/layouts/CollapsibleSideBarLayout.svelte';
 export { default as StableDividedSideBarLayout } from './components/layouts/StableDividedSideBarLayout.svelte';

package/dist/stores/theme.d.ts

@@ -11,12 +11,22 @@ export type Shades = {
     900: string;
 };
 type Colors = Record<string, {
-    background?: Shades;
-    contrast?: Shades;
-    primary?: Shades;
-    secondary?: Shades;
-    error?: Shades;
-    warning?: Shades;
+    dark: {
+        background?: Shades;
+        contrast?: Shades;
+        primary?: Shades;
+        secondary?: Shades;
+        error?: Shades;
+        warning?: Shades;
+    };
+    light: {
+        background?: Shades;
+        contrast?: Shades;
+        primary?: Shades;
+        secondary?: Shades;
+        error?: Shades;
+        warning?: Shades;
+    };
 }>;
 type ThemeStore = {
     colors?: Colors;

package/dist/stores/theme.js

@@ -1,8 +1,8 @@
 import { writable } from 'svelte/store';
 import { BROWSER } from 'esm-env';
 const theme = writable({
-    active: 'light',
-    disabled: true,
+    active: 'default',
+    disabled: false,
     dark: false
 });
 if (BROWSER) {
@@ -21,6 +21,18 @@ if (BROWSER) {
             return v;
         });
     }
+    else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme.update((v) => {
+            v.dark = true;
+            return v;
+        });
+    }
+    else {
+        theme.update((v) => {
+            v.dark = false;
+            return v;
+        });
+    }
 }
 export function setTheme(th) {
     localStorage.setItem('theme', th);
@@ -63,7 +75,7 @@ theme.subscribe(value => {
             styleTag = document.createElement("style");
             let styleBuilder = `:root {`;
             if (!!value.colors) {
-                const activeTheme = value.active || 'light';
+                const activeTheme = value.active || 'default';
                 if (!!value.colors[activeTheme]) {
                     for (const [colorType, shades] of Object.entries(value.colors[activeTheme])) {
                         for (const [shade, color] of Object.entries(shades)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.7",
+  "version": "3.0.10",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",