diff --git a/public/css/darkMode.css b/public/css/darkMode.css
new file mode 100644
index 0000000..02401da
--- /dev/null
+++ b/public/css/darkMode.css
@@ -0,0 +1,7 @@
+:root {
+ --main-background: #141414;
+ --secondary-background: #242424;
+ --main-text: #eeeeee;
+ --panels-background: #1a1a1a;
+ --panels-text: #ffffff;
+}
diff --git a/public/css/style.css b/public/css/style.css
index aea14a8..1bd90d9 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,20 +1,32 @@
+:root {
+ --main-background: #ffffff;
+ --secondary-background: #eeeeee;
+ --main-text: #333333;
+ --main-scroll: #555;
+ --panels-background: #222324;
+ --panels-text: #ffffff;
+ --accent-color: #0A84FF;
+ --tag-background: #0062c4;
+ --tag-text: #ffffff;
+}
+
html{height: 100%;}
-body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: #ffffff; color: #333333;}
+body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: var(--main-background); color: var(--main-text);}
/* Sidebar section selector */
aside#sidebar{
- background-color: #222324;
+ background-color: var(--panels-background);
width: 48px;
height: 100%;
position: absolute;
- color: #ffffff;
+ color: var(--panels-text);
}
aside#sidebar > .side_icon{
font-size: 24px;
margin: 12px;
}
.side_icon.active{
- color: #0A84FF;
+ color: var(--accent-color);
}
/* Rest of the app */
@@ -27,7 +39,7 @@ main#main_content{
/* Middle section */
div#middle_section {
- background-color: #ffffff;
+ background-color: var(--main-background);
width: 100%;
height: 100%;
min-width: 10px;
@@ -41,10 +53,10 @@ div#middle_section {
margin: 8px;
border: 0px;
border-radius: 6px;
- background-color: #eeeeee;
+ background-color: var(--secondary-background);
}
#content{
- background-color: #ffffff;
+ background-color: var(--main-background);
width: calc(100% - 10px);
height: calc(100% - 48px);
overflow-y: scroll;
@@ -56,11 +68,11 @@ div#middle_section {
}
#content::-webkit-scrollbar-track {
- background: #ffffff;
+ background: var(--main-background);
}
#content::-webkit-scrollbar-thumb {
- background: #555;
+ background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
@@ -145,8 +157,8 @@ div#middle_section {
/* Download tab section */
div#download_tab_container{
- background-color: #222324;
- color: #ffffff;
+ background-color: var(--panels-background);
+ color: var(--panels-text);
height: 100%;
width: auto;
display: flex;
@@ -186,12 +198,12 @@ img.circle {
}
.coverart{
- background-color: #eee;
+ background-color: var(--secondary-background);
}
span.tag {
- background-color: #222324;
+ background-color: var(--tag-background);
border-radius: 2px;
- color: #ffffff;
+ color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
diff --git a/public/index.html b/public/index.html
index cc7739a..964ac7b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,9 +4,15 @@
deemix
+
+