@manafishrov/ui 1.0.4 → 1.0.5
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/Theme.js +6 -6
- package/dist/Theme.js.map +1 -1
- package/package.json +1 -1
- package/src/Theme.tsx +2 -2
package/dist/Theme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createComponent as f } from "solid-js/web";
|
|
2
2
|
import { createSignal as c, onMount as y, createEffect as h, on as i, createContext as E, useContext as b } from "solid-js";
|
|
3
|
-
const l = E(),
|
|
4
|
-
if (
|
|
3
|
+
const l = E(), S = "theme", m = "(prefers-color-scheme: dark)", g = () => typeof globalThis.matchMedia != "function" ? "light" : globalThis.matchMedia(m).matches ? "dark" : "light", v = (e, t) => {
|
|
4
|
+
if (!("localStorage" in globalThis))
|
|
5
5
|
return t;
|
|
6
6
|
const o = globalThis.localStorage.getItem(e);
|
|
7
7
|
return o === "light" || o === "dark" || o === "system" ? o : t;
|
|
@@ -12,7 +12,7 @@ const l = E(), v = "theme", m = "(prefers-color-scheme: dark)", d = () => typeof
|
|
|
12
12
|
}, C = (e) => {
|
|
13
13
|
if (typeof globalThis.matchMedia != "function")
|
|
14
14
|
return () => {
|
|
15
|
-
e(
|
|
15
|
+
e(g());
|
|
16
16
|
};
|
|
17
17
|
const t = globalThis.matchMedia(m), o = (n) => {
|
|
18
18
|
e(n.matches ? "dark" : "light");
|
|
@@ -21,11 +21,11 @@ const l = E(), v = "theme", m = "(prefers-color-scheme: dark)", d = () => typeof
|
|
|
21
21
|
t.removeEventListener("change", o);
|
|
22
22
|
};
|
|
23
23
|
}, L = (e) => {
|
|
24
|
-
const t = () => e.storageKey ??
|
|
25
|
-
s(r),
|
|
24
|
+
const t = () => e.storageKey ?? S, o = () => e.defaultTheme ?? "system", [n, s] = c(e.theme ?? v(t(), o())), [d, u] = c(g()), T = (r) => {
|
|
25
|
+
s(r), "localStorage" in globalThis && globalThis.localStorage.setItem(t(), r);
|
|
26
26
|
}, a = () => {
|
|
27
27
|
const r = n();
|
|
28
|
-
return r === "system" ?
|
|
28
|
+
return r === "system" ? d() : r;
|
|
29
29
|
};
|
|
30
30
|
return y(() => C(u)), h(i(() => e.theme, (r) => {
|
|
31
31
|
typeof r == "string" && s(r);
|
package/dist/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.js","sources":["../src/Theme.tsx"],"sourcesContent":["import type { Component, JSXElement } from 'solid-js';\n\nexport type Theme = 'light' | 'dark' | 'system';\n\nexport type ThemeProviderProps = {\n theme?: Theme;\n defaultTheme?: Theme;\n storageKey?: string;\n children: JSXElement;\n};\n\ntype ThemeContextValue = {\n theme: () => Theme;\n setTheme: (theme: Theme) => void;\n resolvedTheme: () => 'light' | 'dark';\n};\n\nconst ThemeContext = createContext<ThemeContextValue>();\nconst DEFAULT_STORAGE_KEY = 'theme';\nconst DARK_THEME_QUERY = '(prefers-color-scheme: dark)';\n\nconst getSystemTheme = (): 'light' | 'dark' => {\n if (typeof globalThis.matchMedia !== 'function') {\n return 'light';\n }\n return globalThis.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light';\n};\n\nconst readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {\n if (
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../src/Theme.tsx"],"sourcesContent":["import type { Component, JSXElement } from 'solid-js';\n\nexport type Theme = 'light' | 'dark' | 'system';\n\nexport type ThemeProviderProps = {\n theme?: Theme;\n defaultTheme?: Theme;\n storageKey?: string;\n children: JSXElement;\n};\n\ntype ThemeContextValue = {\n theme: () => Theme;\n setTheme: (theme: Theme) => void;\n resolvedTheme: () => 'light' | 'dark';\n};\n\nconst ThemeContext = createContext<ThemeContextValue>();\nconst DEFAULT_STORAGE_KEY = 'theme';\nconst DARK_THEME_QUERY = '(prefers-color-scheme: dark)';\n\nconst getSystemTheme = (): 'light' | 'dark' => {\n if (typeof globalThis.matchMedia !== 'function') {\n return 'light';\n }\n return globalThis.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light';\n};\n\nconst readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {\n if (!('localStorage' in globalThis)) {\n return defaultTheme;\n }\n const stored = globalThis.localStorage.getItem(storageKey);\n if (stored === 'light' || stored === 'dark' || stored === 'system') {\n return stored;\n }\n return defaultTheme;\n};\n\nconst applyRootThemeClass = (resolvedTheme: () => 'light' | 'dark'): void => {\n createEffect(\n on(resolvedTheme, (resolved) => {\n const root = document.documentElement;\n root.classList.toggle('dark', resolved === 'dark');\n }),\n );\n};\n\nconst createSystemThemeListener = (\n setSystemTheme: (theme: 'light' | 'dark') => void,\n): (() => void) => {\n if (typeof globalThis.matchMedia !== 'function') {\n return (): void => {\n setSystemTheme(getSystemTheme());\n };\n }\n const mediaQuery = globalThis.matchMedia(DARK_THEME_QUERY);\n const handleChange = (mediaQueryEvent: MediaQueryListEvent): void => {\n setSystemTheme(mediaQueryEvent.matches ? 'dark' : 'light');\n };\n mediaQuery.addEventListener('change', handleChange);\n return (): void => {\n mediaQuery.removeEventListener('change', handleChange);\n };\n};\n\nexport const ThemeProvider: Component<ThemeProviderProps> = (props) => {\n const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n const fallbackTheme = (): Theme => props.defaultTheme ?? 'system';\n const [theme, setThemeState] = createSignal<Theme>(\n props.theme ?? readStoredTheme(storageKey(), fallbackTheme()),\n );\n const [systemTheme, setSystemTheme] = createSignal<'light' | 'dark'>(getSystemTheme());\n\n const setTheme = (newTheme: Theme): void => {\n setThemeState(newTheme);\n if ('localStorage' in globalThis) {\n globalThis.localStorage.setItem(storageKey(), newTheme);\n }\n };\n\n const resolvedTheme = (): 'light' | 'dark' => {\n const current = theme();\n return current === 'system' ? systemTheme() : current;\n };\n\n onMount(() => createSystemThemeListener(setSystemTheme));\n\n createEffect(\n on(\n () => props.theme,\n (propTheme) => {\n if (typeof propTheme === 'string') {\n setThemeState(propTheme);\n }\n },\n ),\n );\n applyRootThemeClass(resolvedTheme);\n\n return (\n <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>\n {props.children}\n </ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"names":["ThemeContext","createContext","DEFAULT_STORAGE_KEY","DARK_THEME_QUERY","getSystemTheme","globalThis","matchMedia","matches","readStoredTheme","storageKey","defaultTheme","stored","localStorage","getItem","applyRootThemeClass","resolvedTheme","createEffect","on","resolved","root","document","documentElement","classList","toggle","createSystemThemeListener","setSystemTheme","mediaQuery","handleChange","mediaQueryEvent","addEventListener","removeEventListener","ThemeProvider","props","fallbackTheme","theme","setThemeState","createSignal","systemTheme","setTheme","newTheme","setItem","current","onMount","propTheme","_$createComponent","Provider","value","children","useTheme","context","useContext","Error"],"mappings":";;AAiBA,MAAMA,IAAeC,EAAAA,GACfC,IAAsB,SACtBC,IAAmB,gCAEnBC,IAAiBA,MACjB,OAAOC,WAAWC,cAAe,aAC5B,UAEFD,WAAWC,WAAWH,CAAgB,EAAEI,UAAU,SAAS,SAG9DC,IAAkBA,CAACC,GAAoBC,MAA+B;AAC1E,MAAI,EAAE,kBAAkBL;AACtB,WAAOK;AAET,QAAMC,IAASN,WAAWO,aAAaC,QAAQJ,CAAU;AACzD,SAAIE,MAAW,WAAWA,MAAW,UAAUA,MAAW,WACjDA,IAEFD;AACT,GAEMI,IAAsBA,CAACC,MAAgD;AAC3EC,EAAAA,EACEC,EAAGF,GAAgBG,CAAAA,MAAa;AAE9BC,IADaC,SAASC,gBACjBC,UAAUC,OAAO,QAAQL,MAAa,MAAM;AAAA,EACnD,CAAC,CACH;AACF,GAEMM,IAA4BA,CAChCC,MACiB;AACjB,MAAI,OAAOpB,WAAWC,cAAe;AACnC,WAAO,MAAY;AACjBmB,MAAAA,EAAerB,GAAgB;AAAA,IACjC;AAEF,QAAMsB,IAAarB,WAAWC,WAAWH,CAAgB,GACnDwB,IAAeA,CAACC,MAA+C;AACnEH,IAAAA,EAAeG,EAAgBrB,UAAU,SAAS,OAAO;AAAA,EAC3D;AACAmB,SAAAA,EAAWG,iBAAiB,UAAUF,CAAY,GAC3C,MAAY;AACjBD,IAAAA,EAAWI,oBAAoB,UAAUH,CAAY;AAAA,EACvD;AACF,GAEaI,IAAgDC,CAAAA,MAAU;AACrE,QAAMvB,IAAaA,MAAcuB,EAAMvB,cAAcP,GAC/C+B,IAAgBA,MAAaD,EAAMtB,gBAAgB,UACnD,CAACwB,GAAOC,CAAa,IAAIC,EAC7BJ,EAAME,SAAS1B,EAAgBC,KAAcwB,EAAAA,CAAe,CAC9D,GACM,CAACI,GAAaZ,CAAc,IAAIW,EAA+BhC,GAAgB,GAE/EkC,IAAWA,CAACC,MAA0B;AAC1CJ,IAAAA,EAAcI,CAAQ,GAClB,kBAAkBlC,cACpBA,WAAWO,aAAa4B,QAAQ/B,EAAAA,GAAc8B,CAAQ;AAAA,EAE1D,GAEMxB,IAAgBA,MAAwB;AAC5C,UAAM0B,IAAUP,EAAAA;AAChB,WAAOO,MAAY,WAAWJ,EAAAA,IAAgBI;AAAAA,EAChD;AAEAC,SAAAA,EAAQ,MAAMlB,EAA0BC,CAAc,CAAC,GAEvDT,EACEC,EACE,MAAMe,EAAME,OACXS,CAAAA,MAAc;AACb,IAAI,OAAOA,KAAc,YACvBR,EAAcQ,CAAS;AAAA,EAE3B,CACF,CACF,GACA7B,EAAoBC,CAAa,GAEjC6B,EACG5C,EAAa6C,UAAQ;AAAA,IAACC,OAAO;AAAA,MAAEZ,OAAAA;AAAAA,MAAOI,UAAAA;AAAAA,MAAUvB,eAAAA;AAAAA,IAAAA;AAAAA,IAAe,IAAAgC,WAAA;AAAA,aAC7Df,EAAMe;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB,GAEaC,IAAWA,MAAyB;AAC/C,QAAMC,IAAUC,EAAWlD,CAAY;AACvC,MAAI,CAACiD;AACH,UAAM,IAAIE,MAAM,8CAA8C;AAEhE,SAAOF;AACT;"}
|
package/package.json
CHANGED
package/src/Theme.tsx
CHANGED
|
@@ -27,7 +27,7 @@ const getSystemTheme = (): 'light' | 'dark' => {
|
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
const readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {
|
|
30
|
-
if (
|
|
30
|
+
if (!('localStorage' in globalThis)) {
|
|
31
31
|
return defaultTheme;
|
|
32
32
|
}
|
|
33
33
|
const stored = globalThis.localStorage.getItem(storageKey);
|
|
@@ -74,7 +74,7 @@ export const ThemeProvider: Component<ThemeProviderProps> = (props) => {
|
|
|
74
74
|
|
|
75
75
|
const setTheme = (newTheme: Theme): void => {
|
|
76
76
|
setThemeState(newTheme);
|
|
77
|
-
if (
|
|
77
|
+
if ('localStorage' in globalThis) {
|
|
78
78
|
globalThis.localStorage.setItem(storageKey(), newTheme);
|
|
79
79
|
}
|
|
80
80
|
};
|