From a957590da99a5c06a26287423ad03709ed0bb143 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Thu, 2 Feb 2023 00:01:52 +0530
Subject: [PATCH] Better dark mode

---
 sites/svelte.dev/src/routes/+page.svelte      |  8 +++----
 .../src/routes/_components/Demo.svelte        | 14 +++++------
 .../src/routes/_components/Hero.svelte        | 23 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index fe66490445..84d0a2dc66 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/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>
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index a8b27a4ac4..a113119660 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/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 {
diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte
index 907697c62d..324cb367c2 100644
--- a/sites/svelte.dev/src/routes/_components/Hero.svelte
+++ b/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>