feat: basic dark mode

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"css.customData": [".vscode/tailwind.json"]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+	"version": 1.1,
+	"atDirectives": [
+		{
+			"name": "@tailwind",
+			"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+				}
+			]
+		},
+		{
+			"name": "@apply",
+			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+				}
+			]
+		},
+		{
+			"name": "@responsive",
+			"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+				}
+			]
+		},
+		{
+			"name": "@screen",
+			"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+				}
+			]
+		},
+		{
+			"name": "@variants",
+			"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+				}
+			]
+		}
+	]
+}

package.json

@@ -24,6 +24,7 @@
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
+		"sass": "^1.80.7",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.9",

src/app.scss

@@ -1,24 +1,16 @@
-@import "tailwindcss/base";
+@tailwind base;
-@import "tailwindcss/components";
+@tailwind components;
-@import "tailwindcss/utilities";
+@tailwind utilities;
 
 @import url(@fontsource/lexend/400.css);
 @import url(@fontsource/lexend/500.css);
 @import url(@fontsource/azeret-mono/600.css);
 
 :root {
-	--accent-bg: hsl(303, 73%, 81%);
-	--accent-fg: hsl(0, 0, 10%);
 	--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
 		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
 		"Helvetica Neue", sans-serif;
 	--font-display: "Azeret Mono", var(--font-body);
-	--bg: hsl(0, 0%, 100%);
-	--fg: hsl(0, 0%, 10%);
-	--fg-muted: hsl(0, 0%, 50%);
-	--fg-muted-alt: hsl(0, 0%, 75%);
-	--fg-highlight: hsl(303, 52%, 42%);
-	--fg-failure: hsl(0, 67%, 49%);
 	--transition: linear(
 		0,
 		0.006,
@@ -37,6 +29,48 @@
 	);
 }
 
+@mixin light {
+	--accent-bg: hsl(303, 73%, 81%);
+	--accent-fg: hsl(0, 0, 10%);
+	--bg: hsl(0, 0%, 100%);
+	--fg: hsl(0, 0%, 10%);
+	--fg-muted: hsl(0, 0%, 50%);
+	--fg-muted-alt: hsl(0, 0%, 75%);
+	--fg-highlight: hsl(303, 52%, 42%);
+	--fg-failure: hsl(0, 67%, 49%);
+}
+
+@mixin dark {
+	--accent-bg: hsl(303, 73%, 35%);
+	--accent-fg: hsl(0, 0%, 90%);
+	--bg: hsl(0, 0%, 10%);
+	--fg: hsl(0, 0%, 90%);
+	--fg-muted: hsl(0, 0%, 65%);
+	--fg-muted-alt: hsl(0, 0%, 50%);
+	--fg-highlight: hsl(303, 52%, 60%);
+	--fg-failure: hsl(0, 67%, 80%);
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		@include dark;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	body {
+		@include light;
+	}
+}
+
+body.light {
+	@include light;
+}
+
+body.dark {
+	@include dark;
+}
+
 body {
 	@apply text-foreground bg-background font-body overflow-x-hidden;
 	width: 100vw;

src/lib/components/functional/FancyMenu.svelte

@@ -55,7 +55,7 @@
 			<div class="grid grid-cols-1 grid-rows-1">
 				{#key name}
 					<span
-						class="mix-blend-difference invert col-start-1 row-start-1 text-center"
+						class="mix-blend-difference light:invert dark:invert-0 col-start-1 row-start-1 text-center"
 						in:fly={{
 							duration,
 							easing: quintOut,

src/lib/store/index.svelte.ts

@@ -17,4 +17,12 @@ class Files {
 	);
 }
 
+class Theme {
+	public dark = $state(false);
+	public toggle = () => {
+		this.dark = !this.dark;
+	};
+}
+
 export const files = new Files();
+export const theme = new Theme();

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import "../app.css";
+	import "../app.scss";
 	import { goto } from "$app/navigation";
 	import { blur, duration } from "$lib/animation";
 	import { quintOut } from "svelte/easing";
-	import { files } from "$lib/store/index.svelte";
+	import { files, theme } from "$lib/store/index.svelte";
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
 	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";

tailwind.config.ts

@@ -1,8 +1,8 @@
 import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
 
 export default {
 	content: ["./src/**/*.{html,js,svelte,ts}"],
-
 	theme: {
 		extend: {
 			colors: {
@@ -25,5 +25,16 @@ export default {
 		},
 	},
 
-	plugins: [],
+	plugins: [
+		plugin(function ({ addVariant }) {
+			addVariant("dark", [
+				"body.dark &",
+				"@media (prefers-color-scheme: dark)",
+			]);
+			addVariant("light", [
+				"body.light &",
+				"@media (prefers-color-scheme: light)",
+			]);
+		}),
+	],
 } satisfies Config;

vite.config.ts

@@ -26,4 +26,11 @@ export default defineConfig({
 			"@ffmpeg/util",
 		],
 	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: "modern",
+			},
+		},
+	},
 });