@loworbitstudio/visor-theme-engine 0.1.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/adapters/index.d.ts +150 -0
- package/dist/adapters/index.js +537 -0
- package/dist/chunk-ZLXFCNYF.js +1399 -0
- package/dist/fowt.d.ts +37 -0
- package/dist/fowt.js +23 -0
- package/dist/index.d.ts +799 -0
- package/dist/index.js +2414 -0
- package/dist/types-r7ae3WP2.d.ts +314 -0
- package/package.json +62 -0
- package/src/visor-theme.schema.json +282 -0
package/dist/fowt.d.ts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flash of Wrong Theme (FOWT) Prevention
|
|
3
|
+
*
|
|
4
|
+
* A blocking script snippet that reads theme preference from localStorage
|
|
5
|
+
* before the first paint, preventing the flash of wrong theme.
|
|
6
|
+
*
|
|
7
|
+
* Import as: @loworbitstudio/visor-theme-engine/fowt
|
|
8
|
+
*/
|
|
9
|
+
interface FowtOptions {
|
|
10
|
+
/** localStorage key to read (default: "visor-theme") */
|
|
11
|
+
storageKey?: string;
|
|
12
|
+
/** Default theme when no preference is stored (default: respects prefers-color-scheme) */
|
|
13
|
+
defaultTheme?: "light" | "dark";
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Generate a FOWT prevention script with configurable options.
|
|
17
|
+
*
|
|
18
|
+
* The script is ES5-safe (no arrow functions, no template literals) since
|
|
19
|
+
* it runs before any polyfills load. Place it as a blocking <script> in
|
|
20
|
+
* the document <head> before any stylesheets.
|
|
21
|
+
*/
|
|
22
|
+
declare function generateFowtScript(options?: FowtOptions): string;
|
|
23
|
+
/**
|
|
24
|
+
* Default FOWT prevention script.
|
|
25
|
+
*
|
|
26
|
+
* Reads "visor-theme" from localStorage. Falls back to prefers-color-scheme.
|
|
27
|
+
* Sets .dark or .light class on <html> before first paint.
|
|
28
|
+
*
|
|
29
|
+
* Usage in Next.js layout.tsx:
|
|
30
|
+
* <script>{FOWT_SCRIPT}</script>
|
|
31
|
+
*
|
|
32
|
+
* Usage in static HTML:
|
|
33
|
+
* <script>...paste FOWT_SCRIPT value...</script>
|
|
34
|
+
*/
|
|
35
|
+
declare const FOWT_SCRIPT: string;
|
|
36
|
+
|
|
37
|
+
export { FOWT_SCRIPT, type FowtOptions, generateFowtScript };
|
package/dist/fowt.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// src/fowt.ts
|
|
2
|
+
function generateFowtScript(options) {
|
|
3
|
+
const key = options?.storageKey ?? "visor-theme";
|
|
4
|
+
const defaultCheck = options?.defaultTheme === "dark" ? "true" : options?.defaultTheme === "light" ? "false" : 'window.matchMedia("(prefers-color-scheme: dark)").matches';
|
|
5
|
+
return [
|
|
6
|
+
"(function() {",
|
|
7
|
+
" try {",
|
|
8
|
+
` var t = localStorage.getItem("${key}");`,
|
|
9
|
+
" var d = document.documentElement;",
|
|
10
|
+
` if (t === "dark" || (!t && ${defaultCheck})) {`,
|
|
11
|
+
' d.classList.add("dark");',
|
|
12
|
+
" } else {",
|
|
13
|
+
' d.classList.add("light");',
|
|
14
|
+
" }",
|
|
15
|
+
" } catch(e) {}",
|
|
16
|
+
"})();"
|
|
17
|
+
].join("\n");
|
|
18
|
+
}
|
|
19
|
+
var FOWT_SCRIPT = generateFowtScript();
|
|
20
|
+
export {
|
|
21
|
+
FOWT_SCRIPT,
|
|
22
|
+
generateFowtScript
|
|
23
|
+
};
|