feat: (Attempt 1) Dark mode compatibility (#83)

* Push

* Add changeset

* Move dependencies to devDependencies

* Build theme switcher into navbar

* Change navigation items logic

* Remove explicit width from nav items

* Enter prerelease mode

* Change set

.changeset/funny-bears-teach.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/site-kit': major
+---
+
+Dark mode toggle, dark mode styles changed as well
+
+This is a breaking change because svelte.dev and kit.svelte.dev rely on variables changing based on `@media (prefers-color-scheme: dark)`, and the variables belonging to `:root` rather than `body`

.changeset/pre.json

@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@sveltejs/site-kit": "3.4.0"
+  },
+  "changesets": []
+}

packages/site-kit/package.json

@@ -24,6 +24,7 @@
 		"@sveltejs/package": "^1.0.2",
 		"flexsearch": "^0.7.31",
 		"svelte": "^3.55.1",
+		"svelte-local-storage-store": "^0.4.0",
 		"typescript": "^4.9.5",
 		"vite": "^4.0.4"
 	},
@@ -32,7 +33,7 @@
 		"directory": "package"
 	},
 	"peerDependencies": {
-		"svelte": "^3.54.0",
-		"@sveltejs/kit": "^1.0.0"
+		"@sveltejs/kit": "^1.0.0",
+		"svelte": "^3.54.0"
 	}
 }

packages/site-kit/src/lib/components/Nav.svelte

@@ -3,7 +3,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 -->
 <script>
 	import { page } from '$app/stores';
+	import { ThemeToggle } from '$lib/theme';
 	import Icon from './Icon.svelte';
+	import Separator from './Separator.svelte';
 
 	/** @type {string} */
 	export let logo;
@@ -12,6 +14,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	let open = false;
 	let visible = true;
+
 	/** @type {HTMLElement} */
 	let nav;
 
@@ -65,7 +68,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	<button
 		aria-label="Toggle menu"
-		aria-expanded={open.toString()}
+		aria-expanded={open}
 		class="menu-toggle"
 		class:open
 		on:click={() => (open = !open)}
@@ -79,6 +82,13 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	<ul class="external">
 		<slot name="nav-right" />
+
+		<Separator />
+
+		<div class="appearance">
+			<span class="caption">Color Scheme</span>
+			<ThemeToggle />
+		</div>
 	</ul>
 </nav>
 
@@ -147,7 +157,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	.home {
-		width: 30rem;
 		height: var(--sk-nav-height);
 		display: flex;
 		text-indent: -9999px;
@@ -163,6 +172,21 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		line-height: 1;
 	}
 
+	.appearance {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		margin-left: 0.75rem;
+		transform: translateY(2px);
+	}
+
+	.appearance .caption {
+		display: none;
+		font-size: var(--sk-text-xs);
+		line-height: 1;
+		margin-right: 0.5rem;
+	}
+
 	@media (max-width: 800px) {
 		ul {
 			position: relative;
@@ -199,6 +223,19 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			bottom: calc(-1 * var(--shadow-height));
 			background: var(--shadow-gradient);
 		}
+
+		.appearance {
+			justify-content: space-between;
+			align-items: center;
+			margin: 10px 0 0;
+			padding: 1rem 0.75rem;
+			background: var(--sk-back-3);
+			border-radius: 0.5rem;
+		}
+
+		.appearance .caption {
+			display: block;
+		}
 	}
 
 	@media (min-width: 800px) {
@@ -207,9 +244,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 
 		nav {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+			display: grid;
+			grid-template-columns: 1fr auto 1fr;
+			/* align-items: center; */
+			/* justify-content: space-between; */
 		}
 
 		ul {
@@ -230,7 +268,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 
 		ul.external {
-			width: 30rem;
 			padding: 0 var(--sk-page-padding-side) 0 0;
 			justify-content: end;
 		}

packages/site-kit/src/lib/styles/base.css

@@ -12,7 +12,7 @@ body {
 	font-family: var(--sk-font);
 	line-height: 1.5;
 	color: var(--sk-text-2);
-	background-color: var(--back);
+	background-color: var(--sk-back-1);
 	width: 100%;
 	tab-size: 2;
 	-moz-tab-size: 2;

packages/site-kit/src/lib/styles/code.css

@@ -1,6 +1,6 @@
 @import './base.css';
 
-:root {
+body {
 	--shiki-color-text: var(--sk-code-base);
 	--shiki-color-background: var(--sk-back-3);
 	--shiki-token-constant: var(--sk-code-base);

packages/site-kit/src/lib/styles/tokens.css

@@ -1,4 +1,6 @@
-:root {
+body,
+body.light,
+body.dark {
 	/* colors */
 	--sk-back-h: 206;
 	--sk-back-3-hsl: 206, 64%, 98%;
@@ -62,62 +64,66 @@
 }
 
 @media screen and (min-width: 480px) {
-	:root {
+	body,
+	body.light,
+	body.dark {
 		--sk-page-padding-side: 3.2rem;
 	}
 }
 
 @media screen and (min-width: 768px) {
-	:root {
+	body,
+	body.light,
+	body.dark {
 		--sk-text-xxl: 5.4rem;
 		--sk-text-xl: 3.6rem;
 		--sk-page-padding-top: 8rem;
 		--sk-page-padding-side: 4.8rem;
 	}
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		/* TODO create tokens for all the ad-hoc styles used on the site, so we can offer dark mode */
-		--sk-back-1: hsl(0, 0%, 10%);
-		--sk-back-2: hsl(0, 0%, 18%);
-		/* --sk-back-3: hsl(0, 0%, 20%); */
-		--sk-back-4: hsl(0, 0%, 22%);
-		--sk-back-5: hsl(0, 0%, 40%);
-		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
-		--sk-theme-1: hsl(15, 100%, 55%);
-		--sk-theme-2: hsl(240, 8%, 44%);
-		--sk-theme-3: hsl(204, 100%, 63%);
-		--sk-text-1: hsl(0, 0%, 90%);
-		--sk-text-2: hsl(0, 0%, 80%);
-		--sk-text-3: hsl(0, 0%, 65%);
-		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
-		--sk-scrollbar: rgba(255, 255, 255, 0.3);
-
-		--sk-back-3-hsl: 0, 0%, 14%;
-		--sk-theme-1-variant: hsl(15, 100%, 40%);
-		--sk-theme-2-variant: hsl(240, 8%, 35%);
-		--sk-theme-3-variant: hsl(204, 100%, 50%);
-
-		--sk-code-ts-bg: var(--sk-back-2);
-		--sk-code-bg: var(--sk-back-3);
-		--sk-code-base: hsl(45, 7%, 75%);
-		--sk-code-comment: hsl(0, 0%, 51%);
-		--sk-code-keyword: hsl(204, 88%, 65%);
-		--sk-code-function: hsl(19, 67%, 75%);
-		--sk-code-string: hsl(41, 37%, 68%);
-		--sk-code-number: hsl(120, 100%, 25%);
-		--sk-code-template-string: hsl(2, 80%, 47%);
-		--sk-code-tags: var(--code-function);
-		--sk-code-important: var(--code-string);
-		--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
-		--sk-code-diff-inserted: hsl(120, 46%, 48%);
-		--sk-code-diff-removed: hsl(2, 64%, 52%);
-	}
+body.dark {
+	/* TODO create tokens for all the ad-hoc styles used on the site, so we can offer dark mode */
+	--sk-back-1: hsl(0, 0%, 10%);
+	--sk-back-2: hsl(0, 0%, 18%);
+	/* --sk-back-3: hsl(0, 0%, 20%); */
+	--sk-back-4: hsl(0, 0%, 22%);
+	--sk-back-5: hsl(0, 0%, 40%);
+	--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
+	--sk-theme-1: hsl(15, 100%, 55%);
+	--sk-theme-2: hsl(240, 8%, 44%);
+	--sk-theme-3: hsl(204, 100%, 63%);
+	--sk-text-1: hsl(0, 0%, 90%);
+	--sk-text-2: hsl(0, 0%, 80%);
+	--sk-text-3: hsl(0, 0%, 65%);
+	--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
+	--sk-scrollbar: rgba(255, 255, 255, 0.3);
+
+	--sk-back-3-hsl: 0, 0%, 14%;
+	--sk-theme-1-variant: hsl(15, 100%, 40%);
+	--sk-theme-2-variant: hsl(240, 8%, 35%);
+	--sk-theme-3-variant: hsl(204, 100%, 50%);
+
+	--sk-code-ts-bg: var(--sk-back-2);
+	--sk-code-bg: var(--sk-back-3);
+	--sk-code-base: hsl(45, 7%, 75%);
+	--sk-code-comment: hsl(0, 0%, 51%);
+	--sk-code-keyword: hsl(204, 88%, 65%);
+	--sk-code-function: hsl(19, 67%, 75%);
+	--sk-code-string: hsl(41, 37%, 68%);
+	--sk-code-number: hsl(120, 100%, 25%);
+	--sk-code-template-string: hsl(2, 80%, 47%);
+	--sk-code-tags: var(--code-function);
+	--sk-code-important: var(--code-string);
+	--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
+	--sk-code-diff-inserted: hsl(120, 46%, 48%);
+	--sk-code-diff-removed: hsl(2, 64%, 52%);
 }
 
 /* legacy — existing site-kit uses these, and upgrading svelte.dev will be easier if we keep them around for now */
-:root {
+body,
+body.light,
+body.dark {
 	/* colors */
 	--back: var(--sk-back-1);
 	--back-light: var(--sk-back-3);