Hugging Face's logo

Spaces:
huggingface
/
inf-playground-canvas
Runtime error

App Files Community
Thomas G. Lopes commited on
Commit
288702f
·
1 Parent(s): fcc4521

fix color scheme FOUC & listener

Browse files
Files changed (4) hide show
  1. package.json +2 -1
  2. pnpm-lock.yaml +13 -0
  3. src/app.html +32 -0
  4. 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(tailwindcss@3.4.17)
 
 
 
23
  devDependencies:
24
  '@sveltejs/adapter-auto':
25
  specifier: ^3.2.2
@@ -1392,6 +1395,11 @@ packages:
1392
  run-parallel@1.2.0:
1393
  resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
1394
 
 
 
 
 
 
1395
  sade@1.8.1:
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
  sade@1.8.1:
2840
  dependencies:
2841
  mri: 1.2.0
 
20
  '@tailwindcss/container-queries':
21
  specifier: ^0.1.1
22
  version: 0.1.1(tailwindcss@3.4.17)
23
+ runed:
24
+ specifier: ^0.23.4
25
+ version: 0.23.4(svelte@5.22.1)
26
  devDependencies:
27
  '@sveltejs/adapter-auto':
28
  specifier: ^3.2.2
 
1395
  run-parallel@1.2.0:
1396
  resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
1397
 
1398
+ runed@0.23.4:
1399
+ resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
1400
+ peerDependencies:
1401
+ svelte: ^5.7.0
1402
+
1403
  sade@1.8.1:
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
+ runed@0.23.4(svelte@5.22.1):
2848
+ dependencies:
2849
+ esm-env: 1.2.2
2850
+ svelte: 5.22.1
2851
+
2852
  sade@1.8.1:
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
- type Theme = "light" | "dark" | "system" | null | undefined;
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
- <slot></slot>
42
-
43
- <style></style>
 
1
  <script lang="ts">
2
  import "../app.css";
 
 
 
3
 
4
+ const { children } = $props();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </script>
6
 
7
+ {@render children()}