Better dark mode

sites/svelte.dev/src/routes/+page.svelte

@@ -43,7 +43,7 @@
 			<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
 		</div>
 
-		<div class="description" slot="what">
+		<div class="description" slot="four">
 			<p>
 				Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue
 				do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a
@@ -72,7 +72,7 @@
 			</p>
 		</div>
 
-		<div slot="how">
+		<div slot="five">
 			<pre><code
 					>npm create svelte@latest myapp
 cd myapp
@@ -131,9 +131,9 @@ npm run dev
 		display: block;
 	}
 
-	@media (min-width: 900px) {
+	/* @media (min-width: 900px) {
 		.blurb-shifter {
 			margin-top: -12em;
 		}
-	}
+	} */
 </style>

sites/svelte.dev/src/routes/_components/Demo.svelte

@@ -6,26 +6,24 @@
 		{
 			id: 'hello-world',
 			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.'
+			description: 'Svelte components are built on top of HTML. Just add data.',
 		},
 		{
 			id: 'nested-components',
 			title: 'Scoped CSS',
 			description:
-				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.'
+				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.',
 		},
 		{
 			id: 'reactive-assignments',
 			title: 'Reactivity',
-			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
+			description: 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
-			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
-		}
+			description: 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
+		},
 	];
 
 	let selected = examples[0];
@@ -105,7 +103,7 @@
 
 	button.selected {
 		background-color: white;
-		color: var(--text);
+		color: var(--sk-back-1);
 	}
 
 	.small-show {

sites/svelte.dev/src/routes/_components/Hero.svelte

@@ -26,7 +26,7 @@
 		max-width: 10em;
 		text-transform: uppercase;
 		font-weight: 700;
-		color: var(--second);
+		color: var(--sk-text-2);
 		letter-spacing: 0.05em;
 		left: max(var(--side-nav), 10%);
 		top: 25%;
@@ -66,4 +66,25 @@
 			left: calc(50% - 56rem + var(--side-nav));
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.hero {
+			background: 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%));
+		}
+
+		.logotype {
+			filter: invert(4) brightness(1.2);
+		}
+	}
 </style>