From 951f82da8ad865844d17753e2595b852a597aab4 Mon Sep 17 00:00:00 2001
From: Andrew <66430340+aandrew-me@users.noreply.github.com>
Date: Mon, 15 May 2023 12:28:04 +0600
Subject: [PATCH] New themes

---
 assets/css/extra.css         | 100 ++++++++++++++++++++++---
 assets/css/index.css         | 137 +++++++++++++++++++++++++----------
 html/about.html              |   9 ++-
 html/index.html              |  25 ++++---
 html/playlist.html           |  14 ++--
 html/preferences.html        |  11 +--
 main.js                      |  11 ---
 src/common.js                |  49 ++-----------
 src/preferences.js           |  18 ++---
 src/translate_preferences.js |   3 -
 translations/en.json         |   7 +-
 11 files changed, 238 insertions(+), 146 deletions(-)

diff --git a/assets/css/extra.css b/assets/css/extra.css
index d62c6c9..a96b608 100644
--- a/assets/css/extra.css
+++ b/assets/css/extra.css
@@ -1,6 +1,86 @@
+:root[theme="light"] {
+	--background: #fff;
+	--text: rgb(45, 45, 45);
+	--box-main: #eef4f3;
+	--box-toggle: rgb(215 238 233);
+	--box-toggleOn: rgb(28 232 138);
+	--item-bg: #dddddd;
+	--box-shadow: none;
+	--select: rgb(127, 253, 127);
+	--greenBtn: #6ade1d;
+	--greenBtn-bottom: #54a31f;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+
+:root[theme="dark"] {
+	--background: rgb(40, 40, 40);
+	--text: white;
+	--box-main: rgb(80, 80, 80);
+	--box-toggle: rgb(70, 70, 70);
+	--box-toggleOn: rgb(28 232 138);
+	--item-bg: rgb(75, 75, 75);
+	--box-shadow: none;
+	--select: rgb(127, 253, 127);
+	--greenBtn: #6acd29;
+	--greenBtn-bottom: #4c8824;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+
+:root[theme="frappe"] {
+	--background: #232634;
+	--text: #c6d0f5;
+	--box-main: #303446;
+	--box-toggle: #414559;
+	--box-toggleOn: #607dc1;
+	--item-bg: #414559;
+	--select: #8caaee;
+	--greenBtn: #78c346;
+	--greenBtn-bottom: #597844;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+:root[theme="onedark"] {
+	--background: #282C34	;
+	--text: #d2d6df;
+	--box-main: #4D515D;
+	--box-toggle: #2F333D;
+	--box-toggleOn: #13a3b7;
+	--item-bg: #4D515D;
+	--select: #57b6c2;
+	--greenBtn: #85cf50;
+	--greenBtn-bottom: #406923;
+	--redBtn: #be2d39;
+	--redBtn-bottom: #791a22;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+:root[theme="matrix"] {
+	--background: #0D0208;
+	--text: #00FF41;
+	--box-main: #0c2216;
+	--box-toggle: #214338;
+	--box-toggleOn: #24782e;
+	--item-bg: #214338;
+	--select: #00FF41;
+	--greenBtn: #19b42b;
+	--greenBtn-bottom: #10701c;
+	--redBtn: #19b42b;
+	--redBtn-bottom: #10701c;
+	--blueBtn: #19b42b;
+	--blueBtn-bottom: #10701c;
+}
+
 body {
-	background-color: rgba(33, 33, 39, 0.95);
-	color: whitesmoke;
+	background-color: var(--background);
+	color: var(--text);
 	padding: 20px;
 	font-size: x-large;
 	text-align: left;
@@ -40,7 +120,7 @@ input[type="text"],
 	margin: 0 15px;
 	padding: 20px 15px;
 	border-radius: 15px;
-	background-color: rgb(61, 62, 63);
+	background-color: var(--box-main);
 }
 
 .prefBox {
@@ -90,16 +170,16 @@ input[type="text"],
 	cursor: pointer;
 }
 #back {
-	background-color: rgb(51, 177, 219);
+	background-color: var(--blueBtn);
 	color: white;
 }
 
 #restart {
-	background-color: rgb(210 69 27);
+	background-color: var(--redBtn);
 	color: white;
 }
 .redBtn {
-	background-color: rgb(210 69 27);
+	background-color: var(--redBtn);
 	color: white;
 	text-decoration: none;
 	border: none;
@@ -109,7 +189,7 @@ input[type="text"],
 	font-size: medium;
 }
 a {
-	color: rgb(34, 136, 199);
+	color: rgb(29, 140, 209);
 	cursor: pointer;
 }
 
@@ -125,8 +205,8 @@ input[type="checkbox"] {
 	border-radius: 10px;
 	font-size: large;
 	color: white;
-	background-color: rgb(35, 190, 35);
-	border-bottom: 4px solid rgb(30, 139, 30);
+	background-color: var(--greenBtn);
+	border-bottom: 4px solid var(--greenBtn-bottom);
 	cursor: pointer;
 	position: relative;
 	outline: none;
@@ -138,7 +218,7 @@ input[type="checkbox"] {
 }
 select {
 	padding: 15px;
-	background-color: rgb(88, 232, 88);
+	background-color: var(--select);
 	border: none;
 	border-radius: 8px;
 	cursor: pointer;
diff --git a/assets/css/index.css b/assets/css/index.css
index adb000f..3ba02cc 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,12 +1,81 @@
-:root {
+:root[theme="light"] {
+	--background: #fff;
+	--text: rgb(45, 45, 45);
+	--box-main: #eef4f3;
+	--box-toggle: rgb(215 238 233);
+	--box-toggleOn: rgb(28 232 138);
+	--item-bg: #dddddd;
+	--box-shadow: none;
+	--select: rgb(127, 253, 127);
+	--greenBtn: #6ade1d;
+	--greenBtn-bottom: #54a31f;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+
+:root[theme="dark"] {
 	--background: rgb(40, 40, 40);
 	--text: white;
 	--box-main: rgb(80, 80, 80);
 	--box-toggle: rgb(70, 70, 70);
 	--box-toggleOn: rgb(28 232 138);
-	--theme-toggle: rgb(80, 193, 238);
 	--item-bg: rgb(75, 75, 75);
 	--box-shadow: none;
+	--select: rgb(127, 253, 127);
+	--greenBtn: #6acd29;
+	--greenBtn-bottom: #4c8824;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+
+:root[theme="frappe"] {
+	--background: #232634;
+	--text: #c6d0f5;
+	--box-main: #303446;
+	--box-toggle: #414559;
+	--box-toggleOn: #607dc1;
+	--item-bg: #414559;
+	--select: #8caaee;
+	--greenBtn: #78c346;
+	--greenBtn-bottom: #597844;
+	--redBtn: #d64d4f;
+	--redBtn-bottom: #854243;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+:root[theme="onedark"] {
+	--background: #282C34	;
+	--text: #d2d6df;
+	--box-main: #4D515D;
+	--box-toggle: #2F333D;
+	--box-toggleOn: #13a3b7;
+	--item-bg: #4D515D;
+	--select: #57b6c2;
+	--greenBtn: #85cf50;
+	--greenBtn-bottom: #406923;
+	--redBtn: #be2d39;
+	--redBtn-bottom: #791a22;
+	--blueBtn: rgb(80, 128, 230);
+	--blueBtn-bottom: rgb(44, 78, 180);
+}
+:root[theme="matrix"] {
+	--background: #0D0208;
+	--text: #00FF41;
+	--box-main: #0c2216;
+	--box-toggle: #214338;
+	--box-toggleOn: #24782e;
+	--item-bg: #214338;
+	--select: #00FF41;
+	--greenBtn: #19b42b;
+	--greenBtn-bottom: #10701c;
+	--redBtn: #19b42b;
+	--redBtn-bottom: #10701c;
+	--blueBtn: #19b42b;
+	--blueBtn-bottom: #10701c;
 }
 
 body {
@@ -84,6 +153,18 @@ body {
 	z-index: 2;
 	font-family: sans-serif;
 }
+
+#themeToggle {
+	backdrop-filter: blur(16px) saturate(160%);
+	-webkit-backdrop-filter: blur(16px) saturate(160%);
+	background-color: rgb(17, 25, 40);
+	color:white;
+	padding:10px;
+	border-radius: 5px;
+	outline: none;
+	border:none;
+	font-size: large;
+}
 .menuItem {
 	color: white;
 	text-decoration: none;
@@ -142,9 +223,11 @@ body {
 	border-radius: 8px;
 	border: none;
 	outline: none;
-	width: 45%;
+	width: 50%;
 	text-align: center;
-	background-color: rgb(127, 253, 127);
+	background-color: var(--box-toggle);
+	color: var(--text);
+	font-size: large;
 }
 
 .itemTitle {
@@ -221,6 +304,7 @@ body {
 #options {
 	display: none;
 	position: absolute;
+	overflow:hidden;
 	z-index: 1;
 	left: 0;
 	right: 0;
@@ -253,11 +337,11 @@ body {
 	background-color: var(--box-toggleOn);
 }
 
-select {
-	padding: 15px;
-	background-color: rgb(127, 253, 127);
+.select {
+	padding: 12px 15px;
+	background-color: var(--select);
 	border: none;
-	border-radius: 8px;
+	border-radius: 10px;
 	cursor: pointer;
 	font-size: large;
 	margin: 8px;
@@ -290,10 +374,10 @@ input[type="number"]::-webkit-outer-spin-button {
 .submitBtn {
 	padding: 15px;
 	border-radius: 10px;
-	background-color: rgb(4, 207, 21);
+	background-color: var(--greenBtn);
 	color: white;
 	border: none;
-	border-bottom: 5.5px solid rgb(11, 158, 11);
+	border-bottom: 5.5px solid var(--greenBtn-bottom);
 	font-size: large;
 	cursor: pointer;
 	display: inline-block;
@@ -335,7 +419,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 #incorrectMsg {
-	color: rgb(237, 67, 67);
+	color: var(--redBtn);
 }
 
 #errorBtn {
@@ -373,29 +457,6 @@ svg {
 	margin-left: 20px;
 }
 
-#themeToggle {
-	width: 55px;
-	height: 30px;
-	background-color: var(--theme-toggle);
-	border-radius: 40px;
-	display: flex;
-	cursor: pointer;
-	transition: linear;
-	transition-duration: 0.4s;
-}
-
-#themeToggleInside {
-	background-color: rgb(255, 255, 255);
-	border-radius: 30px;
-	width: 22px;
-	height: 22px;
-	margin: 4px;
-	position: relative;
-	transition: linear;
-	transition-duration: 0.4s;
-	left: 0px;
-}
-
 .savedMsg {
 	color: rgb(52, 170, 234);
 	cursor: pointer;
@@ -409,9 +470,9 @@ button {
 
 #extractBtn {
 	color: white;
-	background-color: rgb(80, 128, 230);
+	background-color: var(--blueBtn);
 	border: none;
-	border-bottom: 4px solid rgb(44, 78, 180);
+	border-bottom: 4px solid var(--blueBtn-bottom);
 	position: relative;
 	padding: 15px;
 	border-radius: 10px;
@@ -428,9 +489,9 @@ button {
 
 .advancedToggle {
 	color: white;
-	background-color: rgb(217, 68, 68);
+	background-color: var(--redBtn);
 	border: none;
-	border-bottom: 5px solid rgb(180, 49, 49);
+	border-bottom: 5px solid var(--redBtn-bottom);
 	position: relative;
 	padding: 15px;
 	border-radius: 10px;
diff --git a/html/about.html b/html/about.html
index 32ad683..489a0d0 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="dark">
 
 <head>
     <meta charset="UTF-8">
@@ -18,7 +18,8 @@
     </div>
     <h1>ytDownloader </h1><span id="version"></span>
 
-    <p id="txt1">ytDownloader lets you download videos and audios from hundreds of sites like Youtube, Facebook, Instagram, Tiktok, Twitter and so on</p>
+    <p id="txt1">ytDownloader lets you download videos and audios from hundreds of sites like Youtube, Facebook,
+        Instagram, Tiktok, Twitter and so on</p>
 
     <p id="txt2">It's a Free and Open Source app built on top of Node.js and Electron. yt-dlp has been used for
         downloading</p>
@@ -30,6 +31,10 @@
 
         const { ipcRenderer, shell } = require("electron")
 
+        const storageTheme = localStorage.getItem("theme");
+        if (storageTheme) {
+            document.documentElement.setAttribute("theme", storageTheme)
+        }
         ipcRenderer.send("get-version")
         ipcRenderer.once("version", (event, version) => {
             document.getElementById("version").textContent = version;
diff --git a/html/index.html b/html/index.html
index 0b9e4ef..14a9e6f 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="dark">
 
 <head>
     <header></header>
@@ -39,10 +39,6 @@
 <span id="popupText">Text copied</span>
 
 <body>
-    <!-- Theme toggle -->
-    <div id="themeToggle" onclick="toggle()">
-        <div id="themeToggleInside"></div>
-    </div>
 
     <!-- Menu icon -->
     <img src="../assets/images/menu.png" alt="menu" id="menuIcon">
@@ -53,6 +49,14 @@
         <!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> -->
         <a id="preferenceWin" class="menuItem">Preferences</a>
         <a id="aboutWin" class="menuItem">About</a>
+        <span class="menuItem">Theme:</span>
+        <select name="themeToggle" id="themeToggle">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="frappe">Frappé</option>
+            <option value="onedark">One dark</option>
+            <option value="matrix">Matrix</option>
+        </select>
     </div>
 
     <button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button>
@@ -87,7 +91,7 @@
 
         <div id="videoList">
             <label class="formatSelect">Select Format </label>
-            <select id="videoFormatSelect">
+            <select id="videoFormatSelect" class="select">
             </select>
             <br>
             <input type="hidden" name="url" class="url" id="url">
@@ -98,7 +102,7 @@
         <div id="audioList">
             <div id="audioPresent">
                 <label class="formatSelect">Select Format </label>
-                <select id="audioFormatSelect">
+                <select id="audioFormatSelect" class="select">
                 </select>
                 <br>
                 <input type="hidden" name="url" class="url">
@@ -137,16 +141,13 @@
                 <input id="subChecked" class="cb" type="checkbox">
             </div>
 
-
-
-
         </div>
 
         <!-- Extraction options start -->
         <div id="audioExtract">
             <h2 id="extractHeader">Extract Audio</h2>
             <label class="formatSelect">Select Format </label>
-            <select id="extractSelection">
+            <select id="extractSelection" class="select">
                 <option value="mp3">Mp3</option>
                 <option value="aac">Aac</option>
                 <option value="m4a">M4a</option>
@@ -157,7 +158,7 @@
                 <option value="vorbis">Vorbis (ogg)</option>
             </select>
             <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
-            <select id="extractQualitySelect">
+            <select id="extractQualitySelect" class="select">
                 <option id="extractQualityNormal" value="5">Normal</option>
                 <option id="extractQualityBest" value="0">Best</option>
                 <option id="extractQualityGood" value="2">Good</option>
diff --git a/html/playlist.html b/html/playlist.html
index 47bba87..7c1af64 100644
--- a/html/playlist.html
+++ b/html/playlist.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="dark">
 
 <head>
     <meta charset="UTF-8">
@@ -44,10 +44,6 @@
 <body>
     <!-- Popup message -->
     <span id="popupText">Text copied</span>
-    <!-- Theme toggle -->
-    <div id="themeToggle" onclick="toggle()">
-        <div id="themeToggleInside"></div>
-    </div>
 
     <!-- Menu icon -->
     <img src="../assets/images/menu.png" alt="menu" id="menuIcon">
@@ -57,6 +53,12 @@
         <a id="homeWin" class="menuItem">Homepage</a>
         <a id="preferenceWin" class="menuItem">Preferences</a>
         <a id="aboutWin" class="menuItem">About</a>
+        <span class="menuItem">Theme:</span>
+        <select name="themeToggle" id="themeToggle">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="frappe">Frappé</option>
+        </select>
     </div>
 
     <button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>
@@ -72,7 +74,7 @@
         <br><br>
         <div id="videoBox">
             <label id="videoFormat">Select Video Format </label>
-            <select id="select">
+            <select id="select" class="select">
                 <option value="best" id="bestVideoOption">Best</option>
                 <option value="worst" id="worstVideoOption">Worst</option>
                 <option value="useConfig" id="useConfigTxt">Use config file</option>
diff --git a/html/preferences.html b/html/preferences.html
index f9d5906..51369e4 100644
--- a/html/preferences.html
+++ b/html/preferences.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="dark">
 
 <head>
     <meta charset="UTF-8">
@@ -39,14 +39,7 @@
 
     <br>
 
-    <div class="prefBox">
-        <span id="transparentText">Enable transparent dark mode(only Linux, needs restart)</span><input type="checkbox"
-            class="cb" id="enableTransparent">
-    </div>
-    <br>
-
-
-    <!-- Language -->
+   <!-- Language -->
     <div class="prefBox">
         <label id="selectLn">Select Language (Requires reload)</label>
         <select id="select" onchange="changeLanguage()">
diff --git a/main.js b/main.js
index 7c1251d..20e1f96 100644
--- a/main.js
+++ b/main.js
@@ -24,16 +24,10 @@ let trayEnabled = false;
 app.commandLine.appendSwitch("--enable-features", "Metal");
 
 function createWindow() {
-	let isTransparent = false;
-	if (process.platform == "linux") {
-		isTransparent = true;
-	}
-
 	win = new BrowserWindow({
 		show: false,
 		icon: __dirname + "/assets/images/icon.png",
 		spellcheck: false,
-		transparent: isTransparent,
 		webPreferences: {
 			nodeIntegration: true,
 			contextIsolation: false,
@@ -200,10 +194,6 @@ ipcMain.on("load-win", (event, file) => {
 	win.loadFile(file);
 });
 ipcMain.on("load-page", (event, file) => {
-	let isTransparent = false;
-	if (process.platform == "linux") {
-		isTransparent = true;
-	}
 	secondaryWindow = new BrowserWindow({
 		webPreferences: {
 			nodeIntegration: true,
@@ -212,7 +202,6 @@ ipcMain.on("load-page", (event, file) => {
 		parent: win,
 		modal: true,
 		show: false,
-		transparent: isTransparent
 	});
 	secondaryWindow.loadFile(file);
 	secondaryWindow.setMenu(null);
diff --git a/src/common.js b/src/common.js
index 2fc9728..b58e779 100644
--- a/src/common.js
+++ b/src/common.js
@@ -32,12 +32,6 @@ getId("menuIcon").addEventListener("click", (event) => {
 		}, 150);
 	}
 });
-
-// Toggle theme
-let circle = getId("themeToggleInside");
-let darkTheme = true;
-circle.style.left = "25px";
-
 const root = document.querySelector(":root");
 
 let enabledTransparent = localStorage.getItem("enabledTransparent");
@@ -48,45 +42,18 @@ if (enabledTransparent == "true") {
 	bgColor = "rgb(40,40,40)";
 }
 
-function toggle() {
-	if (darkTheme == false) {
-		// Switching to dark theme
-		circle.style.left = "25px";
 
-		root.style.setProperty("--background", bgColor);
-		root.style.setProperty("--text", "white");
-		root.style.setProperty("--box-main", "rgb(80,80,80)");
-		root.style.setProperty("--box-toggle", "rgb(70,70,70)");
-		root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
-		root.style.setProperty("--item-bg", "rgb(75, 75, 75)");
-
-		darkTheme = true;
-		localStorage.setItem("theme", "dark");
-	} else {
-		// Switching to light theme
-		circle.style.left = "0px";
-
-		root.style.setProperty("--background", "white");
-		root.style.setProperty("--text", "rgb(45, 45, 45)");
-		root.style.setProperty("--box-main", "#eef4f3");
-		root.style.setProperty("--box-toggle", "rgb(215 238 233)");
-		root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
-		root.style.setProperty("--item-bg", "#dddddd");
-
-		darkTheme = false;
-		localStorage.setItem("theme", "light");
-	}
-}
+getId("themeToggle").addEventListener("change", ()=>{
+	document.documentElement.setAttribute("theme", getId("themeToggle").value)
+	localStorage.setItem("theme", getId("themeToggle").value)
+})
 
 const storageTheme = localStorage.getItem("theme");
-
-if (storageTheme == "dark") {
-	darkTheme = false;
-	toggle();
-} else if (storageTheme == "light") {
-	darkTheme = true;
-	toggle();
+if (storageTheme){
+	document.documentElement.setAttribute("theme", storageTheme)
+	getId("themeToggle").value = storageTheme
 }
+
 ////
 let advancedHidden = true;
 
diff --git a/src/preferences.js b/src/preferences.js
index 09f919c..55f762e 100644
--- a/src/preferences.js
+++ b/src/preferences.js
@@ -1,3 +1,8 @@
+const storageTheme = localStorage.getItem("theme");
+if (storageTheme){
+	document.documentElement.setAttribute("theme", storageTheme)
+}
+
 let rightToLeft = false;
 if (localStorage.getItem("rightToLeft")) {
 	rightToLeft = localStorage.getItem("rightToLeft");
@@ -35,19 +40,6 @@ ipcRenderer.on("downloadPath", (event, downloadPath) => {
 	getId("path").textContent = downloadPath[0];
 });
 
-const enabledTransparent = getId("enableTransparent");
-enabledTransparent.addEventListener("change", (event) => {
-	if (enabledTransparent.checked) {
-		localStorage.setItem("enabledTransparent", "true");
-	} else {
-		localStorage.setItem("enabledTransparent", "false");
-	}
-});
-
-const localEnabledTransparent = localStorage.getItem("enabledTransparent");
-if (localEnabledTransparent == "true") {
-	enabledTransparent.checked = true;
-}
 
 // Selecting config directory
 
diff --git a/src/translate_preferences.js b/src/translate_preferences.js
index cb04de8..330fabe 100644
--- a/src/translate_preferences.js
+++ b/src/translate_preferences.js
@@ -12,9 +12,6 @@ getId("back").textContent = i18n.__("Homepage");
 getId("dlText").textContent = i18n.__("Download location");
 getId("clText").innerHTML = i18n.__("Current download location - ");
 getId("selectLocation").textContent = i18n.__("Select Download Location");
-getId("transparentText").textContent = i18n.__(
-	"Enable transparent dark mode(only Linux, needs relaunch)"
-);
 getId("preferences").textContent = i18n.__("Preferences");
 getId("selectLn").textContent = i18n.__("Select Language (Requires relaunch)");
 getId("browserInfo").title = i18n.__(
diff --git a/translations/en.json b/translations/en.json
index 3d49c2e..7a3b380 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -99,5 +99,10 @@
 	"Disable auto updates":"Disable auto updates",
 	"ultralow":"ultralow",
 	"Close app when download finishes":"Close app when download finishes",
-	"Auto":"Auto"
+	"Auto":"Auto",
+	"Theme":"Theme",
+	"Light":"Dark",
+	"Frappé":"Frappé",
+	"One Dark":"One Dark",
+	"Matrix":"Matrix"
 }