ios appearance and theme override

client/src/app.css

@@ -7,29 +7,46 @@
 :root {
 	font-family: 'Fira Mono', monospace;
 
-	--ui-bg-0: #fefefe;
+	--ui-bg-0: #111;
-	--ui-bg-0-85: #fefefed9;
+	--ui-bg-0-85: #111111d9;
-	--ui-bg-1: #eee;
+	--ui-bg-1: #333;
-	--ui-bg-2: #e2e2e2;
+	--ui-bg-2: #444;
-	--ui-text-0: #111;
+	--ui-text-0: #fefefe;
-	--ui-text-1: #222;
+	--ui-text-1: #eee;
 	--ui-clr-primary: hsl(186, 65%, 55%);
 	--ui-clr-error: hsl(357, 77%, 51%);
 
 	--ui-anim: all 150ms ease;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
 	:root {
-		--ui-bg-0: #111;
+		--ui-bg-0: #fefefe;
-		--ui-bg-0-85: #111111d9;
+		--ui-bg-0-85: #fefefed9;
-		--ui-bg-1: #222;
+		--ui-bg-1: #eee;
-		--ui-bg-2: #282828;
+		--ui-bg-2: #e2e2e2;
-		--ui-text-0: #fefefe;
+		--ui-text-0: #111;
-		--ui-text-1: #eee;
+		--ui-text-1: #333;
 	}
 }
 
+:root[theme='dark'] {
+	--ui-bg-0: #111 !important;
+	--ui-bg-0-85: #111111d9 !important;
+	--ui-bg-1: #333 !important;
+	--ui-bg-2: #444 !important;
+	--ui-text-0: #fefefe !important;
+	--ui-text-1: #eee !important;
+}
+:root[theme='light'] {
+	--ui-bg-0: #fefefe !important;
+	--ui-bg-0-85: #fefefed9 !important;
+	--ui-bg-1: #eee !important;
+	--ui-bg-2: #e2e2e2 !important;
+	--ui-text-0: #111 !important;
+	--ui-text-1: #333 !important;
+}
+
 .error-text {
 	color: var(--ui-clr-error);
 }
@@ -61,6 +78,8 @@ input,
 textarea,
 button {
 	appearance: none;
+	-webkit-appearance: none;
+	border-radius: 0;
 	transition: var(--ui-anim);
 	font-family: inherit;
 	font-size: inherit;

client/src/lib/ui/ThemeToggle.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store'
+
+	export enum Theme {
+		Dark = 'dark',
+		Light = 'light',
+		Auto = 'auto',
+	}
+
+	const NextTheme = {
+		[Theme.Auto]: Theme.Light,
+		[Theme.Light]: Theme.Dark,
+		[Theme.Dark]: Theme.Auto,
+	}
+
+	function init(): Theme {
+		if (typeof window !== 'undefined') {
+			const saved = window.localStorage.getItem('theme') as Theme
+			console.log(Theme, window.localStorage.getItem('theme'))
+			if (Object.values(Theme).includes(saved)) return saved
+		}
+		return Theme.Auto
+	}
+
+	export const theme = writable<Theme>(init())
+
+	theme.subscribe((theme) => {
+		if (typeof window !== 'undefined') {
+			window.localStorage.setItem('theme', theme)
+			const html = window.document.getElementsByTagName('html')[0]
+			html.setAttribute('theme', theme)
+		}
+	})
+</script>
+
+<script lang="ts">
+	import Icon from '$lib/ui/Icon.svelte'
+
+	function change() {
+		theme.update((current) => NextTheme[current])
+	}
+</script>
+
+<div on:click={change}>
+	<Icon class="icon" icon="contrast-sharp" />
+	{$theme}
+</div>
+
+<style>
+	div :global(.icon) {
+		height: 1rem;
+		width: 1rem;
+		margin-right: 0.5rem;
+	}
+
+	div {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		cursor: pointer;
+	}
+</style>

client/src/lib/views/Footer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Icon from '$lib/ui/Icon.svelte'
+	import ThemeToggle from '$lib/ui/ThemeToggle.svelte'
+</script>
+
+<footer>
+	<ThemeToggle />
+	<nav>
+		<a href="/">/home</a>
+		<a href="/about">/about</a>
+		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
+	</nav>
+</footer>
+
+<style>
+	footer {
+		display: flex;
+		justify-content: space-between;
+		padding: 1rem;
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 100%;
+		background-color: var(--ui-bg-0-85);
+	}
+
+	a {
+		margin: 0 0.5rem;
+	}
+
+	nav {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+	}
+</style>

client/src/lib/views/Header.svelte

@@ -8,7 +8,6 @@
 			xmlns="http://www.w3.org/2000/svg"
 			xmlns:xlink="http://www.w3.org/1999/xlink"
 			xml:space="preserve"
-			xmlns:serif="http://www.serif.com/"
 			style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
 			><g
 				><clipPath id="_clip1"><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath
@@ -78,5 +77,6 @@
 		width: 100%;
 		max-width: 16rem;
 		transform: translateX(-1rem);
+		fill: currentColor;
 	}
 </style>

client/src/routes/$layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
 
 	import '../app.css'
@@ -13,16 +14,9 @@
 	<slot />
 </main>
 
-<footer>
+<Footer />
-	<a href="/">/home</a>
-	<a href="/about">/about</a>
-	<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
-</footer>
 
 <style>
-	a {
-		margin: 0 0.5rem;
-	}
 	main {
 		padding: 1rem;
 		padding-bottom: 4rem;
@@ -30,17 +24,4 @@
 		max-width: 35rem;
 		margin: 0 auto;
 	}
-
-	footer {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		align-items: center;
-		padding: 1rem;
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-		background-color: var(--ui-bg-0-85);
-	}
 </style>

client/static/icons/contrast-sharp.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Contrast</title><path d='M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z'/></svg>