feat: dark mode (#7)

* feat: basic dark mode * feat: theme toggle * Completed dark mode and about page changes * Fix progressive blur on dark mode * feat: dynadark tailwind plugin for dark detection --------- Co-authored-by: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
2024-11-13 19:33:16 +00:00 · 2024-11-13 19:33:16 +00:00 · cbef8dae0b
parent 3568ecf29b
commit cbef8dae0b
15 changed files with 213 additions and 32 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+	"css.customData": [".vscode/tailwind.json"]
+}
--- a/.vscode/tailwind.json
+++ b/.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"
+				}
+			]
+		}
+	]
+}
--- a/package.json
+++ b/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",
@ -41,6 +42,7 @@
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.456.0",
 		"svelte-adapter-bun": "^0.5.2",
+		"typescript-cookie": "^1.0.6",
 		"wasm-vips": "^0.0.11"
 	}
 }
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="%theme%">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/app.scss
+++ b/src/app.scss
@ -1,24 +1,16 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@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,50 @@
 	);
 }

+@mixin light {
+	--accent-bg: hsl(303, 73%, 81%);
+	--accent-fg: hsl(0, 0, 10%);
+	--bg: hsl(0, 0%, 100%);
+	--bg-transparent: hsla(0, 0%, 100%, 0.6);
+	--fg: hsl(0, 0%, 10%);
+	--fg-muted: hsl(0, 0%, 50%);
+	--fg-muted-alt: hsl(0, 0%, 75%);
+	--fg-highlight: hsl(303, 61%, 47%);
+	--fg-failure: hsl(0, 67%, 49%);
+}
+
+@mixin dark {
+	--accent-bg: hsl(304, 41%, 21%);
+	--accent-fg: hsl(303, 73%, 81%);
+	--bg: hsl(0, 0%, 8%);
+	--bg-transparent: hsla(0, 0%, 8%, 0.8);
+	--fg: hsl(0, 0%, 90%);
+	--fg-muted: hsl(0, 0%, 50%);
+	--fg-muted-alt: hsl(0, 0%, 25%);
+	--fg-highlight: hsl(303, 64%, 65%);
+	--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;
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -0,0 +1,9 @@
+import type { Handle } from "@sveltejs/kit";
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const theme = event.cookies.get("theme") ?? "";
+	const res = await resolve(event, {
+		transformPageChunk: ({ html }) => html.replace("%theme%", theme),
+	});
+	return res;
+};
--- a/src/lib/components/functional/FancyMenu.svelte
+++ b/src/lib/components/functional/FancyMenu.svelte
@ -38,7 +38,7 @@
 	{/if}
 	{#each links as { name, url } (url)}
 		<a
-			class="w-1/2 px-2 h-[calc(100%-16px)] mt-2 flex items-center justify-center rounded-xl relative font-display overflow-hidden"
+			class="w-1/2 px-2 h-[calc(100%-16px)] mt-2 flex items-center justify-center rounded-xl relative overflow-hidden font-medium"
 			href={url}
 			onclick={() => {
 				if (shouldGoBack) {
@ -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 invert dynadark:invert-0 col-start-1 row-start-1 text-center"
 						in:fly={{
 							duration,
 							easing: quintOut,
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@ -17,4 +17,13 @@ class Files {
 	);
 }

+class Theme {
+	public dark = $state(false);
+	public toggle = () => {
+		this.dark = !this.dark;
+		console.log(this.dark);
+	};
+}
+
 export const files = new Files();
+export const theme = new Theme();
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,14 +1,17 @@
 <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";
 	import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
 	import { writable } from "svelte/store";
+	import { SunIcon } from "lucide-svelte";
+	import { browser } from "$app/environment";
+	import { setCookie } from "typescript-cookie";
 	let { children, data } = $props();

 	let shouldGoBack = writable(false);
@ -46,6 +49,23 @@
 			goto("/");
 		}
 	};
+
+	$effect(() => {
+		if (!browser) return;
+		if (theme.dark) {
+			document.body.classList.add("dark");
+			document.body.classList.remove("light");
+			setCookie("theme", "dark", {
+				sameSite: "strict",
+			});
+		} else {
+			document.body.classList.add("light");
+			document.body.classList.remove("dark");
+			setCookie("theme", "light", {
+				sameSite: "strict",
+			});
+		}
+	});
 </script>

 <svelte:head>
@ -68,7 +88,7 @@
 	<div class="flex justify-center mb-5 lg:hidden">
 		<a
 			href="/"
-			class="px-6 relative h-16 mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:hidden flex"
+			class="px-4 relative h-14 mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:hidden flex"
 		>
 			<div class="h-6 w-24 items-center flex justify-center">
 				<Logo />
@ -91,6 +111,11 @@
 		</div>

 		<FancyMenu {links} {shouldGoBack} />
+		<div class="h-16 px-4 flex items-center">
+			<button onclick={theme.toggle}>
+				<SunIcon />
+			</button>
+		</div>
 	</div>
 	<div class="w-full max-w-screen-lg grid grid-cols-1 grid-rows-1 relative">
 		{#key data.pathname}
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@ -0,0 +1,16 @@
+import { browser } from "$app/environment";
+import { theme } from "$lib/store/index.svelte";
+import { getCookie, setCookie } from "typescript-cookie";
+
+export const load = ({ data }) => {
+	if (!browser) return;
+	const themeStr = getCookie("theme");
+	if (typeof themeStr === "undefined") {
+		theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+		setCookie("theme", theme.dark ? "dark" : "light");
+	} else {
+		theme.dark = themeStr === "dark";
+	}
+	theme.dark = getCookie("theme") === "dark";
+	return data;
+};
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -83,10 +83,12 @@

 <div class="[@media(max-height:768px)]:block mt-10 picker-fly">
 	<Uploader
-		isMobile={data.isMobile}
+		isMobile={data.isMobile || false}
 		bind:files={ourFiles}
 		onupload={runUpload}
-		acceptedFormats={[...new Set(converters.flatMap((c) => c.supportedFormats))]}
+		acceptedFormats={[
+			...new Set(converters.flatMap((c) => c.supportedFormats)),
+		]}
 	/>
 </div>

--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -63,18 +63,28 @@
 		class="font-display text-3xl mt-12 text-transition"
 		style="--delay: {5 * multiplier}ms"
 	>
-		👨‍💻 source code
+		🔗 resources
 	</h2>
-	<p class="mt-6 text-transition" style="--delay: {6 * multiplier}ms">
-		VERT is licensed under AGPL-3.0, and the source code can be found on <a
-			class="hover:underline font-medium text-foreground-highlight"
-			href="https://github.com/not-nullptr/VERT">GitHub</a
-		>.
-	</p>
+	<ul class="list-disc list-inside mt-6">
+		<li class="text-transition" style="--delay: {6 * multiplier}ms">
+			<a
+				href="https://github.com/notnullptr/VERT"
+				class="text-foreground-highlight hover:underline">Source code</a
+			> (hosted on GitHub, licensed under AGPL-3.0)
+		</li>
+
+		<li class="text-transition" style="--delay: {7 * multiplier}ms">
+			<a
+				href="https://discord.gg/8XXZ7TFFrK"
+				class="text-foreground-highlight hover:underline"
+				>Discord server</a
+			> (for chit-chat, suggestions, and support)
+		</li>
+	</ul>

 	<h2
 		class="font-display text-3xl mt-12 text-transition"
-		style="--delay: {7 * multiplier}ms"
+		style="--delay: {8 * multiplier}ms"
 	>
 		🎨 credits
 	</h2>
@ -83,7 +93,7 @@
 			<div class="hover:scale-105 w-56 transition-transform">
 				<div
 					class="border-2 credit-transition border-solid border-foreground-muted-alt rounded-2xl overflow-hidden"
-					style="--delay: {i * 50 + multiplier * 8}ms;"
+					style="--delay: {i * 50 + multiplier * 9}ms;"
 				>
 					<a class="w-48" href={credit.url} target="_blank">
 						<img src={credit.avatar} alt="{credit.name}'s avatar" />
@ -101,7 +111,7 @@

 	<p
 		class="text-foreground-muted text-base mt-10 text-transition"
-		style="--delay: {9 * multiplier}ms"
+		style="--delay: {10 * multiplier}ms"
 	>
 		(obviously inspired by <a
 			href="https://cobalt.tools"
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@ -376,7 +376,7 @@
 										direction={isSm ? "bottom" : "right"}
 										endIntensity={128}
 										iterations={6}
-										fadeTo="rgba(255, 255, 255, 0.6)"
+										fadeTo="var(--bg-transparent)"
 									/>
 								</div>
 							</div>
--- a/tailwind.config.ts
+++ b/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,12 @@ export default {
 		},
 	},

-	plugins: [],
+	plugins: [
+		plugin(function ({ addVariant }) {
+			addVariant("dynadark", [
+				"body:not(.light).dark &",
+				"@media (prefers-color-scheme: dark) { body:not(.light) &",
+			]);
+		}),
+	],
 } satisfies Config;
--- a/vite.config.ts
+++ b/vite.config.ts
@ -26,4 +26,11 @@ export default defineConfig({
 			"@ffmpeg/util",
 		],
 	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: "modern",
+			},
+		},
+	},
 });