Thomas G. Lopes
commited on
Commit
·
288702f
1
Parent(s):
fcc4521
fix color scheme FOUC & listener
Browse files- package.json +2 -1
- pnpm-lock.yaml +13 -0
- src/app.html +32 -0
- src/routes/+layout.svelte +2 -38
package.json
CHANGED
@@ -39,6 +39,7 @@
|
|
39 |
"@huggingface/hub": "^0.15.1",
|
40 |
"@huggingface/inference": "^2.7.0",
|
41 |
"@huggingface/tasks": "^0.10.22",
|
42 |
-
"@tailwindcss/container-queries": "^0.1.1"
|
|
|
43 |
}
|
44 |
}
|
|
|
39 |
"@huggingface/hub": "^0.15.1",
|
40 |
"@huggingface/inference": "^2.7.0",
|
41 |
"@huggingface/tasks": "^0.10.22",
|
42 |
+
"@tailwindcss/container-queries": "^0.1.1",
|
43 |
+
"runed": "^0.23.4"
|
44 |
}
|
45 |
}
|
pnpm-lock.yaml
CHANGED
@@ -20,6 +20,9 @@ importers:
|
|
20 |
'@tailwindcss/container-queries':
|
21 |
specifier: ^0.1.1
|
22 |
version: 0.1.1([email protected])
|
|
|
|
|
|
|
23 |
devDependencies:
|
24 |
'@sveltejs/adapter-auto':
|
25 |
specifier: ^3.2.2
|
@@ -1392,6 +1395,11 @@ packages:
|
|
1392 | |
1393 |
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
1394 |
|
|
|
|
|
|
|
|
|
|
|
1395 | |
1396 |
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
|
1397 |
engines: {node: '>=6'}
|
@@ -2836,6 +2844,11 @@ snapshots:
|
|
2836 |
dependencies:
|
2837 |
queue-microtask: 1.2.3
|
2838 |
|
|
|
|
|
|
|
|
|
|
|
2839 | |
2840 |
dependencies:
|
2841 |
mri: 1.2.0
|
|
|
20 |
'@tailwindcss/container-queries':
|
21 |
specifier: ^0.1.1
|
22 |
version: 0.1.1([email protected])
|
23 |
+
runed:
|
24 |
+
specifier: ^0.23.4
|
25 |
+
version: 0.23.4([email protected])
|
26 |
devDependencies:
|
27 |
'@sveltejs/adapter-auto':
|
28 |
specifier: ^3.2.2
|
|
|
1395 | |
1396 |
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
1397 |
|
1398 | |
1399 |
+
resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
|
1400 |
+
peerDependencies:
|
1401 |
+
svelte: ^5.7.0
|
1402 |
+
|
1403 | |
1404 |
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
|
1405 |
engines: {node: '>=6'}
|
|
|
2844 |
dependencies:
|
2845 |
queue-microtask: 1.2.3
|
2846 |
|
2847 | |
2848 |
+
dependencies:
|
2849 |
+
esm-env: 1.2.2
|
2850 |
+
svelte: 5.22.1
|
2851 |
+
|
2852 | |
2853 |
dependencies:
|
2854 |
mri: 1.2.0
|
src/app.html
CHANGED
@@ -6,7 +6,39 @@
|
|
6 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
7 |
%sveltekit.head%
|
8 |
</head>
|
|
|
9 |
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
10 |
<div style="display: contents">%sveltekit.body%</div>
|
11 |
</body>
|
12 |
</html>
|
|
|
6 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
7 |
%sveltekit.head%
|
8 |
</head>
|
9 |
+
|
10 |
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
|
11 |
+
<script>
|
12 |
+
(function () {
|
13 |
+
// Get theme from URL search params
|
14 |
+
const urlParams = new URLSearchParams(window.location.search);
|
15 |
+
const theme = urlParams.get("__theme");
|
16 |
+
|
17 |
+
// Check system preferences
|
18 |
+
let systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
19 |
+
|
20 |
+
// Update theme based on params or system preference
|
21 |
+
function updateTheme() {
|
22 |
+
if (theme === "dark" || (theme === "system" && systemPrefersDark)) {
|
23 |
+
document.body.classList.add("dark");
|
24 |
+
} else if (theme === "light" || (theme === "system" && !systemPrefersDark)) {
|
25 |
+
document.body.classList.remove("dark");
|
26 |
+
} else if (theme === null || theme === undefined) {
|
27 |
+
// Default behavior if no theme specified
|
28 |
+
systemPrefersDark ? document.body.classList.add("dark") : document.body.classList.remove("dark");
|
29 |
+
}
|
30 |
+
}
|
31 |
+
|
32 |
+
// Initial theme update
|
33 |
+
updateTheme();
|
34 |
+
|
35 |
+
// Listen for system preference changes
|
36 |
+
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
|
37 |
+
systemPrefersDark = event.matches;
|
38 |
+
updateTheme();
|
39 |
+
});
|
40 |
+
})();
|
41 |
+
</script>
|
42 |
<div style="display: contents">%sveltekit.body%</div>
|
43 |
</body>
|
44 |
</html>
|
src/routes/+layout.svelte
CHANGED
@@ -1,43 +1,7 @@
|
|
1 |
<script lang="ts">
|
2 |
import "../app.css";
|
3 |
-
import { onMount } from "svelte";
|
4 |
-
import { browser } from "$app/environment";
|
5 |
-
import { page } from "$app/stores";
|
6 |
|
7 |
-
|
8 |
-
|
9 |
-
let systemPrefersDark = false;
|
10 |
-
|
11 |
-
function updateTheme(theme: Theme, systemPrefersDark: boolean) {
|
12 |
-
if (theme === "dark" || (theme === "system" && systemPrefersDark)) {
|
13 |
-
document.documentElement.classList.add("dark");
|
14 |
-
} else {
|
15 |
-
document.documentElement.classList.remove("dark");
|
16 |
-
}
|
17 |
-
}
|
18 |
-
|
19 |
-
$: if (browser) {
|
20 |
-
const theme = $page.url.searchParams.get("__theme") as Theme;
|
21 |
-
updateTheme(theme, systemPrefersDark);
|
22 |
-
}
|
23 |
-
|
24 |
-
onMount(() => {
|
25 |
-
if (browser) {
|
26 |
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
27 |
-
systemPrefersDark = mediaQuery.matches;
|
28 |
-
|
29 |
-
const handleChange = (event: MediaQueryListEvent) => {
|
30 |
-
systemPrefersDark = event.matches;
|
31 |
-
updateTheme($page.url.searchParams.get("__theme") as Theme, systemPrefersDark);
|
32 |
-
};
|
33 |
-
|
34 |
-
mediaQuery.addEventListener("change", handleChange);
|
35 |
-
|
36 |
-
return () => mediaQuery.removeEventListener("change", handleChange);
|
37 |
-
}
|
38 |
-
});
|
39 |
</script>
|
40 |
|
41 |
-
|
42 |
-
|
43 |
-
<style></style>
|
|
|
1 |
<script lang="ts">
|
2 |
import "../app.css";
|
|
|
|
|
|
|
3 |
|
4 |
+
const { children } = $props();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
5 |
</script>
|
6 |
|
7 |
+
{@render children()}
|
|
|
|