evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added multiple theme selector, compltely removed dark mode checkbox in settings

Browse Source
This commit is contained in:
Roberto Tonino
2020-05-14 18:57:43 +02:00
parent 62b3bb77c2
commit 88b51c09ac
8 changed files with 79 additions and 42221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/modules/base/base.css
View File

@@ -8,16 +8,9 @@
html {
height: 100vh;
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
--panels-scroll: #2a2c2c;
--accent-color: #0a84ff;
--accent-text: #ffffff;
--tag-background: #0062c4;
--tag-text: #ffffff;
--toast-background: #000000dd;
@@ -28,6 +21,16 @@ html {
--explicit-separator: 0.3125em;
}
html[data-theme='light'] {
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--panels-background: #222324;
--panels-text: #ffffff;
--accent-text: #ffffff;
}
html[data-theme='dark'] {
--main-background: #141414;
--secondary-background: #242424;

27
public/css/modules/sidebar.css
View File

@@ -47,11 +47,20 @@
padding: 9px;
}
#sidebar .side_icon::selection {
background: none;
}
.side_icon--theme {
cursor: default;
}
#sidebar .main_tablinks.active .side_icon {
color: var(--accent-color);
}
/* Theme selector */
#theme_selector {
margin-top: 20px;
display: flex;
@@ -74,27 +83,27 @@
visibility: visible;
}
#theme_togglers .theme_toggler {
width: 30px;
height: 30px;
.theme_toggler {
width: 25px;
height: 25px;
border-radius: 1000px;
border: 1px solid var(--accent-color);
border: 1px solid var(--separator);
cursor: pointer;
transition: border 200ms ease-in-out;
}
#theme_togglers .theme_toggler.active {
.theme_toggler--active {
border-width: 3px;
}
#theme_togglers .theme_toggler#light {
.theme_toggler[data-theme-variant='light'] {
background: white;
}
#theme_togglers .theme_toggler#dark {
.theme_toggler[data-theme-variant='dark'] {
background: #141414;
}
#sidebar .theme_selector_icon {
transform: rotate(45deg);
.theme_toggler[data-theme-variant='purple'] {
background: #460ead;
}