feat(svelte): add ThemeBox component

.eslintrc.json

@@ -4,10 +4,18 @@
 		"node": true,
 		"browser": true
 	},
-	"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:astro/recommended"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:prettier/recommended",
+		"plugin:astro/recommended",
+		"plugin:svelte/recommended"
+	],
 	"plugins": ["prettier", "astro"],
+	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
-		"sourceType": "module"
+		"sourceType": "module",
+		"project": "./tsconfig.json",
+		"extraFileExtensions": [".astro", ".svelte"]
 	},
 	"rules": {
 		"prettier/prettier": "error"
@@ -38,6 +46,13 @@
 			"rules": {
 				"prettier/prettier": "off"
 			}
+		},
+		{
+			"files": ["*.svelte"],
+			"parser": "svelte-eslint-parser",
+			"parserOptions": {
+				"parser": "@typescript-eslint/parser"
+			}
 		}
 	]
 }

.prettierrc.json

@@ -25,12 +25,6 @@
 			"options": {
 				"parser": "astro"
 			}
-		},
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
 		}
 	]
 }

package.json

@@ -31,6 +31,7 @@
 		"eslint-plugin-astro": "^0.23.0",
 		"eslint-plugin-jsx-a11y": "^6.7.1",
 		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-svelte": "^2.19.1",
 		"husky": "^8.0.0",
 		"lint-staged": "^13.1.1",
 		"prettier": "^2.8.4",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ specifiers:
   eslint-plugin-astro: ^0.23.0
   eslint-plugin-jsx-a11y: ^6.7.1
   eslint-plugin-prettier: ^4.2.1
+  eslint-plugin-svelte: ^2.19.1
   husky: ^8.0.0
   lint-staged: ^13.1.1
   postcss: ^8.4.21
@@ -49,6 +50,7 @@ devDependencies:
   eslint-plugin-astro: 0.23.0_eslint@8.34.0
   eslint-plugin-jsx-a11y: 6.7.1_eslint@8.34.0
   eslint-plugin-prettier: 4.2.1_u5wnrdwibbfomslmnramz52buy
+  eslint-plugin-svelte: 2.19.1_dbthnr4b2bdkhyiebwn7su3hnq
   husky: 8.0.3
   lint-staged: 13.1.1
   prettier: 2.8.4
@@ -2064,6 +2066,32 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
+  /eslint-plugin-svelte/2.19.1_dbthnr4b2bdkhyiebwn7su3hnq:
+    resolution: {integrity: sha512-pebC5+kWjKEg2HPFbnl7Ky+tC58DXhQthsUuSAcMLqunCsaXEDa/t6SQ5/zqkg4QI1EQucLacdzlTMMPkpl3FA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0-0
+      svelte: ^3.37.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+      debug: 4.3.4
+      eslint: 8.34.0
+      eslint-utils: 3.0.0_eslint@8.34.0
+      esutils: 2.0.3
+      known-css-properties: 0.27.0
+      postcss: 8.4.21
+      postcss-load-config: 3.1.4_postcss@8.4.21
+      postcss-safe-parser: 6.0.0_postcss@8.4.21
+      svelte: 3.55.1
+      svelte-eslint-parser: 0.23.0_svelte@3.55.1
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
+    dev: true
+
   /eslint-scope/7.1.1:
     resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3042,6 +3070,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /known-css-properties/0.27.0:
+    resolution: {integrity: sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==}
+    dev: true
+
   /language-subtag-registry/0.3.22:
     resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
     dev: true
@@ -4452,6 +4484,15 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-safe-parser/6.0.0_postcss@8.4.21:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      postcss: 8.4.21
+    dev: true
+
   /postcss-selector-parser/6.0.11:
     resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
     engines: {node: '>=4'}
@@ -5174,6 +5215,18 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svelte-eslint-parser/0.23.0_svelte@3.55.1:
+    resolution: {integrity: sha512-1BJBYGDzlhxmBvbx0ZXdwfPkEP+9sOn63ei6HgkWNNx/J1LH04Ykw+ZHx9Bf5Rh3zzZqjVvy23vmx+WIjCu7CA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      svelte: ^3.37.0
+    dependencies:
+      eslint-scope: 7.1.1
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.1
+      svelte: 3.55.1
+    dev: true
+
   /svelte-hmr/0.15.1_svelte@3.55.1:
     resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}

src/components/ThemeBox.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+
+	let observer;
+	let isDarkMode = false;
+
+	const checkDarkMode = () => {
+		isDarkMode = document.documentElement.classList.contains('dark');
+	};
+
+	onMount(() => {
+		checkDarkMode();
+
+		observer = new MutationObserver(() => {
+			checkDarkMode();
+		});
+
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class'],
+		});
+	});
+
+	onDestroy(() => {
+		observer.disconnect();
+	});
+</script>
+
+<div class={!isDarkMode && 'hidden'}>
+	<slot name="dark" />
+</div>
+<div class={isDarkMode && 'hidden'}>
+	<slot name="light" />
+</div>