diff --git a/public/css/themes/black.css b/public/css/themes/black.css
index 1550472..cf60ff5 100644
--- a/public/css/themes/black.css
+++ b/public/css/themes/black.css
@@ -1,12 +1,13 @@
+
 :root {
-    --main: #4d18e6;
+    --main: #ac8fff;
     --btn-clr-1: #e8e8e8;
     --menu-item: #ffffff;
     --borders: #d9d9d9;
-    --input-clr: #414141;
+    --input-clr: #dcdcdc;
     --box-shadow: #c3c3c3;
-    --second: #747474;
-    --reaction-hover: #151515;
-    --t-username: #555;
-    background-color: #ffffff;
+    --second: #9f9f9f;
+    --reaction-hover: #ebebeb;
+    --t-username: rgb(236 236 236);
+    background-color: #000000;
 }
\ No newline at end of file
diff --git a/public/css/thread.css b/public/css/thread.css
index 9be1ae3..daa33d8 100644
--- a/public/css/thread.css
+++ b/public/css/thread.css
@@ -30,12 +30,13 @@
   margin-right: 5px;
 }
 
-.message .left .username {
+.message .left .username a {
   color: var(--t-username);
 }
 
 .content {
   width: 70%;
+  color: var(--reaction-hover);
 }
 
 .reactions {
diff --git a/public/css/threads.css b/public/css/threads.css
index 5e1fd91..01ed1cf 100644
--- a/public/css/threads.css
+++ b/public/css/threads.css
@@ -15,13 +15,15 @@
 }
 
 .threads-box:hover {
-  background-color: var(--borders);
+  background-color: var(--box-shadow);
 }
 
 .thread-box-title {
   padding: 10px;
   font-size: 18px;
   font-weight: 700;
+  color: var(--reaction-hover);
+
 }
 
 .thread-box-title>span {
diff --git a/public/css/users.css b/public/css/users.css
index 6c2c334..ea3dad2 100644
--- a/public/css/users.css
+++ b/public/css/users.css
@@ -20,8 +20,12 @@
   padding: 10px;
   margin: 8px;
   font-weight: 500;
-}
 
+}
+.user-box-title>a{
+  color: var(--reaction-hover);
+
+}
 .user-box-title>span {
   color: var(--important);
 }
diff --git a/routes/api/routes/users.js b/routes/api/routes/users.js
index 99965a2..293ce6b 100644
--- a/routes/api/routes/users.js
+++ b/routes/api/routes/users.js
@@ -59,8 +59,8 @@ app.patch("/:id/", async (req, res) => {
     const { user, member } = req;
 
     if (req.user.id !== member.id && !req.user.admin) return res.error(403, "You have not got permission for this.");
-    const { avatar, name, about } = req.body;
-    if (!avatar && !name&& !about) return res.error(400, "Missing member informations in request body.");
+    const { avatar, name, about, theme } = req.body;
+    if (!avatar && !name && !about && !theme) return res.error(400, "Missing member informations in request body.");
     if (avatar && /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g.test(avatar))
         member.avatar = avatar;
     if (name) {
@@ -69,9 +69,10 @@ app.patch("/:id/", async (req, res) => {
     }
 
     if (about) member.about = about;
+    if (theme) member.theme = member.theme === "default" ? "black" : "default";
+    member.theme = theme;
     member.edited = true;
 
-
     await member.save();
 
     res.complate(member);
diff --git a/views/admin.ejs b/views/admin.ejs
index ba1fc6d..704f0e8 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -17,6 +17,7 @@
       border: 1px solid #dddddd;
       text-align: left;
       padding: 8px;
+      color: var(--reaction-hover);
     }
     
     tr:nth-child(even) {
diff --git a/views/extra/navbar.ejs b/views/extra/navbar.ejs
index f890d23..0543453 100644
--- a/views/extra/navbar.ejs
+++ b/views/extra/navbar.ejs
@@ -18,8 +18,18 @@
             </div>
         </a>
         <a id="logout" href="/login" class="btn-primary">Logout</a>
- 
- 
+        <a onclick="invert()" class="btn-outline-primary"><%=(user.theme === "default" ? "black" : "default" ) + " mode" %></a>
+        <script>
+            async function invert() {
+                await fetch('/api/users/<%= user.id %>',{method:'PATCH',
+                    body:JSON.stringify({theme:"<%=user.theme === `default` ? `black` : `default` %>"}),
+            headers: {
+                "Content-Type": "application/json"
+            }
+                })
+               location.reload()
+            }
+        </script>
     <% } else { %>
             
         <a id="login" href="/login" class="btn-primary">Login</a>