version 2 of my website
1{
2 "Starwind UI Theme Toggle": {
3 "prefix": "starwind-theme-toggle",
4 "description": "Starwind UI theme initialization script for the document head",
5 "scope": "astro,typescript",
6 "body": [
7 "<script is:inline>",
8 " function initTheme() {",
9 " const colorTheme = localStorage.getItem(\"colorTheme\");",
10 " if (!colorTheme) {",
11 " if (window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches) {",
12 " document.documentElement.classList.add(\"dark\");",
13 " localStorage.setItem(\"colorTheme\", \"dark\");",
14 " } else {",
15 " document.documentElement.classList.remove(\"dark\");",
16 " localStorage.setItem(\"colorTheme\", \"light\");",
17 " }",
18 " } else {",
19 " if (colorTheme === \"dark\") {",
20 " document.documentElement.classList.add(\"dark\");",
21 " } else if (colorTheme === \"light\") {",
22 " document.documentElement.classList.remove(\"dark\");",
23 " } else if (colorTheme === \"system\") {",
24 " const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;",
25 " document.documentElement.classList.toggle(\"dark\", prefersDark);",
26 " }",
27 " }",
28 " }",
29 "",
30 " initTheme();",
31 " document.addEventListener(\"astro:after-swap\", initTheme);",
32 "</script>"
33 ]
34 }
35}