diff --git a/css/main.css b/css/main.css
index dc24e51b..58ac7d9c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,6 +1,9 @@
-@import url(./vars.css);
+/*@import url(./themes/dark.css);*/
+@import url(./themes/light.css);
+
 @import url(./urls.css);
 @import url(./reset.css);
+
 @import url(./style.css);
 @import url(./icons.css);
 @import url(./help.css);
diff --git a/css/style.css b/css/style.css
index e9d374a2..ad45e44e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,7 +6,7 @@ body {
     width: 100%;
     height: 95%;
     overflow: hidden;
-    background-color: white;
+    background-color: var(--background-color);
 }
 
 body,
@@ -93,7 +93,7 @@ code {
     bottom: 5px;
     left: 16px;
     font-size: 10px;
-    color: var(--icon-color);
+    color: var(--text-color);
     content: attr(data-progress);
 }
 
@@ -113,7 +113,7 @@ code {
 
 .cmd-button:active {
     color: white;
-    background-color: var(--icon-color);
+    background-color: var(--text-color);
     transition: ease 0.1s;
 }
 
@@ -157,6 +157,7 @@ a:active {
 
 .fm-header {
     font-weight: bold;
+    color: var(--column-color);
 }
 
 .panel-left {
@@ -203,6 +204,10 @@ a:active {
     width: 26%;
 }
 
+.name a {
+    color: var(--text-color);
+}
+
 .name a:hover {
     cursor: default;
 }
@@ -212,11 +217,13 @@ a:active {
     width: 12%;
     margin-right: 27px;
     text-align: right;
+    color: var(--column-color);
 }
 
 .date {
     float: left;
     width: 19%;
+    color: var(--column-color);
 }
 
 .owner {
@@ -228,11 +235,13 @@ a:active {
      * spaces behind lines
      */
     vertical-align: top;
+    color: var(--column-color);
 }
 
 .mode {
     float: right;
     width: 18%;
+    color: var(--column-color);
 }
 
 .reduce-text {
diff --git a/css/themes/dark.css b/css/themes/dark.css
new file mode 100644
index 00000000..fc4461bf
--- /dev/null
+++ b/css/themes/dark.css
@@ -0,0 +1,6 @@
+:root {
+    --text-color: #317bf9;
+    --border-color: rgb(49 123 249 / 40%);
+    --background-color: #22272e;
+    --column-color: #c6d1df;
+}
diff --git a/css/themes/light.css b/css/themes/light.css
new file mode 100644
index 00000000..aaf3ebd9
--- /dev/null
+++ b/css/themes/light.css
@@ -0,0 +1,6 @@
+:root {
+    --text-color: blue;
+    --border-color: rgb(49 123 249 / 40%);
+    --background-color: white;
+    --column-color: black;
+}
diff --git a/css/user-menu.css b/css/user-menu.css
index 93eff00a..3f78f63c 100644
--- a/css/user-menu.css
+++ b/css/user-menu.css
@@ -9,7 +9,7 @@
 }
 
 .cloudcmd-user-menu > option:checked {
-    box-shadow: 20px -20px 0 2px var(--icon-color) inset;
+    box-shadow: 20px -20px 0 2px var(--text-color) inset;
 }
 
 .cloudcmd-user-menu-button {
diff --git a/css/vars.css b/css/vars.css
index 0f8c9579..ee64b015 100644
--- a/css/vars.css
+++ b/css/vars.css
@@ -1,4 +1,4 @@
 :root {
-    --icon-color: rgb(49 123 249);
+    --text-color: rgb(49 123 249);
     --border-color: rgb(49 123 249 / 40%);
 }