feat: Proper dark mode (#8274)

* Push

* Update svelte REPL

* Light mode fixes

* Fox height issues

* Moar dark mode fixes

* More changes

* Fix zen mode height issue

Author: PuruVJ

sites/svelte.dev/package-lock.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.7.1",
-    "@sveltejs/repl": "0.0.3",
+    "@sveltejs/repl": "^0.1.2",
     "cookie": "^0.5.0",
     "devalue": "^4.2.3",
     "do-not-zip": "^1.0.0",

sites/svelte.dev/package.json

@@ -1,7 +1,6 @@
 // REPL props
 
 export const svelteUrl = `https://unpkg.com/svelte@3`;
-export const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
 export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
 	import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
 }';`;

sites/svelte.dev/src/config.js

@@ -41,7 +41,7 @@
 
 	afterNavigate(() => {
 		repl.set({
-			components: data.gist.components
+			components: data.gist.components,
 		});
 	});
 

sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte

@@ -243,8 +243,8 @@ export default app;`,
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--side-nav);
-		background-color: var(--second);
-		color: white;
+		background-color: var(--sk-back-4);
+		color: var(--sk-text-1);
 		white-space: nowrap;
 		flex: 0;
 	}
@@ -256,9 +256,9 @@ export default app;`,
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
-		color: white;
+		color: var(--sk-text-1);
 		/* width: 1.6em;
 		height: 1.6em; */
 		line-height: 1;
@@ -280,7 +280,7 @@ export default app;`,
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		outline: none;

sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte

@@ -52,6 +52,10 @@
 </main>
 
 <style>
+	:global(:root) {
+		color-scheme: light dark;
+	}
+
 	@media (max-width: 830px) {
 		:global(aside) {
 			z-index: 9999 !important;
@@ -84,26 +88,22 @@
 		}
 	}
 
-	/** Ukraine banner */
-	:root {
-		--ukr-footer-height: 48px;
+	:global(html, body) {
+		height: 100%;
+		width: 100%;
 	}
 
-	main {
-		padding-bottom: var(--ukr-footer-height);
-	}
-
-	:global(.examples-container, .repl-outer, .tutorial-outer) {
+	/* :global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
-	}
+	} */
 
 	:global(.toggle) {
 		bottom: var(--ukr-footer-height) !important;
 	}
 
-	:global(.zen-mode) {
+	/* :global(.zen-mode) {
 		height: calc(100vh - var(--ukr-footer-height)) !important;
-	}
+	} */
 
 	@media (max-width: 830px) {
 		:global(aside) {

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

@@ -17,12 +17,14 @@
 		{
 			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.',
 		},
 	];
 
@@ -102,8 +104,8 @@
 	}
 
 	button.selected {
-		background-color: white;
-		color: var(--sk-back-1);
+		background-color: var(--sk-back-1);
+		color: var(--sk-text-2);
 	}
 
 	.small-show {

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

@@ -5,7 +5,7 @@
 <style>
 	section {
 		padding: 10rem 0;
-		background: var(--background, white);
+		background: var(--background, var(--sk-back-2));
 	}
 
 	.inner {

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

@@ -4,9 +4,7 @@
 	import donors from './donors.js';
 </script>
 
-<Section
-	--background="radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247))"
->
+<Section>
 	<p class="intro">
 		Svelte is free and open source software, made possible by the work of hundreds of supporters.
 	</p>
@@ -50,7 +48,7 @@
 
 <style>
 	h3 {
-		color: var(--text);
+		color: var(--sk-text-2);
 	}
 
 	.intro {
@@ -112,7 +110,7 @@
 		}
 
 		.intro {
-			font-size: var(--h3);
+			font-size: var(--sk-text-m);
 		}
 
 		h3 {

sites/svelte.dev/src/routes/_components/Supporters/index.svelte

@@ -35,7 +35,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 0;
-		color: var(--text);
+		color: var(--sk-text-2);
 		filter: grayscale(1) contrast(4) opacity(0.4) invert(var(--invert, 0));
 		grid-column: span 2;
 	}
@@ -73,4 +73,11 @@
 			--row-size: 5;
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		a {
+			--invert: 1;
+			filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
+		}
+	}
 </style>