From 152cc22806bacaa3697282f60198010e3f85ea4a Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sat, 11 Feb 2023 03:09:34 +0530
Subject: [PATCH] Light mode fixes

---
 .../(authed)/repl/[id]/AppControls.svelte     | 10 ++++-----
 sites/svelte.dev/src/routes/+layout.svelte    |  9 ++++++++
 .../src/routes/_components/Demo.svelte        | 10 +++++----
 .../examples/[slug]/_TableOfContents.svelte   |  2 +-
 .../src/routes/tutorial/[slug]/+page.svelte   | 21 +++++++++++++------
 .../tutorial/[slug]/_TableOfContents.svelte   |  6 +++---
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index ab497bbf01..1a380f1f12 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.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;
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 0bcfd6a5f0..f5978a8b75 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -52,6 +52,10 @@
 </main>
 
 <style>
+	:global(:root) {
+		color-scheme: light dark;
+	}
+
 	@media (max-width: 830px) {
 		:global(aside) {
 			z-index: 9999 !important;
@@ -84,6 +88,11 @@
 		}
 	}
 
+	:global(html, body) {
+		height: 100%;
+		width: 100%;
+	}
+
 	:global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
 	}
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index a113119660..3dad67e71a 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/sites/svelte.dev/src/routes/_components/Demo.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 {
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
index d8760bb2e0..dc7d388740 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte
@@ -48,7 +48,7 @@
 		height: 100%;
 		border-right: 1px solid var(--sk-back-4);
 		background-color: var(--sk-back-4);
-		color: white;
+		color: var(--sk-text-2);
 		padding: 3rem 3rem 0 3rem;
 		margin: 0;
 	}
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 9810dc3a91..2d0acbd5bf 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -220,7 +220,7 @@
 		font-size: var(--sk-text-m);
 		line-height: 1;
 		font-weight: 400;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup :global(h2:first-child) {
@@ -234,7 +234,7 @@
 	}
 
 	.chapter-markup :global(a:hover) {
-		color: white;
+		color: var(--sk-text-1);
 	}
 
 	.chapter-markup :global(ul) {
@@ -258,7 +258,7 @@
 
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
-		color: var(--sidebar-text);
+		color: var(--sk-code-base);
 		background: var(--sk-code-bg);
 		padding: 0.2em 0.4em 0.3em;
 		white-space: nowrap;
@@ -266,6 +266,15 @@
 		top: -0.1em;
 	}
 
+	.chapter-markup :global(:where(pre.language-markup)) {
+		background-color: var(--sk-code-bg);
+		color: var(--sk-code-base);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		margin: 0 0 1rem;
+		font-size: 14px;
+	}
+
 	.controls {
 		border-top: 1px solid rgba(255, 255, 255, 0.15);
 		padding: 1em 0 0 0;
@@ -274,9 +283,9 @@
 	}
 
 	.show {
-		background: var(--prime);
+		background: var(--sk-theme-1);
 		padding: 0.3em 0.7em;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		top: 0.1em;
 		position: relative;
 		font-size: var(--h5);
@@ -303,7 +312,7 @@
 	.improve-chapter a {
 		font-size: 14px;
 		text-decoration: none;
-		opacity: 0.3;
+		opacity: 0.6;
 		padding: 0 0.1em 0 1.2em;
 		background: no-repeat 0 50% url(/icons/edit.svg);
 		background-size: 1em 1em;
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
index ab374dfc07..4ae74865f1 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte
@@ -67,8 +67,8 @@
 		position: relative;
 		padding: 1em 0.5em;
 		font-weight: 300;
-		font-size: var(--h6);
-		color: white;
+		font-size: var(--sk-text-xs);
+		color: var(--sk-text-2);
 	}
 
 	a {
@@ -76,7 +76,7 @@
 		padding: 0.7em 0;
 		text-align: center;
 		opacity: 0.75;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	a:hover {