From cfc0a2dcf30619773ac5ba8545dfe8bccc74cf13 Mon Sep 17 00:00:00 2001
From: Teddy Gustiaux <code@gustiaux.com>
Date: Mon, 5 Feb 2024 22:12:33 -0500
Subject: [PATCH] add: automatic dark mode for quick bookmarking to folder
 popup

---
 src/css/variables.css                 |  33 +++++++
 src/icons/browser-action/settings.svg |  51 +----------
 src/popup/popup.css                   | 119 +++++++++++++++-----------
 src/popup/popup.html                  |   3 +-
 src/popup/popup.js                    |  18 +++-
 5 files changed, 122 insertions(+), 102 deletions(-)
 create mode 100644 src/css/variables.css

diff --git a/src/css/variables.css b/src/css/variables.css
new file mode 100644
index 00000000..e728e27d
--- /dev/null
+++ b/src/css/variables.css
@@ -0,0 +1,33 @@
+:root {
+	--primary-color: #3273dc;
+	--font-color: #4a4a4a;
+	--font-color-focus: #363636;
+	--font-color-navbar: #4a4a4a;
+	--font-color-error: hsl(348, 86%, 61%);
+	--bg-color: #fff;
+	--bg-color-alternate: #f5f5f5;
+	--bg-color-notification: var(--bg-color-alternate);
+	--bg-color-notification-global: var(--bg-color-alternate);
+	--bg-color-box: var(--bg-color);
+	--bg-color-box-shadow: rgba(10, 10, 10, 0.1);
+	--bg-color-navbar-active: #e8e8e8;
+	--article-border-color: #dbdbdb;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--primary-color: #209cee;
+		--font-color: #fff;
+		--font-color-focus: #f3f3f3;
+		--font-color-navbar: #2d2d2d;
+		--font-color-error: hsl(348, 86%, 61%);
+		--bg-color: #2d2d2d;
+		--bg-color-alternate: #4a4a4a;
+		--bg-color-notification: var(--bg-color-alternate);
+		--bg-color-notification-global: var(--bg-color-alternate);
+		--bg-color-box: var(--bg-alternate);
+		--bg-color-box-shadow: rgba(240, 240, 240, 0.1);
+		--bg-color-navbar-active: #e8e8e8;
+		--article-border-color: #dbdbdb;
+	}
+}
diff --git a/src/icons/browser-action/settings.svg b/src/icons/browser-action/settings.svg
index a69072f4..fdcbc428 100644
--- a/src/icons/browser-action/settings.svg
+++ b/src/icons/browser-action/settings.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="settings.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="716"
-     inkscape:window-height="480"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="0.4609375"
-     inkscape:cx="256"
-     inkscape:cy="256"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <path
      d="M413.967 276.8c1.06-6.235 1.06-13.518 1.06-20.8s-1.06-13.518-1.06-20.8l44.667-34.318c4.26-3.118 5.319-8.317 2.13-13.518L418.215 115.6c-2.129-4.164-8.507-6.235-12.767-4.164l-53.186 20.801c-10.638-8.318-23.394-15.601-36.16-20.801l-7.448-55.117c-1.06-4.154-5.319-8.318-10.638-8.318h-85.098c-5.318 0-9.577 4.164-10.637 8.318l-8.508 55.117c-12.767 5.2-24.464 12.482-36.171 20.801l-53.186-20.801c-5.319-2.071-10.638 0-12.767 4.164L49.1 187.365c-2.119 4.153-1.061 10.399 2.129 13.518L96.97 235.2c0 7.282-1.06 13.518-1.06 20.8s1.06 13.518 1.06 20.8l-44.668 34.318c-4.26 3.118-5.318 8.317-2.13 13.518L92.721 396.4c2.13 4.164 8.508 6.235 12.767 4.164l53.187-20.801c10.637 8.318 23.394 15.601 36.16 20.801l8.508 55.117c1.069 5.2 5.318 8.318 10.637 8.318h85.098c5.319 0 9.578-4.164 10.638-8.318l8.518-55.117c12.757-5.2 24.464-12.482 36.16-20.801l53.187 20.801c5.318 2.071 10.637 0 12.767-4.164l42.549-71.765c2.129-4.153 1.06-10.399-2.13-13.518l-46.8-34.317zm-158.499 52c-41.489 0-74.46-32.235-74.46-72.8s32.971-72.8 74.46-72.8 74.461 32.235 74.461 72.8-32.972 72.8-74.461 72.8z"
-     id="path2"
-     style="fill:#f2f2f2;fill-opacity:1" />
+    />
 </svg>
diff --git a/src/popup/popup.css b/src/popup/popup.css
index b13d5da4..77ef2345 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -1,91 +1,108 @@
+@import '/css/variables.css';
+
 body {
-    font-family: "Open Sans", sans-serif;
+	font-family: 'Open Sans', sans-serif;
+	background-color: var(--bg-color-alternate);
+	color: var(--font-color);
 }
 
 .banner {
-    background-color: #f2f2f2;
-    margin: 0;
-    padding: 0;
-    width: 100%;
+	background-color: var(--bg-color-alternate);
+	margin: 0;
+	padding: 0;
+	width: 100%;
 }
 
 .content {
-    margin-top: 0rem;
-    margin-bottom: 1rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
-    width: 90%;
+	background-color: var(--bg-color);
+	padding-top: 0rem;
+	padding-bottom: 1rem;
+	padding-right: 1rem;
+	padding-left: 1rem;
 }
 
 .banner .content {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-    text-align: center;
+	background-color: var(--bg-color-alternate);
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 0.75rem;
+	padding-bottom: 0.75rem;
+	text-align: center;
 }
 
 .disabled {
-    pointer-events: none;
-    opacity: 0.6;
+	pointer-events: none;
+	opacity: 0.6;
 }
 
 #open-settings {
-    padding: 0.5rem;
-    color: #f2f2f2;
-    background-color: #209CEE;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    margin-top: 0rem;
-    font-family:inherit;
-    display: inline-flex;
-    align-items: center;
+	padding: 0.5rem;
+	color: var(--font-color-navbar);
+	background-color: var(--primary-color);
+	border: 1px solid transparent;
+	border-radius: 4px;
+	margin-top: 0rem;
+	font-weight: 500;
+	display: inline-flex;
+	align-items: center;
+}
+
+.svg-icon-regular {
+	display: inline-flex;
+	align-self: center;
 }
 
-#test {
-    height: 1.2rem;
-    margin-right: 0.5rem;
+.svg-icon-regular svg {
+	height: 1.2rem;
+	width: 1.2rem;
+	fill: var(--font-color-navbar);
 }
 
 .search-info {
-    font-style: italic;
+	font-style: italic;
 }
 
 #search-input {
-    border-radius: 25px;
-    border: 5px solid #f2f2f2;
-    padding: 20px;
-    height: 15px;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
+	border-radius: 25px;
+	border: 5px solid var(--bg-color-alternate);
+	background-color: var(--bg-color-alternate);
+	padding: 20px;
+	height: 15px;
+	font-weight: 600;
+	margin-bottom: 1.5rem;
+	color: var(--font-color);
+}
+
+#search-input::placeholder {
+	color: var(--font-color);
 }
 
 #not-found {
-    display: none;
-    font-weight: 600;
+	display: none;
+	font-weight: 600;
 }
 
 #search-results {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
 }
 
 #search-results li a {
-    display: block;
-    text-decoration: none;
-    font-size: 1rem;
-    border: 1px solid #f2f2f2;
-    margin-top: -1px;
-    padding: 1rem;
+	display: block;
+	text-decoration: none;
+	font-size: 1rem;
+	border: 1px solid var(--bg-color-alternate);
+	margin-top: -1px;
+	padding: 1rem;
 }
 
 #search-results li a:hover:not(.header) {
-    background-color: #f2f2f2;
+	background-color: var(--bg-color-alternate);
 }
 
 #save-error {
-    display: none;
-    color: hsl(348, 86%, 61%);
-    font-weight: 600;
+	display: none;
+	color: var(--font-color-error);
+	font-weight: 600;
 }
diff --git a/src/popup/popup.html b/src/popup/popup.html
index d25d6667..6324eac1 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -11,7 +11,8 @@
     <div class='banner'>
         <div class='content'>
             <button id='open-settings'>
-                <img id="test" src="../icons/browser-action/settings.svg">
+				<span class="svg-icon-regular" data-svg="browser-action/settings.svg"></span>
+				<span>&nbsp;</span>
                 <span>Settings</span>
             </button>
         </div>
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 8b4e4120..31b60da4 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -166,7 +166,7 @@ function performSearch(event) {
 }
 
 // -------------------------------------------------------------------------------------------------
-// TRANSLATION LOGIC
+// DISPLAY LOGIC
 // -------------------------------------------------------------------------------------------------
 function insertDataFromLocales() {
 	const elementsWithLocale = document.querySelectorAll('[data-locale]');
@@ -181,6 +181,21 @@ function insertDataFromLocales() {
 	});
 }
 
+function insertSvgIcons() {
+	const parser = new DOMParser();
+	const elementsWithSvgIcon = document.querySelectorAll('[data-svg]');
+	Array.from(elementsWithSvgIcon).forEach(async (elementWithSvgIcon) => {
+		const svgUrl = browser.runtime.getURL(`icons/${elementWithSvgIcon.dataset.svg}`);
+		const response = await fetch(svgUrl);
+		const responseData = await response.text();
+		const svgImageElement = parser.parseFromString(responseData, 'image/svg+xml');
+		const svgInline = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		svgInline.setAttribute('viewBox', svgImageElement.firstChild.getAttribute('viewBox'));
+		Array.from(svgImageElement.children).forEach((child) => svgInline.appendChild(child));
+		elementWithSvgIcon.appendChild(svgInline);
+	});
+}
+
 // -------------------------------------------------------------------------------------------------
 // START LOGIC
 // -------------------------------------------------------------------------------------------------
@@ -204,5 +219,6 @@ async function popupOpened() {
  * LISTENERS
  * =================================================================================================
  */
+document.addEventListener('DOMContentLoaded', insertSvgIcons);
 document.addEventListener('DOMContentLoaded', insertDataFromLocales);
 document.addEventListener('DOMContentLoaded', () => popupOpened());