variables for css

public/css/create_thread.css

@@ -1,5 +1,5 @@
 .title {
-  color: #4d18e6;
+  color: var(--main);
   font-weight: 700;
 }
 
@@ -16,8 +16,8 @@ form {
   font-family: inherit;
   display: block;
   font-weight: 600;
-  color: #4c4c4c;
+  color: var(--input-clr);
   width: 100%;
   margin-bottom: 10px;
-  border: 2px solid #d9d9d9;
+  border: 2px solid var(--borders);
 }

public/css/login.css

@@ -1,5 +1,5 @@
 .title {
-  color: #4d18e6;
+  color: var(--main);
   font-weight: 700;
 }
 
@@ -9,8 +9,8 @@ form {
   flex-direction: column;
   max-width: 500px;
   margin: 0 auto;
-  width:100%;
+  width: 100%;
-  padding:8px;
+  padding: 8px;
 }
 
 
@@ -19,8 +19,8 @@ form {
   font-family: inherit;
   display: block;
   font-weight: 600;
-  color: #4c4c4c;
+  color: var(--input-clr);
   width: 100%;
   margin-bottom: 10px;
-  border: 2px solid #d9d9d9;
+  border: 2px solid var(--borders);
 }

public/css/navbar.css

@@ -24,12 +24,12 @@ a {
 .logo {
     padding: 10px;
     font-size: 28px;
-    color: #4d18e6;
+    color: var(--main);
     font-weight: 900;
 }
 
 .logo>span {
-    color: #606060;
+    color: var(--second);
 }
 
 .buttons {
@@ -39,18 +39,18 @@ a {
 }
 
 .btn-primary {
-    color: #e8e8e8;
+    color: var(--btn-clr-1);
-    background-color: #4d18e6;
+    background-color: var(--main);
     padding: 10px 20px 10px 20px;
     border-radius: 4px;
     font-weight: 700;
     margin: 10px;
     cursor: pointer;
-    border: 2px solid #4d18e6;
+    border: 2px solid var(--main);
 }
 
 .btn-danger {
-    color: #e8e8e8;
+    color: var(--btn-clr-1);
     background-color: #ff0000;
     padding: 0px 10px 0px 10px;
 
@@ -63,26 +63,26 @@ a {
 
 
 .btn-outline-primary {
-    color: #4d18e6;
+    color: var(--main);
     padding: 10px 20px 10px 20px;
 
     border-radius: 4px;
     font-weight: 700;
     margin: 10px;
     cursor: pointer;
-    border: 2px solid #e2e2e2;
+    border: 2px solid var(--borders);
 }
 
 
 
 .btn-primary:hover {
-    color: #4d18e6;
+    color: var(--main);
     background-color: rgba(0, 0, 0, 0);
-    border: 2px solid #4d18e6;
+    border: 2px solid var(--main);
 }
 
 .btn-outline-primary:hover {
-    border: 2px solid #4d18e6;
+    border: 2px solid var(--main);
 }
 
 .btn-danger:hover {
@@ -101,8 +101,9 @@ a {
 .menu-item {
     padding: 10px;
     font-weight: 700;
-    background-color: #606060;
+    background-color: var(--second);
-    color: #ffffff;
+    color: var(--menu-item);
+
     border-radius: 5px;
     width: 100%;
     text-align: center;
@@ -112,7 +113,7 @@ a {
 }
 
 .active-menu {
-    background-color: #4d18e6;
+    background-color: var(--main);
 }
 
 body {
@@ -123,13 +124,13 @@ body {
 
 
 .menu-item:hover {
-    background-color: #4d18e6;
+    background-color: var(--main);
 }
 
 .admin-bar {
     font-size: 15px;
-    color: #ffffff;
+    color: var(--menu-item);
-    background: #4d18e6;
+    background: var(--main);
     text-align: center;
 }
 
@@ -150,7 +151,7 @@ div.avatar {
     justify-content: center;
     font-size: 18px;
     font-weight: 700;
-    color: #4d18e6;
+    color: var(--main);
 }
 
 @media (max-width: 992px) {

public/css/themes/black.css

@@ -0,0 +1,12 @@
+:root {
+    --main: #4d18e6;
+    --btn-clr-1: #e8e8e8;
+    --menu-item: #ffffff;
+    --borders: #d9d9d9;
+    --input-clr: #414141;
+    --box-shadow: #c3c3c3;
+    --second: #747474;
+    --reaction-hover: #151515;
+    --t-username: #555;
+    background-color: #ffffff;
+}

public/css/themes/default.css

@@ -0,0 +1,12 @@
+:root {
+    --main: #4d18e6;
+    --btn-clr-1: #e8e8e8;
+    --menu-item: #ffffff;
+    --borders: #d9d9d9;
+    --input-clr: #414141;
+    --box-shadow: #c3c3c3;
+    --second: #747474;
+    --reaction-hover: #151515;
+    --t-username: #555;
+    background-color: #ffffff;
+}

public/css/thread.css

@@ -1,16 +1,16 @@
 .title {
-  color: #414141;
+  color: var(--input-clr);
   font-weight: 700;
   font-size: 36px;
 }
 
 .date {
-  color: gray;
+  color: var(--second);
 }
 
 .message {
   max-width: 800px;
-  box-shadow: 0 0 5px 0 #c3c3c3;
+  box-shadow: 0 0 5px 0 var(--box-shadow);
   margin: 10px auto;
   padding: 20px;
   display: flex;
@@ -20,7 +20,7 @@
 
 .message .left {
   text-align: center;
-  border-right: 2px solid #d9d9d9;
+  border-right: 2px solid var(--borders);
 }
 
 .message .left img {
@@ -31,7 +31,7 @@
 }
 
 .message .left .username {
-  color: #555;
+  color: var(--t-username);
 }
 
 .content {
@@ -52,13 +52,13 @@
   align-items: center;
   gap: 5px;
   padding: 4px;
-  color: #747474;
+  color: var(--second);
   cursor: pointer;
   transition: color 0.3s ease;
 }
 
 .reactions div:hover {
-  color: #151515;
+  color: var(--reaction-hover);
 
 }
 
@@ -68,7 +68,7 @@
 
 
 .pagination {
-  box-shadow: 0 0 5px 0 #c3c3c3;
+  box-shadow: 0 0 5px 0 var(--box-shadow);
   margin: 10px auto;
   padding: 8px;
   display: flex;
@@ -81,7 +81,7 @@
 
 .pagination .back,
 .pagination .after {
-  color: #747474;
+  color: var(--second);
   font-size: 26px;
   cursor: pointer;
 }
@@ -94,9 +94,9 @@
 }
 
 .pagination .number {
-  color: #747474;
+  color: var(--second);
   font-size: 22px;
-  border: 0 0 5px #747474;
+  border: 0 0 5px var(--second);
   padding: 8px;
   border-radius: 2px;
   font-weight: 600;
@@ -105,7 +105,7 @@
 }
 
 .pagination .number.active {
-  color: #4d18e6;
+  color: var(--main);
   font-weight: 700;
 }
 
@@ -115,7 +115,7 @@
   right: 20px;
   font-size: 22px;
   top: 10px;
-  color: #747474;
+  color: var(--second);
   cursor: pointer;
 }
 
@@ -123,7 +123,7 @@
   position: absolute;
   top: 50px;
   right: 0;
-  background-color: #e6e6e6;
+  background-color: var(--btn-clr-1);
   width: 100px;
   text-align: center;
   display: none;
@@ -138,69 +138,82 @@
   margin: 8px;
   cursor: pointer;
 }
-.dots-menu a:hover:nth-child(1){
+
-color:#e70000}
+.dots-menu a:hover:nth-child(1) {
-.dots-menu a:hover:nth-child(2){
+  color: #e70000
-color:#4d18e6}
+}
+
+.dots-menu a:hover:nth-child(2) {
+  color: var(--main);
+
+}
 
 
 /* Media Query  */
 
-@media(max-width:980px){
+@media(max-width:980px) {
-  .message{
+  .message {
-     margin: 10px 20px;
+    margin: 10px 20px;
-  max-width: 100%;
+    max-width: 100%;
-    flex-direction:column;
+    flex-direction: column;
-    position:relative;
+    position: relative;
   }
-  .message .left{
+
-      padding: 40px;
+  .message .left {
-border:none;
+    padding: 40px;
-    border-bottom: 2px solid #d9d9d9;
+    border: none;
+    border-bottom: 2px solid var(--borders);
 
   }
-  .message .left img{
+
-      width: 50px;
+  .message .left img {
-      height: 50px;
+    width: 50px;
-      border-radius: 50%;
+    height: 50px;
-      margin-right: 5px;
+    border-radius: 50%;
-      position: absolute;
+    margin-right: 5px;
-      left: 20px;
+    position: absolute;
-      top: 20px;
+    left: 20px;
+    top: 20px;
   }
-  .message .left .username{
+
+  .message .left .username {
     position: absolute;
     top: 20px;
     left: 80px;
   }
-  .message .date:nth-of-type(3){
+
+  .message .date:nth-of-type(3) {
     position: absolute;
-right: 20px;
+    right: 20px;
-top: 20px;
+    top: 20px;
-  }
-   .message .date:nth-of-type(2){
-    position: absolute;
-right: 20px;
-top: 40px;
   }
 
-  .dots{
+  .message .date:nth-of-type(2) {
-   position: absolute;
+    position: absolute;
-right: auto;
+    right: 20px;
-top: 70px;
+    top: 40px;
-left: 40px;
   }
-  .dots-menu{
+
-position: absolute;
+  .dots {
-left: 70px;
+    position: absolute;
-top: 60px;
+    right: auto;
-width: 120px;
+    top: 70px;
+    left: 40px;
   }
-  .dots-menu.active{
+
-    display:flex;
+  .dots-menu {
+    position: absolute;
+    left: 70px;
+    top: 60px;
+    width: 120px;
+  }
+
+  .dots-menu.active {
+    display: flex;
+  }
+
+  .content {
+    width: 50%;
   }
-.content{
-  width:50%;
-}
 
 }

public/css/threads.css

@@ -6,7 +6,7 @@
 .threads-box {
   width: 100%;
   padding: 8px;
-  box-shadow: 0 0 5px 0 #cbcbcb;
+  box-shadow: 0 0 5px 0 var(--box-shadow);
   display: flex;
   justify-content: space-between;
   margin: 0px 0px 8px 0px;
@@ -15,7 +15,7 @@
 }
 
 .threads-box:hover {
-  background-color: #e2e2e2;
+  background-color: var(--borders);
 }
 
 .thread-box-title {

public/css/user.css

@@ -1,12 +1,12 @@
 .title {
-  color: #4d18e6;
+  color: var(--main);
   font-weight: 700;
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  box-shadow: 0 0 5px 0 #bebebe;
+  box-shadow: 0 0 5px 0 var(--box-shadow);
   max-width: 900px;
   margin: 0 auto;
   padding: 10px;
@@ -22,10 +22,10 @@
 }
 
 .box-title{
-  color: #4d18e6;
+  color: var(--main);
   font-weight: 300;
 }
 .box-value {
-  color: #606060;
+  color: var(--second);
   font-weight: 300;
 }

public/css/users.css

@@ -12,7 +12,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0 0 5px 0 #beb9b9;
+  box-shadow: 0 0 5px 0 var(--box-shadow);
   max-width:500px;
 }
 

views/admin.ejs

@@ -25,12 +25,12 @@
     </style>
 
   <div>
-    <h1 style="color: #4d18e6;">Welcome to the admin panel of the forum, <%= user.name %>!</h1>
+    <h1 style="color: var(--main);">Welcome to the admin panel of the forum, <%= user.name %>!</h1>
     
     <a class="btn-primary" onclick="ban();">IP BAN</a>
     <a class="btn-outline-primary" onclick="unban();">REMOVE IP BAN</a>
    
-    <h2 style="color: #606060;">Banned users:</h2>
+    <h2 style="color: var(--second);">Banned users:</h2>
 
      <table >
        <tr>

views/create_thread.ejs

@@ -15,11 +15,11 @@
     <h2 class="title" style="align-self: baseline;">Title:</h2>
     <input name="title" class="input"></input>
 
-    <hr>
+ 
     <h2 class="title" style="align-self: baseline;">Content:</h2>
     <textarea rows="4" cols="50" name="content" class="input"></textarea>
 
-    <hr>
+   
     <button class="btn-primary"  style="width:100%" type="submit">Create Thread!</button>
 </form>
 

views/error.ejs

@@ -7,8 +7,8 @@
 <body style="text-align: center;">
   <%- include("extra/navbar") %>
 
-  <h1 style="color: #4d18e6;"><%= type %></h1>
+  <h1 style="color: var(--main);"><%= type %></h1>
-  <h2 style="color: #606060;"><%= error %></h2>
+  <h2 style="color: var(--second);"><%= error %></h2>
 
 </body>
 

views/extra/footer.ejs

@@ -2,7 +2,7 @@
   .footer {
     width: 100%;
     background-color: #f5f5f5;
-    color: #606060;
+    color: var(--second);
     text-align: center;
   }
 </style>

views/extra/meta.ejs

@@ -5,4 +5,5 @@
     <meta name="description" content="Akf-forum!">
     <meta name="author" content="Akif9748">
     <link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
+    <link rel="stylesheet" href="/css/themes/<%= theme %>.css" />
 </head>

views/index.ejs

@@ -13,7 +13,7 @@
   
     <div class="content">
         <% if (user) { %>
-            <h2 style="color: #4d18e6;"><div class="box-username">Welcome, <%= user.name %>
+            <h2 style="color: var(--main);"><div class="box-username">Welcome, <%= user.name %>
                         <div class="avatar"><img src="<%=user.avatar %>"></div>
 
                     </div>
@@ -24,13 +24,13 @@
             <a href="/login" class="btn-outline-primary">LOGOUT</a>
             <br>
         <% } else { %>
-            <h2 style="color: #4d18e6;">Welcome, Guest!<br>You can press the button to register:
+            <h2 style="color: var(--main);">Welcome, Guest!<br>You can press the button to register:
                 <a href="/register" class="btn-outline-primary">REGISTER</a>
         
             </h2>
          <% } %> 
          
-        <h2 style="color: #606060;">Statistics:</h2>
+        <h2 style="color: var(--second);">Statistics:</h2>
 
         <div class="box">
             <h2 class="box-title">Message count:</h2>