From 59f37da2467d11e09d148a22debfde7911c88b1f Mon Sep 17 00:00:00 2001
From: Jesper Orb <github@jesperorb.com>
Date: Wed, 27 Mar 2024 19:40:02 +0100
Subject: [PATCH] feat: add settings and code dark mode

---
 src/lib/components/pages/PageLayout.svelte    |  6 +-
 .../pages/Playground/Playground.svelte        |  2 +-
 .../pages/Playground/PlaygroundOptions.svelte |  1 -
 src/lib/components/ui/CodeBlock.svelte        |  5 +-
 src/lib/components/ui/DarkModeToggle.svelte   | 17 ++--
 src/lib/components/ui/Dialog.svelte           | 79 ++++++++++---------
 src/lib/components/ui/Fieldset.svelte         |  8 +-
 src/lib/components/ui/Highlight/Token.svelte  | 18 ++---
 src/lib/components/ui/Navigation.svelte       | 33 ++++++--
 src/lib/components/ui/OptionSection.svelte    |  1 -
 src/lib/components/ui/Radio.svelte            |  4 +-
 src/lib/components/ui/SettingsDialog.svelte   | 60 ++++++++++++++
 src/lib/store/settings.ts                     | 70 ++++++++++++++++
 src/lib/utils/directives.ts                   | 20 +++++
 src/lib/utils/format-utils.ts                 |  6 ++
 src/routes/+layout.svelte                     | 45 ++++++++---
 src/routes/Playground/+page.svelte            | 11 ++-
 17 files changed, 295 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/components/ui/SettingsDialog.svelte
 create mode 100644 src/lib/store/settings.ts
 create mode 100644 src/lib/utils/directives.ts

diff --git a/src/lib/components/pages/PageLayout.svelte b/src/lib/components/pages/PageLayout.svelte
index db6fd2b..7c14356 100644
--- a/src/lib/components/pages/PageLayout.svelte
+++ b/src/lib/components/pages/PageLayout.svelte
@@ -12,7 +12,7 @@
 	<h2>Input</h2>
 	<Spacing size={2} />
 	<hr />
-	<Spacing size={2} />
+	<Spacing />
 	<Grid>
 		<ComboBoxContext>
 			<ComboBox
@@ -31,10 +31,10 @@
 {#if $$slots.alternativeUse}
 	<Card>
 		<h2>Alternative use</h2>
+		<Spacing />
 		<slot name="alternativeUse" />
-		<Spacing size={2} />
+		<Spacing />
 		<slot name="alternativeCode" />
-		<Spacing size={2} />
 	</Card>
 	<Spacing />
 {/if}
diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte
index b1f8396..7d4f95c 100644
--- a/src/lib/components/pages/Playground/Playground.svelte
+++ b/src/lib/components/pages/Playground/Playground.svelte
@@ -149,7 +149,7 @@
 	}
 	.output {
 		padding: var(--spacing-4);
-		padding-top: var(--spacing-6);
+		padding-top: var(--spacing-5);
 		border-top-left-radius: 4px;
 	}
 	.output-inner {
diff --git a/src/lib/components/pages/Playground/PlaygroundOptions.svelte b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
index 2e661f4..94e1367 100644
--- a/src/lib/components/pages/Playground/PlaygroundOptions.svelte
+++ b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
@@ -10,7 +10,6 @@
 	import OptionCard from '$lib/components/ui/OptionCard.svelte';
 	import Details from '$lib/components/ui/details/Details.svelte';
 	import BrowserSupportGrid from '$lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte';
-	import Fieldset from '$lib/components/ui/Fieldset.svelte';
 	import Radio from '$lib/components/ui/Radio.svelte';
 	import { optionIsActive } from '$lib/playground/validate';
 
diff --git a/src/lib/components/ui/CodeBlock.svelte b/src/lib/components/ui/CodeBlock.svelte
index ba5078e..78a2253 100644
--- a/src/lib/components/ui/CodeBlock.svelte
+++ b/src/lib/components/ui/CodeBlock.svelte
@@ -10,11 +10,12 @@
 		tab-size: 2;
 		display: block;
 		padding: var(--spacing-4);
-		background-color: #1b2b34;
+		background-color: var(--code-block-background);
 		font-size: 0.85rem;
-		border-radius: 0.5rem;
+		border-radius: 4px;
 		overflow-x: auto;
 		color: var(--code-text-color);
 		font-family: var(--font-family);
+		border: 1px solid var(--border-color);
 	}
 </style>
diff --git a/src/lib/components/ui/DarkModeToggle.svelte b/src/lib/components/ui/DarkModeToggle.svelte
index 4d0a0c1..4343039 100644
--- a/src/lib/components/ui/DarkModeToggle.svelte
+++ b/src/lib/components/ui/DarkModeToggle.svelte
@@ -1,27 +1,22 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { settings } from '$lib/store/settings';
 	import SrOnly from './SrOnly.svelte';
   import Moon from './icons/Moon.svelte';
 	import Sun from './icons/Sun.svelte';
 
   let checked = Boolean(
 		browser
-			? document?.querySelector('body')?.getAttribute('data-dark-mode') === 'true'
+			? $settings.theme === "dark"
 			: false
 	);
 
 	const change = (event: Event) => {
 		const target = event.target as HTMLInputElement;
-		const element = browser ? document.querySelector('html') : null;
-		if (element && browser) {
-			if (target.checked) {
-				localStorage.setItem("dark-mode", "1");
-				element.setAttribute('data-dark-mode', 'true');
-			} else {
-				localStorage.removeItem("dark-mode");
-				element.removeAttribute('data-dark-mode');
-			}
-		}
+		settings.update((s) => ({
+			...s,
+			theme: target.checked ? "dark" : "light",
+		}))
 	};
 </script>
 
diff --git a/src/lib/components/ui/Dialog.svelte b/src/lib/components/ui/Dialog.svelte
index b47d382..0e1da57 100644
--- a/src/lib/components/ui/Dialog.svelte
+++ b/src/lib/components/ui/Dialog.svelte
@@ -1,56 +1,47 @@
 <script lang="ts">
-	export let show = false;
-	export let showCloseButton: boolean = true;
+	import Spacing from "$lib/components/ui/Spacing.svelte";
+
+	export let show: boolean;
+	export let header: string;
 
 	let dialog: HTMLDialogElement;
 
-	$: if (dialog && show) dialog.show();
+	$: if (dialog && show) dialog.showModal();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog bind:this={dialog} on:close={() => (show = false)} on:click|self={() => dialog.close()}>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (show = false)}
+	on:click|self={() => dialog.close()}
+>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
-		{#if showCloseButton}
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<!-- svelte-ignore a11y-autofocus -->
-			<button aria-label="Close dialog" autofocus on:click={() => dialog.close()}>X</button>
-		{/if}
-		<slot name="header" />
+		<!-- svelte-ignore a11y-autofocus -->
+		<h2 tabindex="-1" autofocus>{header}</h2>
+		<Spacing />
 		<slot />
+		<button on:click={() => dialog.close()}>Close</button>
 	</div>
 </dialog>
 
 <style>
 	dialog {
-		margin: var(--spacing-10) auto 0 auto;
-		border-radius: 4px;
+		border-radius: 8px;
+		border: none;
+		background: var(--background-color);
 		border: 1px solid var(--border-color);
-		background-color: var(--card-color);
-		color: var(--text-color);
-		padding: 0;
-		z-index: 999999;
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.3);
 	}
 	dialog > div {
-		padding: var(--spacing-2);
-	}
-	dialog[open] {
-		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	button {
-		background: none;
-		background-color: var(--background-color);
-		border: 1px solid var(--border-color);
-		padding: 0.5rem 1rem;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		padding: var(--spacing-6);
+		background: var(--background-color);
 		color: var(--text-color);
-		font-weight: 700;
-		border-radius: 4px;
-		cursor: pointer;
 	}
 	@keyframes zoom {
 		from {
@@ -60,9 +51,6 @@
 			transform: scale(1);
 		}
 	}
-	dialog[open]::backdrop {
-		animation: fade 0.2s ease-out;
-	}
 	@keyframes fade {
 		from {
 			opacity: 0;
@@ -71,7 +59,26 @@
 			opacity: 1;
 		}
 	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
 	button {
-		display: block;
+		border: none;
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		margin-left: auto;
+		padding: var(--spacing-2) var(--spacing-3);
+		border-radius: 4px;
+		color: var(--text-color);
+	}
+
+	button:hover {
+    outline: 1px solid var(--text-color);
 	}
 </style>
diff --git a/src/lib/components/ui/Fieldset.svelte b/src/lib/components/ui/Fieldset.svelte
index 3631def..28d305a 100644
--- a/src/lib/components/ui/Fieldset.svelte
+++ b/src/lib/components/ui/Fieldset.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import Spacing from "./Spacing.svelte";
-
   export let legend: string;
   export let role: string | undefined = undefined;
   export let name: string | undefined = undefined;
+  export let capitalize: boolean = false;
 </script>
 
 <fieldset {role} {name}>
-  <legend>{legend}</legend>
+  <legend class:capitalize={capitalize}>{legend}</legend>
   <slot />
 </fieldset>
 
@@ -23,4 +22,7 @@
   legend {
     margin-bottom: var(--spacing-2);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/ui/Highlight/Token.svelte b/src/lib/components/ui/Highlight/Token.svelte
index bafb939..5631088 100644
--- a/src/lib/components/ui/Highlight/Token.svelte
+++ b/src/lib/components/ui/Highlight/Token.svelte
@@ -19,37 +19,37 @@
 		white-space: nowrap;
 	}
 	.token.comment {
-		color: var(--gray);
+		color: var(--comment);
 	}
 
 	.token.punctuation {
-		color: var(--purple);
+		color: var(--punctuation);
 	}
 
 	.token.operator {
-		color: var(--teal);
+		color: var(--operator);
 	}
 
 	.token.key {
-		color: var(--white);
+		color: var(--key);
 	}
 
 	.token.function {
-		color: var(--light-blue);
+		color: var(--function);
 	}
 
 	.token.boolean {
-		color: var(--red);
+		color: var(--boolean);
 	}
 
 	.token.number {
-		color: var(--orange);
+		color: var(--number);
 	}
 
 	.token.string {
-		color: var(--green);
+		color: var(--string);
 	}
 	.token.class {
-		color: #fac863;
+		color: var(--class);
 	}
 </style>
diff --git a/src/lib/components/ui/Navigation.svelte b/src/lib/components/ui/Navigation.svelte
index eb61e8b..64c44b7 100644
--- a/src/lib/components/ui/Navigation.svelte
+++ b/src/lib/components/ui/Navigation.svelte
@@ -9,13 +9,15 @@
 	import { selectedLocale } from '$lib/store/selected-locale';
 	import { testIds } from '$lib/utils/dom-utils';
 	import OpenInNewTab from '$lib/components/ui/icons/OpenInNewTab.svelte';
-	import DarkModeToggle from './DarkModeToggle.svelte';
 	import Spacing from './Spacing.svelte';
+	import Settings from './icons/Settings.svelte';
+	import SettingsDialog from './SettingsDialog.svelte';
 
 	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
 
 	let path: string;
 	let open = false;
+	let showSettings = false;
 	let closeButton: HTMLButtonElement;
 	let openButton: HTMLButtonElement;
 	let lastItem: HTMLAnchorElement;
@@ -71,6 +73,8 @@
 	}
 </script>
 
+<SettingsDialog bind:show={showSettings} />
+
 <nav aria-label="Main Menu" data-testid={testIds.navigation}>
 	<div class="actions">
 		<button
@@ -86,7 +90,9 @@
 			Menu
 		</button>
 		<div class="settings">
-			<DarkModeToggle />
+			<button on:click={() => (showSettings = true)} aria-label="Settings" class="settings-button">
+				<span>Settings</span> <Settings />
+			</button>
 		</div>
 	</div>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -96,12 +102,11 @@
 				type="button"
 				id="closeMenuButton"
 				class="close-button"
-				aria-label="Close navigation"
 				on:click={closeDrawer}
 				bind:this={closeButton}
 				on:keydown={onCloseButtonShiftTab}
 			>
-				&times;
+				Close
 			</button>
 		</div>
 		<Spacing />
@@ -150,7 +155,7 @@
 		top: 0;
 		left: -250px;
 		width: 250px;
-		background-color: var(--card-color);
+		background-color: var(--background-color);
 		height: 100%;
 		padding: var(--spacing-4);
 		z-index: 1;
@@ -189,7 +194,7 @@
 		font-size: 1.25rem;
 		color: var(--text-color);
 	}
-	.nav-button:hover, .close-button:hover {
+	.nav-button:hover, .close-button:hover, .settings-button:hover {
 		border-radius: 4px;
     outline: 1px solid var(--text-color);
 	}
@@ -204,6 +209,22 @@
 		border-radius: 4px;
 		color: var(--text-color);
 	}
+	.settings-button {
+		border: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		font-size: 1.25rem;
+		color: var(--text-color);
+		padding: var(--spacing-2) var(--spacing-3);
+	}
+	.settings-button span {
+		margin-right: var(--spacing-2);
+	}
 	.menu-heading, .route {
 		margin-bottom: var(--spacing-1);
 	}
diff --git a/src/lib/components/ui/OptionSection.svelte b/src/lib/components/ui/OptionSection.svelte
index 2dba7aa..7e8bada 100644
--- a/src/lib/components/ui/OptionSection.svelte
+++ b/src/lib/components/ui/OptionSection.svelte
@@ -35,7 +35,6 @@
 	@media screen and (min-width: 500px) {
     .header {
 			flex-direction: row;
-			align-items: center;
     }
   }
 </style>
diff --git a/src/lib/components/ui/Radio.svelte b/src/lib/components/ui/Radio.svelte
index a81705f..61cf419 100644
--- a/src/lib/components/ui/Radio.svelte
+++ b/src/lib/components/ui/Radio.svelte
@@ -71,13 +71,13 @@
   @media (hover: hover) {
     input[type="radio"]:not(:disabled):hover {
       background-color: var(--radio-hover-color);
-      outline: 6px solid var(--radio-hover-color);
+      outline: 2px solid var(--highlight);
     }
   }
 
   input[type="radio"]:focus-visible {
     background-color: var(--radio-hover-color);
-    outline: 6px solid var(--radio-hover-color);
+    outline: 2px solid var(--highlight);
   }
   @media (prefers-reduced-motion: reduce) {
     input[type="radio"] {
diff --git a/src/lib/components/ui/SettingsDialog.svelte b/src/lib/components/ui/SettingsDialog.svelte
new file mode 100644
index 0000000..fc21214
--- /dev/null
+++ b/src/lib/components/ui/SettingsDialog.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Dialog from "./Dialog.svelte";
+  import Radio from "./Radio.svelte"
+	import { settings, settingsConfiguration, settingsKeys } from '$lib/store/settings';
+	import Fieldset from "./Fieldset.svelte";
+	import Spacing from "./Spacing.svelte";
+	import Card from "./Card.svelte";
+	import { camelCaseToWords } from "$lib/utils/format-utils";
+  export let show: boolean;
+
+  const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    settings.update((s) => ({
+      ...s,
+      [target.name]: target.value,
+    }))
+  }
+
+</script>
+
+<Dialog header="Settings" bind:show={show}>
+  <div class="grid">
+    {#each settingsKeys as key}
+      <Card>
+        {#if settingsConfiguration[key].type === "radio"}
+          <Fieldset role="radiogroup" capitalize legend={camelCaseToWords(key)}>
+            {#each settingsConfiguration[key].values as option}
+              <Radio
+                onChange={onChange}
+                label={option}
+                id={key + option}
+                name={key}
+                value={option}
+                bind:group={$settings[key]}
+              />
+            {/each}
+          </Fieldset>
+        {/if}
+        {#if settingsConfiguration[key].hint}
+          <Spacing size={2} />
+          <p class="hint">{settingsConfiguration[key].hint}</p>
+        {/if}
+      </Card>
+    {/each}
+  </div>
+  <Spacing />
+</Dialog>
+
+<style>
+  .grid {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+    min-width: 20rem;
+	}
+
+  .hint {
+    font-style: italic;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/store/settings.ts b/src/lib/store/settings.ts
new file mode 100644
index 0000000..1c51d22
--- /dev/null
+++ b/src/lib/store/settings.ts
@@ -0,0 +1,70 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+type DarkMode = "dark" | "light";
+
+type Setting<Value> = {
+  type: "radio",
+  values: Value[],
+  hint?: string;
+}
+
+type SettingsConfiguration = {
+  codeTheme: Setting<DarkMode>
+  theme: Setting<DarkMode>
+}
+
+export const settingsConfiguration: SettingsConfiguration = {
+  codeTheme: {
+    type: 'radio',
+    values: ["dark", "light"],
+    hint: "Theme for Code Block: Oceanic Next/GitHub"
+  },
+  theme: {
+    type: 'radio',
+    values: ["dark", "light"],
+    hint: "Page theme",
+  }
+}
+
+type Settings = {
+  codeTheme: DarkMode;
+  theme: DarkMode;
+}
+
+const defaultSettings: Settings  = {
+  codeTheme: "dark",
+  theme: 'light'
+}
+
+export const settingsKeys = Object.keys(defaultSettings) as (keyof Settings)[]
+
+export const settingsLocalStorageKey = "intl-explorer-settings";
+
+const getSettings = () => {
+  if(!browser) return defaultSettings;
+  const stored = localStorage.getItem(settingsLocalStorageKey);
+  if(!stored) return defaultSettings;
+  return {
+    ...defaultSettings,
+    ...JSON.parse(stored)
+  } as Settings;
+}
+
+export const settings = writable(getSettings());
+
+settings.subscribe((value) => {
+	if (browser) {
+    if(value.theme === "dark") {
+			document.querySelector("html")?.setAttribute("data-dark-mode", "true");
+		} else if(value.theme === "light") {
+      document.querySelector("html")?.removeAttribute("data-dark-mode");
+    }
+		if(value.codeTheme === "light") {
+			document.querySelector("html")?.setAttribute("data-code-light-mode", "true");
+		} else if (value.codeTheme === "dark") {
+      document.querySelector("html")?.removeAttribute("data-code-light-mode");
+    }
+		localStorage.setItem(settingsLocalStorageKey, JSON.stringify(value))
+	}
+});
diff --git a/src/lib/utils/directives.ts b/src/lib/utils/directives.ts
new file mode 100644
index 0000000..3088f13
--- /dev/null
+++ b/src/lib/utils/directives.ts
@@ -0,0 +1,20 @@
+export function onClickOutside(element: HTMLElement, callback: () => void) {
+  const onClick = (event: MouseEvent) => {
+    const target = event.target as Node | null;
+    if(!element.contains(target)) {
+      callback();
+    }
+  }
+
+  document.body.addEventListener("mousedown", onClick);
+
+  return {
+    update(newCallback: () => void) {
+      callback = newCallback;
+    },
+
+    destroy() {
+      document.body.removeEventListener("mousedown", onClick);
+    }
+  };
+}
\ No newline at end of file
diff --git a/src/lib/utils/format-utils.ts b/src/lib/utils/format-utils.ts
index f1f9b6a..e51b542 100644
--- a/src/lib/utils/format-utils.ts
+++ b/src/lib/utils/format-utils.ts
@@ -48,3 +48,9 @@ export const tryFormat = (format: () => string): string => {
 		return `${(error as { message: string }).message}`;
 	}
 };
+
+
+export const camelCaseToWords = (s: string) =>  {
+  const result = s.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1e0328..95e4fdc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,6 @@
 	import SkipLink from '$lib/components/ui/SkipLink.svelte';
 	import ProgressBar from '$lib/components/ui/ProgressBar.svelte';
 	import Header from '$lib/components/ui/Header.svelte';
-	import { onMount } from 'svelte';
 
 	let routeId: FormatMethodsKeys | 'Playground';
 	const getRouteId = (page: Page<Record<string, string>>): void => {
@@ -20,11 +19,6 @@
 		}
 	};
 	$: getRouteId($page);
-	onMount(() => {
-		if(browser && localStorage.getItem("dark-mode")) {
-			document.querySelector("html")?.setAttribute("data-dark-mode", "true");
-		}
-	})
 </script>
 
 <svelte:head>
@@ -55,7 +49,7 @@
 <!-- Ignore -->
 <style global>
 	:root {
-		--dark-black: hsl(0, 100%, 5%);
+		--dark-black: hsl(0, 100%, 2%);
 		--black: hsl(276, 100%, 12%);
 		--white: hsl(0, 100%, 100%);
 		--dark-blue: hsl(207, 95%, 8%);
@@ -72,6 +66,7 @@
 		--red: hsl(350, 100%, 67%);
 		--darkred: hsl(350, 100%, 46%);
 		--orange: hsl(14, 90%, 70%);
+		--lighteryellow: #fac863;
 		--lightyellow: hsl(40, 94%, 50%);
 		--yellow: hsl(40, 94%, 32%);
 		--light-purple: hsl(276, 100%, 98%);
@@ -87,6 +82,17 @@
 
 		--code-comment-color: var(--gray);
 		--code-text-color: var(--white);
+		--code-block-background: #1b2b34;
+
+		--comment: var(--gray);
+		--punctuation: var(--purple);
+		--operator: var(--teal);
+		--key: var(--white);
+		--function: var(--light-blue);
+		--boolean: var(--red);
+		--number: var(--orange);
+		--string: var(--green);
+		--class: var(--lightyellow);
 
 		--font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
 			'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -121,15 +127,28 @@
 	}
 	[data-dark-mode] {
 		--text-color: var(--white);
-		--accent-background-color: var(--darkergray);
-		--background-color: var(--dark-black);
+		--accent-background-color: var(--dark-black);
+		--background-color: hsl(0, 0%, 6%);
 		--link-underline-color: var(--white);
-		--border-color: var(--darkgray);
+		--border-color: hsl(0, 0%, 17%);
 		--divider-color: var(--darkgray);
-		--card-color: var(--darkergray);
+		--card-color: var(--dark-black);
 		--yellow: var(--lightyellow);
 		--darkgreen: var(--green);
 	}
+	[data-code-light-mode] {
+		--code-text-color: var(--black);
+		--code-block-background: var(--white);
+		--comment: var(--darkgray);
+		--punctuation: var(--black);
+		--operator: var(--black);
+		--key: #d73a49;
+		--function: #6f42c1;
+		--boolean: #005cc5;
+		--number: #032f62;
+		--string: #032f62;
+		--class: #6f42c1;
+	}
 	*,
 	*::after,
 	*::before {
@@ -185,8 +204,8 @@
 		color: var(--code-comment-color);
 	}
 	code.hljs {
-		color: var(--code-text-color);
-		border-radius: 8px;
+		border-radius: 4px;
+		border: 1px solid var(--border-color);
 		font-size: 0.85rem;
 	}
 	a {
diff --git a/src/routes/Playground/+page.svelte b/src/routes/Playground/+page.svelte
index 88d8077..5ecca4e 100644
--- a/src/routes/Playground/+page.svelte
+++ b/src/routes/Playground/+page.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
 
-	import nightowl from 'svelte-highlight/styles/oceanicnext';
+	import oceanicNext from 'svelte-highlight/styles/oceanicnext';
+	import github from 'svelte-highlight/styles/github';
 
 	import Playground from '$lib/components/pages/Playground/Playground.svelte';
 
 	import { selectedLocale } from '$lib/store/selected-locale';
+	import { settings } from '$lib/store/settings';
 
 	export let data: Record<string, BrowserSupportDataForMethod>;
 </script>
 
 <svelte:head>
-	<!-- eslint-disable -->
-	{@html nightowl}
+	{#if $settings.codeTheme === "light"}	
+		{@html github}
+	{:else}
+		{@html oceanicNext}
+	{/if}
 </svelte:head>
 
 <Playground {data} bind:locale={$selectedLocale} />