Add light theme (programmatically)

Waujito · Mar 16, 2024 · e142c26 · e142c26
1 parent 220533b
commit e142c26
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 deletions.
diff --git a/web_frontend/assets/scss/library.scss b/web_frontend/assets/scss/library.scss
@@ -1,3 +1,4 @@
+// dark colors
 $dark-bg0: #181818;
 $dark-bg1: #1f1f1f;
 $dark-bg2: #2b2b2b;
@@ -10,6 +11,22 @@ $dark-hov0: #343434;
 
 $dark-popupMask-cl: rgba(255, 255, 255, 0.1);
 
+// light colors
+
+$light-bg0: #ffffff;
+$light-bg1: #cccccc;
+$light-bg2: #ffffff;
+$light-bg4: #e1e1e1;
+
+$light-cl0: #181818;
+$light-cl1: #1f1f1f;
+$light-cl2: #2b2b2b;
+
+$light-hov0: #aeaeae;
+
+$light-popupMask-cl: rgba(0, 0, 0, 0.2);
+
+// theme based colors
 $bg-func: $dark-bg0;
 $cl-func: $dark-cl1;
 $hov-func: $dark-hov0;
@@ -19,10 +36,31 @@ $bg-chat: $dark-bg1;
 $bg-message: $dark-bg2;
 $cl-message: $dark-cl2;
 
+$bg-func-active: $dark-bg2;
+
 $cl-ftext: $dark-cl0;
 
 $mask-color: $dark-popupMask-cl;
 
+//
+
+// $bg-func: $light-bg0;
+// $cl-func: $light-cl1;
+// $hov-func: $light-hov0;
+
+// $bg-chat: $light-bg1;
+
+// $bg-message: $light-bg2;
+// $cl-message: $light-cl2;
+
+// $bg-func-active: $light-bg4;
+
+// $cl-ftext: $light-cl0;
+
+// $mask-color: $light-popupMask-cl;
+
+//
+
 $green_button_normal: #2c9f4b;
 $green_button_hover: #237e3b;
 $green_button_pressed: #1b612e;

diff --git a/web_frontend/components/board/ChatBodyComponent.vue b/web_frontend/components/board/ChatBodyComponent.vue
@@ -131,7 +131,7 @@ const showInfo = ref<boolean>(false);
     align-items: center;
 
     background-color: $bg-func;
-    border-left: 2px solid $bg-message;
+    border-left: 2px solid $bg-func-active;
 
     cursor: pointer;
   }

diff --git a/web_frontend/components/board/ChatListComponent.vue b/web_frontend/components/board/ChatListComponent.vue
@@ -72,11 +72,11 @@ function chatCreated(chat: Chat) {
     user-select: none;
 
     &.activeChat {
-      background-color: $bg-message;
+      background-color: $bg-func-active;
     }
 
     &:hover {
-      background-color: $dark-hov0;
+      background-color: $hov-func;
     }
   }
 
@@ -89,11 +89,11 @@ function chatCreated(chat: Chat) {
     align-items: center;
     cursor: pointer;
 
-    background-color: $bg-message;
+    background-color: $bg-func-active;
 
     margin-top: 10px;
     &:hover {
-      background-color: $dark-hov0;
+      background-color: $hov-func;
     }
   }
 }

diff --git a/web_frontend/components/board/SendMessageComponent.vue b/web_frontend/components/board/SendMessageComponent.vue
@@ -109,7 +109,7 @@ function sendButton() {
   background-color: $bg-func;
   color: $cl-func;
 
-  border-left: 2px solid $bg-message;
+  border-left: 2px solid $bg-func-active;
 
   .senderInfo {
     height: 50px;