Add switchable theme

backend/settings.py

@@ -6,6 +6,7 @@ def default_settings():
     j = {}
     j["smooth_scrolling"] = True
     j["show_stats"] = False
+    j["theme"] = "Dark"
     return j
 
 def get_settings():

static/chat.css

@@ -5,7 +5,7 @@
     flex-direction: column;
     width: 250px;
     min-width: 250px;
-    height: calc(100vh - 140px);
+    height: calc(100vh - 56px);
     flex-grow: 0;
     padding: 0px;
     padding-top: 10px;
@@ -34,24 +34,23 @@
 .session-list-entry svg {
     text-shadow: 5px 5px 5px rgba(0, 0, 0, 1.0);
     padding: 8px;
-    filter: brightness(50%);
     margin-left: 5px;
 }
 
 .session-list-entry.active {
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-active);
-    filter: brightness(120%);
+    color: var(--textcolor-text);
+    filter: brightness(var(--select-brightness));
 }
 
 .session-list-entry.active:hover {
     text-decoration: underline;
-    background-color: var(--background-color-view);
     cursor: pointer;
 }
 
 .session-list-entry.inactive:hover {
     cursor: pointer;
-    filter: brightness(150%);
+    filter: brightness(var(--hover-brightness));
 }
 
 .session-list-controls {
@@ -67,7 +66,7 @@
 }
 
 .session-view {
-    background-color: var(--background-color-body);
+    background-color: var(--background-color-chat);
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -83,7 +82,7 @@
 }
 
 .session-input-surround {
-    background-color: var(--background-color-body);
+    background-color: var(--background-color-chat);
     display: flex;
     flex-direction: column;
     width: calc(100vw - 685px);
@@ -104,8 +103,9 @@
     padding: 18px;
     resize: vertical;
     border: 0px solid var(--textbox-border);
+    line-height: 23px;
     border-radius: 10px;
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-control);
     color: var(--textcolor-text);
     max-height: 200px;
     min-height: 55px;
@@ -118,11 +118,11 @@
 
 .session-input:focus {
     outline: none;
-    filter: brightness(120%);
+    filter: brightness(var(--select-brightness));
 }
 
 .session-input:hover {
-    filter: brightness(125%);
+    filter: brightness(var(--hover-brightness));
 }
 
 .session-input::placeholder {
@@ -168,11 +168,11 @@
 
 .block-actions span:hover {
     cursor: pointer;
-    filter: brightness(150%);
+    filter: brightness(var(--hover-brightness));
 }
 
 .session-block.user {
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-user);
 }
 
 .session-block p {
@@ -193,6 +193,7 @@
     font-family: var(--font-family);
     font-size: var(--font-size-small);
     font-weight: bold;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
     color: var(--textcolor-head);
     padding-bottom: 5px;
 }
@@ -290,7 +291,7 @@
 }
 
 .session-settings {
-    background-color: var(--background-color-body);
+    background-color: var(--background-color-chatsettings);
     display: flex;
     flex-direction: column;
     width: 310px;
@@ -337,7 +338,7 @@
 }
 
 .sss-item-combobox {
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-control);
     color: var(--textcolor-text);
     border-radius: 5px;
     border: 1px solid var(--textbox-border);
@@ -347,7 +348,7 @@
 .sss-item-textbox {
     font-family: var(--font-family);
     font-size: var(--font-size-medium);
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-control);
     color: var(--textcolor-text);
     border-radius: 5px;
     border: 1px solid var(--textbox-border);
@@ -361,7 +362,7 @@
 .sss-item-textbox-r {
     font-family: var(--font-family);
     font-size: var(--font-size-medium);
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-control);
     color: var(--textcolor-text);
     border-radius: 5px;
     border: 1px solid var(--textbox-border);
@@ -380,30 +381,31 @@
 
 .sss-item-textbox:focus {
     outline: none;
-    filter: brightness(120%);
+    filter: brightness(var(--select-brightness));
 }
 
 .sss-item-textbox-r:focus {
     outline: none;
-    filter: brightness(120%);
+    filter: brightness(var(--select-brightness));
 }
 
 .sss-item-big-textbox {
     font-family: var(--font-family);
     font-size: var(--font-size-medium);
-    background-color: var(--background-color-view);
+    background-color: var(--background-color-control);
     color: var(--textcolor-text);
     border-radius: 5px;
     border: 1px solid var(--textbox-border);
     padding: 10px;
     resize: vertical;
+    line-height: 1.5;
     min-width: 100px;
     flex-grow: 1;
 }
 
 .sss-item-big-textbox:focus {
     outline: none;
-    filter: brightness(120%);
+    filter: brightness(var(--select-brightness));
 }
 
 .sss-item-mid {
@@ -428,7 +430,7 @@
 }
 
 .sss-item-right.clickable:hover {
-    filter: brightness(140%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }
 
@@ -437,7 +439,7 @@
 }
 
 .sss-item-left.clickable:hover {
-    filter: brightness(140%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }
 

static/controls.css

@@ -27,12 +27,15 @@
 }
 
 .textbutton {
+    font-size: var(--font-size-medium);
+    font-weight: bold;
     background-color: var(--button-background);
     border-radius: 10px;
     border: 1px solid var(--button-border);
     padding: 10px;
     padding-top: 10px;
     padding-bottom: 6px;
+    padding-right: 14px;
     margin-right: 10px;
     display: flex;
 }
@@ -52,7 +55,7 @@
 }
 
 .textbutton.enabled:hover {
-    filter: brightness(150%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }
 
@@ -74,7 +77,7 @@
 }
 
 .linkbutton.enabled:hover {
-    filter: brightness(140%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }
 
@@ -101,7 +104,7 @@
 }
 
 .block-header:hover {
-    filter: brightness(140%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }
 

static/mainmenu.css

@@ -47,7 +47,7 @@
     font-size: var(--font-size-small);
     font-weight: bold;
     color: var(--textcolor-menu);
-    text-shadow: 0px 0px 0px #000000, 0px 5px 10px #0d0d0d;
+    text-shadow: 0px 0px 0px #000000, 0px 5px 10px #0d0d0d80;
 }
 
 .mainmenu-button img {
@@ -62,6 +62,6 @@
 }
 
 .mainmenu-button.inactive:hover {
-    filter: brightness(150%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }

static/models.css

@@ -38,18 +38,18 @@
 .model-list-entry svg {
     text-shadow: 5px 5px 5px rgba(0, 0, 0, 1.0);
     padding: 8px;
-    filter: brightness(50%);
     margin-left: 5px;
 }
 
 .model-list-entry.active {
-    background-color: var(--background-color-view);
+    color: var(--textcolor-text);
-    filter: brightness(120%);
+    background-color: var(--background-color-active);
+    filter: brightness(var(--select-brightness));
 }
 
 .model-list-entry.inactive:hover {
     cursor: pointer;
-    filter: brightness(150%);
+    filter: brightness(var(--hover-brightness));
 }
 
 .model-view {
@@ -76,7 +76,7 @@
 }
 
 .model-view-text.divider {
-    border-bottom: 1px solid var(--textcolor-dim);
+    border-bottom: 1px solid var(--textcolor-dim2);
     width: 100%;
     color: var(--textcolor-text);
     padding-top: 5px;
@@ -133,6 +133,10 @@
     padding: 5px;
 }
 
+.model-view-item-textbox::placeholder {
+    color: var(--textcolor-dim);
+}
+
 .model-view-item-textbox.wide {
     flex-grow: 1;
 }
@@ -150,7 +154,7 @@
 
 .model-view-item-textbox:focus {
     outline: none;
-    filter: brightness(120%);
+    filter: brightness(var(--select-brightness));
 }
 
 .model-view-item-combobox {

static/overlay.css

@@ -15,9 +15,10 @@
 
 .overlay {
     background-color: var(--background-color-view);
+    color: var(--textcolor-head);
     padding: 20px;
     padding-bottom: 40px;
-    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -32,7 +33,7 @@
     width: 320px;
     background-color: var(--progress-color-back);
     border: 1px solid var(--progress-color);
-    padding: 2px;
+    padding: 0px;
     border-radius: 0px;
 }
 

static/roles.js

@@ -11,7 +11,7 @@ export const roleAvatars = [
 ];
 
 export const roleColors = [
-    "rgba(167, 231, 0, 255)",
+    "rgba(167, 211, 10, 255)",
     "rgba(136, 70, 104, 255)",
     "rgba(58, 90, 208, 255)",
     "rgba(215, 86, 98, 255)",
@@ -30,7 +30,7 @@ export const instructAvatars = [
 ];
 
 export const instructColors = [
-    "rgba(167, 231, 0, 255)",
+    "rgba(107, 201, 0, 255)",
     "rgba(136, 70, 104, 255)",
 ];
 

static/settings.css

@@ -4,8 +4,8 @@
     bottom: 10px;
     left: 90px;
     width: 228px;
-    height: 65px;
+    height: 95px;
-    background: var(--background-color-view);
+    background: var(--background-color-popup);
     border-radius: 10px;
     box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
     color: white;
@@ -18,14 +18,14 @@
     content: '';
     position: absolute;
     right: 100%;
-    top: 30%;
+    top: 40%;
     border-width: 15px 22px 15px 0;
     border-style: solid;
     border-color: transparent var(--background-color-view); transparent transparent;
 }
 
 .checkbox-sc {
-    color: var(--textcolor-menu);
+    color: var(--textcolor-head);
     align-items: center;
     padding: 0px;
     margin: 0px;
@@ -35,6 +35,6 @@
 }
 
 .checkbox-sc:hover {
-    filter: brightness(140%);
+    filter: brightness(var(--hover-brightness));
     cursor: pointer;
 }

static/settings.js

@@ -1,6 +1,7 @@
 import * as util from "./util.js";
 import * as controls from "./controls.js";
 import * as globals from "./globals.js";
+import * as theme from "./theme.js";
 
 export class SettingsPopup {
     constructor() {
@@ -26,6 +27,7 @@ export class SettingsPopup {
         .then(response => {
             this.settings = response.settings;
             this.populate();
+            this.applyGlobals();
         });
     }
 
@@ -34,13 +36,16 @@ export class SettingsPopup {
 
         this.s_smoothScrolling = new controls.CheckboxLabel("checkbox-sc noselect", "Smooth scrolling", this.settings, "smooth_scrolling", () => { this.saveSettings(); });
         this.s_showStats = new controls.CheckboxLabel("checkbox-sc noselect", "Display stats", this.settings, "show_stats", () => { this.saveSettings(); });
+        this.s_theme = new controls.LabelCombobox("sss-item-left", "Theme", "sss-item-right sss-item-combobox", theme.getThemesList(), this.settings, "theme", () => { this.saveSettings(); });
         this.element.appendChild(this.s_smoothScrolling.element);
         this.element.appendChild(this.s_showStats.element);
+        this.element.appendChild(this.s_theme.element);
 
         this.refresh();
     }
 
     refresh() {
+        this.s_theme.refresh();
         this.s_smoothScrolling.refresh();
         this.s_showStats.refresh();
     }
@@ -62,6 +67,8 @@ export class SettingsPopup {
 
         let r = document.querySelector(':root');
         r.style.setProperty("--show-stats", this.settings.show_stats ? "flex" : "none");
+
+        theme.setTheme(this.settings.theme);
     }
 
 }

static/slider.css

@@ -7,20 +7,19 @@ input[type=range] {
 }
 input[type=range]:focus {
     outline: none;
-    background: var(--background-color-body);
 }
 input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
-    height: 8.4px;
+    height: 6.4px;
     cursor: pointer;
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    box-shadow: 1px 1px 1px #00000020, 0px 0px 1px #0d0d0d40;
     background: var(--slider-track-color);
-    border-radius: 1.3px;
+    border-radius: 1.0px;
-    border: 0.2px solid #010101;
+    border: 0.2px solid #01010120;
 }
 input[type=range]::-webkit-slider-thumb {
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    box-shadow: 1px 1px 1px #00000080, 0px 0px 1px #0d0d0d40;
-    border: 1px solid #000000;
+    border: 1px solid #00000080;
     height: 16px;
     width: 16px;
     border-radius: 3px;
@@ -34,16 +33,16 @@ input[type=range]:hover::-webkit-slider-runnable-track {
 }
 input[type=range]::-moz-range-track {
     width: 100%;
-    height: 6.4px;
+    height: 4.4px;
     cursor: pointer;
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    box-shadow: 1px 1px 1px #00000080, 0px 0px 1px #0d0d0d40;
     background: var(--slider-track-color);
     border-radius: 1.3px;
-    border: 0.2px solid #010101;
+    border: 0.2px solid var(--slider-track-color);;
 }
 input[type=range]::-moz-range-thumb {
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+    box-shadow: 1px 1px 1px #00000080, 0px 0px 1px #0d0d0d40;
-    border: 1px solid #000000;
+    border: 1px solid #00000080;
     height: 13px;
     width: 13px;
     border-radius: 3px;

static/style.css

@@ -1,51 +1,3 @@
-:root {
-    --font-family: Helvetica, sans-serif;
-    --font-size-large: 20px;
-    --font-size-chat: 16px;
-    --font-size-medium: 14px;
-    --font-size-small: 12px;
-
-    --textcolor-menu: rgba(217, 217, 217, 255);
-    --textcolor-text: rgba(217, 217, 217, 255);
-    --textcolor-error: rgba(255, 167, 167, 255);
-    --textcolor-danger: rgba(255, 127, 127, 255);
-    --textcolor-dim: rgba(97, 97, 97, 255);
-    --textcolor-dim2: rgba(120, 120, 120, 255);
-    --textcolor-head: rgba(150, 150, 150, 255);
-    --textcolor-link: rgba(110, 110, 200, 255);
-    --textcolor-stats: rgba(110, 160, 150, 255);
-
-    --iconcolor: rgba(217, 217, 217, 255);
-    --iconcolor-active: rgba(167, 231, 0, 255);
-
-    --background-color-menu: rgba(32, 32, 32, 255);
-    --background-color-body: rgba(42, 42, 42, 255);
-    --background-color-view: rgba(52, 52, 52, 255);
-
-    --background-color-code: rgba(32, 32, 32, 255);
-    --border-color-code: rgba(52, 52, 52, 255);
-    --textcolor-code: rgba(200, 217, 208, 255);
-
-    --button-textcolor: rgba(217, 217, 217, 255);
-    --button-background: rgba(64, 64, 128, 255);
-    --button-border: rgba(96, 96, 192, 255);
-    --button-disabled-textcolor: rgba(117, 117, 117, 255);
-    --button-disabled-background: rgba(64, 64, 64, 255);
-    --button-disabled-border: rgba(96, 96, 96, 255);
-
-    --textbox-background: rgba(42, 42, 42, 255);
-    --textbox-border: rgba(70, 70, 70, 255);
-
-    --spinner-color: rgba(230, 120, 20, 255);
-    --progress-color: rgba(137, 201, 80, 255);
-    --progress-color-back: rgba(40, 65, 20, 255);
-
-    --slider-thumb-color: rgb(135, 150, 155);
-    --slider-track-color: rgb(77, 77, 77);
-    --slider-hover-color: rgb(88, 88, 88);
-
-    --show-stats: none;
-}
 
 body {
     font-family: var(--font-family);
@@ -93,6 +45,7 @@ body {
 
 svg {
     fill: var(--iconcolor);
+    color: var(--iconcolor);
     text-shadow: 5px 5px 5px rgba(0, 0, 0, 1.0);
 }
 

static/theme.css

@@ -0,0 +1,224 @@
+/* Default theme (dark) */
+
+:root {
+    --font-family: Helvetica, sans-serif;
+    --font-size-large: 20px;
+    --font-size-chat: 16px;
+    --font-size-medium: 14px;
+    --font-size-small: 12px;
+
+    --textcolor-menu: rgba(217, 217, 217, 255);
+    --textcolor-text: rgba(217, 217, 217, 255);
+    --textcolor-error: rgba(255, 167, 167, 255);
+    --textcolor-danger: rgba(255, 127, 127, 255);
+    --textcolor-dim: rgba(97, 97, 97, 255);
+    --textcolor-dim2: rgba(120, 120, 120, 255);
+    --textcolor-head: rgba(150, 150, 150, 255);
+    --textcolor-link: rgba(110, 110, 200, 255);
+    --textcolor-stats: rgba(110, 160, 150, 255);
+
+    --iconcolor: rgba(117, 117, 117, 255);
+    --iconcolor-active: rgba(167, 231, 0, 255);
+
+    --background-color-menu: rgba(32, 32, 32, 255);
+    --background-color-body: rgba(42, 42, 42, 255);
+    --background-color-view: rgba(52, 52, 52, 255);
+    --background-color-user: rgba(52, 52, 52, 255);
+    --background-color-chat: rgba(42, 42, 42, 255);
+    --background-color-chatsettings: rgba(42, 42, 42, 255);
+    --background-color-active: rgba(52, 52, 52, 255);
+    --background-color-control: rgba(52, 52, 52, 255);
+    --background-color-popup: rgba(52, 52, 52, 255);
+
+    --background-color-code: rgba(32, 32, 32, 255);
+    --border-color-code: rgba(52, 52, 52, 255);
+    --textcolor-code: rgba(200, 217, 208, 255);
+
+    --button-textcolor: rgba(217, 217, 217, 255);
+    --button-background: rgba(64, 64, 128, 255);
+    --button-border: rgba(96, 96, 192, 255);
+    --button-disabled-textcolor: rgba(117, 117, 117, 255);
+    --button-disabled-background: rgba(64, 64, 64, 255);
+    --button-disabled-border: rgba(96, 96, 96, 255);
+
+    --textbox-background: rgba(42, 42, 42, 255);
+    --textbox-border: rgba(70, 70, 70, 255);
+
+    --spinner-color: rgba(230, 120, 20, 255);
+    --progress-color: rgba(137, 201, 80, 255);
+    --progress-color-back: rgba(40, 65, 20, 255);
+
+    --slider-thumb-color: rgb(135, 150, 155);
+    --slider-track-color: rgb(77, 77, 77);
+    --slider-hover-color: rgb(88, 88, 88);
+
+    --select-brightness: 125%;
+    --hover-brightness: 150%;
+
+    --show-stats: none;
+}
+
+/* Dark */
+
+.theme-dark {
+}
+
+/* Darker */
+
+.theme-darker {
+    --background-color-menu: rgba(12, 12, 12, 255);
+    --background-color-body: rgba(16, 16, 16, 255);
+    --background-color-view: rgba(32, 32, 32, 255);
+    --background-color-user: rgba(32, 32, 32, 255);
+    --background-color-chat: rgba(16, 16, 16, 255);
+    --background-color-chatsettings: rgba(16, 16, 16, 255);
+    --background-color-active: rgba(32, 32, 32, 255);
+    --background-color-control: rgba(32, 32, 32, 255);
+    --background-color-popup: rgba(32, 32, 32, 255);
+
+    --textbox-background: rgba(16, 16, 16, 255);
+    --textbox-border: rgba(40, 40, 40, 255);
+
+    --iconcolor: rgba(77, 77, 77, 255);
+    --iconcolor-active: rgba(167, 231, 0, 255);
+}
+
+/* Dark blue */
+
+.theme-darkblue {
+    --background-color-menu: rgba(23, 26, 28, 255);
+    --background-color-body: rgba(33, 36, 40, 255);
+    --background-color-view: rgba(33, 36, 40, 255);
+    --background-color-user: rgba(43, 45, 49, 255);
+    --background-color-chat: rgba(33, 36, 40, 255);
+    --background-color-chatsettings: rgba(33, 36, 40, 255);
+    --background-color-active: rgba(43, 45, 49, 255);
+    --background-color-control: rgba(43, 45, 49, 255);
+    --background-color-popup: rgba(43, 45, 49, 255);
+
+    --textcolor-dim2: rgba(70, 75, 90, 255);
+
+    --textbox-background: rgba(43, 45, 49, 255);
+    --textbox-border: rgba(48, 52, 57, 255);
+
+    --iconcolor: rgba(77, 77, 77, 255);
+    --iconcolor-active: rgba(127, 171, 60, 255);
+
+    --font-family: Arial, sans-serif;
+
+    --button-textcolor: rgba(217, 217, 217, 255);
+    --button-background: rgba(84, 90, 118, 255);
+    --button-border: rgba(90, 94, 126, 255);
+    --button-disabled-textcolor: rgba(96, 100, 108, 255);
+    --button-disabled-background: rgba(64, 65, 72, 255);
+    --button-disabled-border: rgba(70, 73, 86, 255);
+
+    --background-color-code: rgba(23, 26, 28, 255);
+    --border-color-code: rgba(44, 47, 52, 255);
+    --textcolor-code: rgba(200, 217, 208, 255);
+}
+
+/* Light */
+
+.theme-light {
+    --background-color-menu: rgba(255, 255, 255, 255);
+    --background-color-body: rgba(227, 227, 227, 255);
+    --background-color-view: rgba(255, 255, 255, 255);
+    --background-color-user: rgba(227, 227, 227, 255);
+    --background-color-chat: rgba(255, 255, 255, 255);
+    --background-color-chatsettings: rgba(255, 255, 255, 255);
+    --background-color-active: rgba(142, 175, 222, 255);
+    --background-color-control: rgba(205, 205, 205, 255);
+    --background-color-popup: rgba(255, 255, 255, 255);
+
+    --textbox-background: rgba(205, 205, 205, 255);
+    --textbox-border: rgba(222, 222, 200, 255);
+
+    --textcolor-menu: rgba(117, 117, 117, 255);
+    --textcolor-text: rgba(17, 17, 17, 255);
+    --textcolor-error: rgba(225, 117, 117, 255);
+    --textcolor-danger: rgba(255, 67, 67, 255);
+    --textcolor-dim: rgba(117, 117, 117, 255);
+    --textcolor-dim2: rgba(180, 180, 180, 255);
+    --textcolor-head: rgba(90, 90, 90, 255);
+    --textcolor-link: rgba(110, 110, 200, 255);
+    --textcolor-stats: rgba(110, 160, 150, 255);
+
+    --iconcolor: rgba(117, 117, 117, 255);
+    --iconcolor-active: rgba(187, 255, 40, 255);
+
+    --background-color-code: rgba(64, 64, 64, 255);
+    --border-color-code: rgba(255, 255, 255, 255);
+    --textcolor-code: rgba(200, 217, 208, 255);
+
+    --slider-thumb-color: rgb(195, 160, 125);
+    --slider-track-color: rgb(177, 177, 177);
+    --slider-hover-color: rgb(88, 88, 88);
+
+    --select-brightness: 100%;
+    --hover-brightness: 90%;
+
+    --iconcolor: rgba(117, 117, 117, 255);
+    --iconcolor-active: rgba(117, 117, 117, 255);
+
+    --button-textcolor: rgba(47, 57, 80, 255);
+    --button-background: rgba(142, 175, 222, 255);
+    --button-border: rgba(142, 175, 222, 255);
+    --button-disabled-textcolor: rgba(117, 117, 117, 255);
+    --button-disabled-background: rgba(180, 180, 180, 255);
+    --button-disabled-border: rgba(150, 150, 150, 255);
+
+    --progress-color: rgba(142, 175, 222, 255);
+    --progress-color-back: rgba(47, 57, 80, 255);
+}
+
+/* Unholy */
+
+.theme-bold {
+
+    --background-color-menu: rgba(38, 38, 38, 255);
+    --background-color-body: rgba(12, 151, 236, 255);
+    --background-color-view: rgba(255, 255, 255, 255);
+    --background-color-user: rgba(227, 227, 227, 255);
+    --background-color-chat: rgba(255, 255, 255, 255);
+    --background-color-chatsettings: rgba(255, 255, 255, 255);
+    --background-color-active: rgba(124, 205, 223, 255);
+    --background-color-control: rgba(197, 218, 236, 255);
+    --background-color-popup: rgba(255, 255, 255, 255);
+
+    --textbox-background: rgba(197, 218, 236, 255);
+    --textbox-border: rgba(197, 218, 236, 255);
+
+    --textcolor-menu: rgba(255, 255, 255, 255);
+    --textcolor-text: rgba(17, 17, 17, 255);
+    --textcolor-error: rgba(225, 117, 117, 255);
+    --textcolor-danger: rgba(255, 67, 67, 255);
+    --textcolor-dim: rgba(8, 121, 156, 255);
+    --textcolor-dim2: rgba(117, 128, 173, 255);
+    --textcolor-head: rgba(70, 80, 90, 255);
+    --textcolor-link: rgba(110, 110, 200, 255);
+    --textcolor-stats: rgba(110, 160, 150, 255);
+
+    --font-family: Arial, sans-serif;
+
+    --iconcolor: rgba(47, 77, 117, 255);
+    --iconcolor-active: rgba(252, 152, 72, 255);
+
+    --select-brightness: 100%;
+    --hover-brightness: 100%;
+
+    --button-textcolor: rgba(47, 37, 20, 255);
+    --button-background: rgba(242, 162, 92, 255);
+    --button-border: rgba(242, 162, 92, 255);
+    --button-disabled-textcolor: rgba(137, 137, 137, 255);
+    --button-disabled-background: rgba(196, 196, 196, 255);
+    --button-disabled-border: rgba(189, 189, 189, 255);
+
+    --progress-color: rgba(252, 152, 72, 255);
+    --progress-color-back: rgba(122, 79, 42, 255);
+
+    --slider-thumb-color: rgba(102, 122, 132, 255);
+    --slider-track-color: rgb(197, 197, 197);
+    --slider-hover-color: rgb(88, 88, 88);
+
+}

static/theme.js

@@ -0,0 +1,21 @@
+
+const themes = {
+    Dark: "theme-dark",
+    Darker: "theme-darker",
+    Darkblue: "theme-darkblue",
+    Light: "theme-light",
+    Bold: "theme-bold",
+}
+
+export function getThemesList() {
+    return Object.keys(themes);
+}
+
+export function setTheme(theme) {
+    const root = document.documentElement;
+
+    for (let t of getThemesList()) {
+        if (t == theme) root.classList.add(themes[t]);
+        else root.classList.remove(themes[t]);
+    }
+}

templates/index.html

@@ -2,6 +2,7 @@
 <html>
     <head>
         <title>ExUI</title>
+        <link rel="stylesheet" type="text/css"  href="{{ url_for('static', filename='theme.css') }}">
         <link rel="stylesheet" type="text/css"  href="{{ url_for('static', filename='style.css') }}">
         <link rel="stylesheet" type="text/css"  href="{{ url_for('static', filename='scrollbar.css') }}">
         <link rel="stylesheet" type="text/css"  href="{{ url_for('static', filename='slider.css') }}">
@@ -24,6 +25,7 @@
         <script type="module" src="{{ url_for('static', filename='controls.js') }}"></script>
         <script type="module" src="{{ url_for('static', filename='mainmenu.js') }}"></script>
         <script type="module" src="{{ url_for('static', filename='settings.js') }}"></script>
+        <script type="module" src="{{ url_for('static', filename='theme.js') }}"></script>
         <script type="module" src="{{ url_for('static', filename='models.js') }}"></script>
         <script type="module" src="{{ url_for('static', filename='chat.js') }}"></script>
         <script type="module" src="{{ url_for('static', filename='chatsettings.js') }}"></script>

templates/svg_icons.html

@@ -42,8 +42,8 @@
 <svg style="display: none;">
     <defs>
         <symbol id="session-icon" viewBox="0 0 20 18">
-            <path d="M18 4H16V9C16 10.0609 15.5786 11.0783 14.8284 11.8284C14.0783 12.5786 13.0609 13 12 13H9L6.846 14.615C7.17993 14.8628 7.58418 14.9977 8 15H11.667L15.4 17.8C15.5731 17.9298 15.7836 18 16 18C16.2652 18 16.5196 17.8946 16.7071 17.7071C16.8946 17.5196 17 17.2652 17 17V15H18C18.5304 15 19.0391 14.7893 19.4142 14.4142C19.7893 14.0391 20 13.5304 20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4Z" fill="currentColor"/>
+            <path d="M18 4H16V9C16 10.0609 15.5786 11.0783 14.8284 11.8284C14.0783 12.5786 13.0609 13 12 13H9L6.846 14.615C7.17993 14.8628 7.58418 14.9977 8 15H11.667L15.4 17.8C15.5731 17.9298 15.7836 18 16 18C16.2652 18 16.5196 17.8946 16.7071 17.7071C16.8946 17.5196 17 17.2652 17 17V15H18C18.5304 15 19.0391 14.7893 19.4142 14.4142C19.7893 14.0391 20 13.5304 20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4Z"/>
-            <path d="M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V9C0 9.53043 0.210714 10.0391 0.585786 10.4142C0.960859 10.7893 1.46957 11 2 11H3V13C3 13.1857 3.05171 13.3678 3.14935 13.5257C3.24698 13.6837 3.38668 13.8114 3.55279 13.8944C3.71889 13.9775 3.90484 14.0126 4.08981 13.996C4.27477 13.9793 4.45143 13.9114 4.6 13.8L8.333 11H12C12.5304 11 13.0391 10.7893 13.4142 10.4142C13.7893 10.0391 14 9.53043 14 9V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0Z" fill="currentColor"/>
+            <path d="M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V9C0 9.53043 0.210714 10.0391 0.585786 10.4142C0.960859 10.7893 1.46957 11 2 11H3V13C3 13.1857 3.05171 13.3678 3.14935 13.5257C3.24698 13.6837 3.38668 13.8114 3.55279 13.8944C3.71889 13.9775 3.90484 14.0126 4.08981 13.996C4.27477 13.9793 4.45143 13.9114 4.6 13.8L8.333 11H12C12.5304 11 13.0391 10.7893 13.4142 10.4142C13.7893 10.0391 14 9.53043 14 9V2C14 1.46957 13.7893 0.960859 13.4142 0.585786C13.0391 0.210714 12.5304 0 12 0Z"/>
         </symbol>
     </defs>
 </svg>