feat: use css media query for default theming (#1631)

Author: paoloricciuti

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -294,6 +294,12 @@
 	.icon:disabled {
 		color: #ccc;
 
+		:root:not(.light) & {
+			@media (prefers-color-scheme: dark) {
+				color: #555;
+			}
+		}
+
 		:root.dark & {
 			color: #555;
 		}

apps/svelte.dev/src/routes/_home/Hero.svelte

@@ -63,6 +63,23 @@
 				radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
 		}
 
+		:root:not(.light) &::before {
+			@media (prefers-color-scheme: dark) {
+				background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
+					radial-gradient(
+						64.14% 72.25% at 47.58% 31.75%,
+						hsl(209deg 6% 47% / 52%) 0%,
+						hsla(0, 0%, 100%, 0) 100%
+					),
+					linear-gradient(
+						92.4deg,
+						hsl(210, 7%, 16%) 14.67%,
+						hsl(0deg 0% 0% / 48%) 54.37%,
+						hsla(207, 22%, 13%, 0.62) 92.49%
+					),
+					linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
+			}
+		}
 		:root.dark &::before {
 			background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
 				radial-gradient(

apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte

@@ -42,6 +42,11 @@
 	.toc-container {
 		background: var(--sk-bg-2);
 		display: none;
+		:root:not(.light) & {
+			@media (prefers-color-scheme: dark) {
+				background: var(--sk-bg-0);
+			}
+		}
 
 		:root.dark & {
 			background: var(--sk-bg-0);

apps/svelte.dev/src/routes/packages/PackageCard.svelte

@@ -146,6 +146,12 @@
 
 		min-height: 16em;
 
+		:root:not(.light) & {
+			@media (prefers-color-scheme: dark) {
+				background-color: var(--sk-bg-3);
+			}
+		}
+
 		:root.dark & {
 			background-color: var(--sk-bg-3);
 		}
@@ -233,6 +239,13 @@
 			width: 3rem;
 			height: 3rem;
 
+			:root:not(.light) &[alt='drizzle logo'],
+			:root:not(.light) &[alt='paraglide logo'] {
+				@media (prefers-color-scheme: dark) {
+					filter: invert(1);
+				}
+			}
+
 			:root.dark &[alt='drizzle logo'],
 			:root.dark &[alt='paraglide logo'] {
 				filter: invert(1);

apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte

@@ -181,6 +181,14 @@
 		height: 10rem;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.loading {
+			--faded: #444;
+			--progress: #555;
+			--cutout: var(--sk-bg-2);
+		}
+	}
+
 	:global(.dark) .loading {
 		--faded: #444;
 		--progress: #555;

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

@@ -299,6 +299,11 @@
 					&.remove {
 						--color: rgba(255, 0, 0, 0.1);
 
+						:root:not(.light) & {
+							@media (prefers-color-scheme: dark) {
+								--color: rgba(255, 0, 0, 0.27);
+							}
+						}
 						:root.dark & {
 							--color: rgba(255, 0, 0, 0.27);
 						}

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

@@ -41,6 +41,11 @@
 	.icon {
 		mask-image: url(icons/theme-dark);
 		mask-size: 2rem;
+		:root:not(.light) & {
+			@media (prefers-color-scheme: dark) {
+				mask-image: url(icons/theme-light);
+			}
+		}
 
 		:root.dark & {
 			mask-image: url(icons/theme-light);

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

@@ -211,6 +211,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 		}
 
+		:root:not(.light) & {
+			@media (prefers-color-scheme: dark) {
+				background-color: var(--sk-bg-3);
+			}
+		}
 		:root.dark & {
 			background-color: var(--sk-bg-3);
 		}
@@ -342,6 +347,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				auto;
 			padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem);
 
+			:root:not(.light) & {
+				@media (prefers-color-scheme: dark) {
+					background-image: url(../branding/svelte-dark.svg);
+				}
+			}
+
 			:root.dark & {
 				background-image: url(../branding/svelte-dark.svg);
 			}

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

@@ -43,6 +43,44 @@
 	/* Misc */
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
 	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
+
+	&:not(.light) {
+		@media (prefers-color-scheme: dark) {
+			color-scheme: dark;
+
+			--sk-bg-hue: 220;
+
+			/* Foreground colours */
+			--sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%);
+			--sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%);
+			--sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%);
+			--sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%);
+			--sk-fg-accent: hsl(12, 94%, 62%);
+
+			/* Background colours */
+			--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */
+			--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
+			--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
+			--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
+			--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
+			--sk-bg-accent: hsl(15, 100%, 35%);
+			--sk-bg-highlight: hsl(60, 100%, 15%);
+
+			/* Border colour */
+			--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
+
+			/* Syntax highlighting */
+			--shiki-color-text: hsl(45, 7%, 75%);
+			--shiki-token-comment: hsl(0, 0%, 55%);
+			--shiki-token-keyword: hsl(204, 88%, 65%);
+			--shiki-token-function: hsl(19, 67%, 75%);
+			--shiki-token-string: hsl(41, 37%, 68%);
+
+			/* Misc */
+			--sk-scrollbar: rgba(255, 255, 255, 0.3);
+			--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
+		}
+	}
 }
 
 :root.dark {

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

@@ -49,6 +49,12 @@
 		}
 	}
 
+	&:not(.light) {
+		@media (prefers-color-scheme: dark) {
+			-webkit-font-smoothing: antialiased;
+		}
+	}
+
 	&.dark {
 		-webkit-font-smoothing: antialiased;
 	}