New themes
This commit is contained in:
Andrew
parent
de9a693734
commit
951f82da8a
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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()">
|
||||
|
||||
11
main.js
11
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);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.__(
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user