From 2e07251c0603b32786fcab7216a9ee05db988239 Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Tue, 29 Oct 2024 21:31:48 -0700
Subject: [PATCH] Complete theme toggle. Adjust theme colors (needs some more
 tweaking).

---
 app/pages/nemo-wallet.html | 162 +++++++++++++++++++++++++------------
 1 file changed, 110 insertions(+), 52 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index ac5b420..d460010 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -60,14 +60,17 @@
 					})
 				}
 			}
-			const clearStorageButton = document.querySelector('#clear-storage-button')
+			const themeCheckbox = document.getElementById('theme-checkbox')
+			themeCheckbox.addEventListener('change', selectTheme)
+			selectTheme()
+			const clearStorageButton = document.getElementById('clear-storage-button')
 			clearStorageButton.addEventListener('click', (event) => {
 				if (event.detail === 1) {
 					clearStorage()
 				}
 			})
 			setTimeout(() => {
-				document.getElementsByTagName('body')[0].style.visibility = 'visible'
+				document.body.style.visibility = 'visible'
 			}, 250)
 			console.log('loaded ui')
 		}
@@ -451,29 +454,17 @@
 			notify.ok(`Session storage cleared`)
 			btn.removeAttribute('disabled')
 		}
-		// function toggleTheme () {
-		// 	const body = document.querySelector('body')
-		// 	const theme = body.style.getPropertyValue('--theme')
-		// 	switch (theme) {
-		// 		case dark: {
-		// 			body.style = {
-		// 				"--theme": "light",
-		// 				"--theme-primary": "var(--color-light)",
-		// 				"--theme-secondary": "var(--color-blue)",
-		// 				"--theme-highlight": "var(--color-dark)",
-		// 				"--theme-text": "var(--color-black)"
-		// 			break
-		// 		}
-		// 		case light: {
-		// 			body.style = {
-		// 				"--theme": "light",
-		// 				"--theme-primary": "var(--color-light)",
-		// 				"--theme-secondary": "var(--color-blue)",
-		// 				"--theme-highlight": "var(--color-dark)",
-		// 				"--theme-text": "var(--color-black)"
-		// 			break
-		// 		}
-		// }
+		function selectTheme () {
+			const body = document.querySelector('body')
+			const themeCheckbox = document.getElementById('theme-checkbox')
+			if (themeCheckbox.checked) {
+				body.style = '--theme:dark;--theme-primary:var(--color-dark);--theme-secondary:var(--color-gray);--theme-highlight:var(--color-blue);--theme-content:var(--color-light);'
+				themeCheckbox.value = 'dark'
+			} else {
+				body.style = '--theme:light;--theme-primary:var(--color-light);--theme-secondary:var(--color-gray);--theme-highlight:var(--color-blue);--theme-content:var(--color-dark);'
+				themeCheckbox.value = 'light'
+			}
+		}
 	</script>
 	<style>
 		*{border:0;box-sizing:border-box;font:normal normal normal calc(16px + 0.1dvh) 'sans-serif';margin:0;}
@@ -483,33 +474,34 @@
 			--color-dark: #20204C;
 			--color-light: #F4FAFF;
 			--color-gray: #676686;
-			--color-black: #070707;
-			--color-white: #FFFFFF;
 			--text-body: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
 			--text-heading: normal normal bold calc(32px + 0.1dvh) 'sans-serif';
-			background: linear-gradient(to right, var(--color-dark), calc((100dvw - 1080px) / 2), var(--color-black) 50%, calc(100dvw - ((100dvw - 1080px) / 2)), var(--color-dark));
-		}
-		body {
 			--theme: dark;
 			--theme-primary: var(--color-dark);
 			--theme-secondary: var(--color-gray);
 			--theme-highlight: var(--color-blue);
-			--theme-text: var(--color-light);
+			--theme-content: var(--color-light);
+			--min-width: 360px;
+			--max-width: 1080px;
+			--letterbox: calc((100dvw - var(--max-width)) / 2);
+		}
+		body {
 			align-items: flex-start;
-			background-color: var(--primary);
-			color: var(--tertiary);
+			background-color: var(--theme-primary);
+			box-shadow: 0 0 2rem var(--color-dark);
+			color: var(--theme-content);
 			display: flex;
-			fill: var(--color-blue);
+			fill: var(--theme-highlight);
 			flex-direction: column;
 			font: var(--text-body);
-			height: 100dvh !important;
 			justify-content: stretch;
 			margin: 0 auto;
+			height: 100dvh !important;
 			min-height: 100dvh !important;
-			min-width: 360px !important;
 			max-height: 100dvh !important;
-			max-width: 1080px !important;
-			width: 100dvw !important
+			width: 100dvw !important;
+			min-width: var(--min-width) !important;
+			max-width: var(--max-width) !important;
 		}
 		header {
 			flex: 0 1 auto;
@@ -537,6 +529,9 @@
 			font: var(--text-heading);
 			margin-bottom: 1em;
 		}
+		h1 {
+			text-align: center;
+		}
 		.flex-x,
 		.flex-y {
 			display: flex;
@@ -614,14 +609,16 @@
 			display: flex;
 			flex-direction: column;
 			margin: 0 auto;
+			max-width: var(--max-width);
+			min-width: var(--min-width);
 			pointer-events: none;
 			position: fixed;
 			top: 0.5rem;
 			width: 100%;
 		}
 		#notifications > dialog[open] {
-			background-color: var(--color-blue);
-			border: 1px solid var(--color-black);
+			background-color: var(--theme-highlight);
+			border: 1px solid var(--theme-secondary);
 			border-radius: 0.5rem;
 			color: var(--color-light);
 			cursor: pointer;
@@ -647,11 +644,20 @@
 		.hide {
 			display: none;
 		}
+		a {
+			color: var(--theme-highlight);
+			cursor: pointer;
+			text-decoration: none;
+		}
 		button {
+			background-color: var(--theme-highlight);
+			border: 1px solid var(--theme-secondary);
+			color: var(--theme-content);
 			cursor: pointer;
 		}
-		h1 {
-			text-align: center;
+		a:hover,
+		button:hover {
+			filter: brightness(120%);
 		}
 		input,
 		input[type='number'],
@@ -659,8 +665,19 @@
 		input[type='text'],
 		select,
 		select:focus {
+			background-color: var(--theme-secondary);
+			border: 1px solid var(--theme-content);
+			color: var(--theme-text);
 			font-size: calc(16px + 0.1dvh);  /* prevents input focus zoom on mobile */
 		}
+		input:disabled,
+		input[type='number']:disabled,
+		input[type='password']:disabled,
+		input[type='text']:disabled,
+		select:disabled,
+		select:focus:disabled {
+			color: var(--theme-secondary);
+		}
 		label:has(+ :required)::after {
 			color: red;
 			content: '*';
@@ -675,27 +692,62 @@
 			justify-content: center;
 			padding: 0 1dvh;
 		}
-		#xno {
-			fill: var(--color-blue);
-			flex: 1.5 1 auto;
-		}
 		nav > a > * {
 			aspect-ratio: 1;
-			fill: var(--color-blue);
 			flex: 1 0 auto;
 			height: 100%;
 			max-height: 10dvh;
 			max-width: 10dvh;
 			width: 100%;
 		}
+		#xno {
+			flex: 1.5 1 auto;
+		}
 		#xno > svg {
 			max-height: 15dvh;
 			max-width: 15dvh;
 		}
+		nav svg {
+			fill: var(--theme-highlight);
+		}
+		nav svg:hover {
+			fill: var(--theme-highlight);
+		}
+		.toggle {
+			position: relative;
+		}
+		.toggle > input[type='checkbox'] {
+			appearance: none;
+			background-color: var(--theme-highlight);
+			border: 0.1em solid var(--theme-secondary);
+			border-radius: 0.75em;
+			cursor: pointer;
+			height: 1.4em;
+			transition: all 0.2s;
+			width: 2.4em;
+		}
+		.toggle > input[type='checkbox']::before {
+			background-color: var(--theme-primary);
+			border-radius: 50%;
+			content: '';
+			height: 1em;
+			left: 0.27em;
+			position: absolute;
+			top: 0.2em;
+			transition: all 0.2s;
+			width: 1em;
+		}
+		.toggle > input[type='checkbox']:checked {
+			transition: all 0.2s;
+		}
+		.toggle > input[type='checkbox']:checked::before {
+			left: 1.2em;
+			transition: all 0.2s;
+		}
 	</style>
 </head>
 
-<body onhashchange="switchPage(event)" style="--theme:dark;visibility:hidden;">
+<body onhashchange="switchPage(event)" style="visibility:hidden;">
 	<div id="notifications"></div>
 	<header>
 		<form>
@@ -899,10 +951,16 @@
 		<!-- Settings Page -->
 
 		<div id="settings" class="page">
-			<h1>Settings</h1>
-			<button id="clear-storage-button">
-				Clear Storage
-			</button>
+			<form class="flex-y left mid">
+				<h1>Settings</h1>
+				<label for="theme-checkbox">Theme</label>
+				<div class="toggle">
+					<input id="theme-checkbox" name="theme" type="checkbox" autocomplete="on" checked />
+				</div>
+				<button id="clear-storage-button">
+					Clear Storage
+				</button>
+			</form>
 			<article>
 				<h2>Licenses</h2>
 				<cite>
-- 
2.34.1