From f37c067e942f22ca9067bf591f48b619e797c553 Mon Sep 17 00:00:00 2001
From: Evgenii Kucheriavyi <e.kucheriavii@gmail.com>
Date: Sat, 21 Oct 2023 16:10:11 +0300
Subject: [PATCH] feat: dark-theme + replaced margin-right with gap

---
 src/index.html | 14 ++++++++++----
 src/index.js   |  8 ++++++++
 src/ui/menu.js | 28 +++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index 80cdaf6..744c935 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,7 +16,9 @@
 			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 			font-size: 16px;
 			color: rgb(73, 80, 87);
-			outline: none; 
+			outline: none;
+			background-color: #fff;
+			transition: 250ms;
 		}
 
 		a {
@@ -27,7 +29,11 @@
 		@media only screen and (max-width: 700px) {
 			.links {
 				display: none;
-			}	
+			}
+		}
+
+		.dark-theme #diagram {
+			background-color: #222;
 		}
 	</style>
 	<title>Dgrm</title>
@@ -52,7 +58,7 @@
 		<a href="https://github.com/AlexeyBoiko/DgrmJS" target="_blank">GitHub</a> | <a
 			href="https://linkedin.com/in/alexey-boyko-tech" target="_blank">LinkedIn</a>
 	</div>
-	<svg id="diagram" tabindex="0" style="touch-action: none; background-color: #fff; display:block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none;">
+	<svg id="diagram" tabindex="0" style="touch-action: none; display:block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none;">
 		<style type="text/css">
 			text {
 				white-space: pre-wrap;
@@ -160,4 +166,4 @@
 	</svg>
 	<script src="index.js" type="module"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/index.js b/src/index.js
index b7f08f5..832fdac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,3 +42,11 @@ if (url.searchParams.get('k')) {
 		url = null;
 	});
 } else { url = null; }
+
+
+// dark theme
+const theme = localStorage.getItem('--theme');
+
+if (theme === 'dark') {
+	document.body.className = 'dark-theme';
+}
diff --git a/src/ui/menu.js b/src/ui/menu.js
index 42ba15c..3e0c513 100644
--- a/src/ui/menu.js
+++ b/src/ui/menu.js
@@ -36,8 +36,14 @@ export class Menu extends HTMLElement {
 				align-items: center;
 				line-height: 25px;
 				text-decoration: none;
+				gap: 10px;
+			}
+			.theme-toggler-cirlce {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				background-color: #333;
 			}
-			#options div svg, #options a svg { margin-right: 10px; }
 			</style>
 			<svg id="menu" class="menu" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" fill="rgb(52,71,103)"/></svg>
 			<div id="options" style="visibility: hidden;">
@@ -46,6 +52,7 @@ export class Menu extends HTMLElement {
 				<div id="open"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2H20a1 1 0 0 1 1 1v3h-2V7h-7.414l-2-2H4v11.998L5.5 11h17l-2.31 9.243a1 1 0 0 1-.97.757H3zm16.938-8H7.062l-1.5 6h12.876l1.5-6z" fill="rgb(52,71,103)"/></svg>Open diagram image</div>
 				<div id="save"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 19h18v2H3v-2zm10-5.828L19.071 7.1l1.414 1.414L12 17 3.515 8.515 4.929 7.1 11 13.17V2h2v11.172z" fill="rgb(52,71,103)"/></svg>Save diagram image</div>
 				<div id="link"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.06 8.11l1.415 1.415a7 7 0 0 1 0 9.9l-.354.353a7 7 0 0 1-9.9-9.9l1.415 1.415a5 5 0 1 0 7.071 7.071l.354-.354a5 5 0 0 0 0-7.07l-1.415-1.415 1.415-1.414zm6.718 6.011l-1.414-1.414a5 5 0 1 0-7.071-7.071l-.354.354a5 5 0 0 0 0 7.07l1.415 1.415-1.415 1.414-1.414-1.414a7 7 0 0 1 0-9.9l.354-.353a7 7 0 0 1 9.9 9.9z" fill="rgb(52,71,103)"/></svg>Copy link to diagram</div>
+				<div id="theme-toggler"><div class="theme-toggler-cirlce"></div>Toggle theme</div>
 				<a href="/donate.html" target="_blank" style="margin-bottom: 0;">
 					<svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228zm6.826 1.641c-1.5-1.502-3.92-1.563-5.49-.153l-1.335 1.198-1.336-1.197c-1.575-1.412-3.99-1.35-5.494.154-1.49 1.49-1.565 3.875-.192 5.451L12 18.654l7.02-7.03c1.374-1.577 1.299-3.959-.193-5.454z" fill="rgb(255,66,77)"/></svg>Donate
 				</a>
@@ -55,11 +62,13 @@ export class Menu extends HTMLElement {
 		function toggle() { options.style.visibility = options.style.visibility === 'visible' ? 'hidden' : 'visible'; }
 
 		/** @param {string} id, @param {()=>void} handler */
-		function click(id, handler) {
+		function click(id, handler, doNotToggle = false) {
 			shadow.getElementById(id).onclick = _ => {
 				uiDisable(true);
 				handler();
-				toggle();
+				if (!doNotToggle) {
+					toggle();
+				}
 				uiDisable(false);
 			};
 		}
@@ -96,6 +105,19 @@ export class Menu extends HTMLElement {
 
 			alert('Link to diagram copied to clipboard');
 		});
+
+		click('theme-toggler', () => {
+			document.body.classList.toggle('dark-theme');
+			const theme = localStorage.getItem('--theme');
+
+			if (theme === 'dark') {
+				localStorage.setItem('--theme', 'light');
+				return
+			}
+
+			localStorage.setItem('--theme', 'dark');
+
+		}, true);
 	}
 
 	/** @param {CanvasElement} canvas */