add: automatic dark mode for quick bookmarking to folder popup

teddy-gustiaux · Feb 6, 2024 · cfc0a2d · cfc0a2d
1 parent d1e2cb2
commit cfc0a2d
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 102 deletions.
diff --git a/src/css/variables.css 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
diff --git 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
@@ -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
@@ -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());