diff --git a/backend/settings.py b/backend/settings.py
index c422095..e404c4d 100644
--- a/backend/settings.py
+++ b/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():
diff --git a/static/chat.css b/static/chat.css
index 25cb97c..51b4c69 100644
--- a/static/chat.css
+++ b/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);
-    filter: brightness(120%);
+    background-color: var(--background-color-active);
+    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;
 }
 
diff --git a/static/controls.css b/static/controls.css
index ad1a6ef..5ac7c32 100644
--- a/static/controls.css
+++ b/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;
 }
 
diff --git a/static/gfx/icon_chat.png b/static/gfx/icon_chat.png
index cb76c59..bf2a432 100644
Binary files a/static/gfx/icon_chat.png and b/static/gfx/icon_chat.png differ
diff --git a/static/gfx/icon_model.png b/static/gfx/icon_model.png
index 6c9d953..6b90809 100644
Binary files a/static/gfx/icon_model.png and b/static/gfx/icon_model.png differ
diff --git a/static/gfx/icon_settings.png b/static/gfx/icon_settings.png
new file mode 100644
index 0000000..c55b511
Binary files /dev/null and b/static/gfx/icon_settings.png differ
diff --git a/static/mainmenu.css b/static/mainmenu.css
index 953ab92..603e3fa 100644
--- a/static/mainmenu.css
+++ b/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;
 }
diff --git a/static/models.css b/static/models.css
index 8906d8c..269350c 100644
--- a/static/models.css
+++ b/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);
-    filter: brightness(120%);
+    color: var(--textcolor-text);
+    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 {
diff --git a/static/overlay.css b/static/overlay.css
index 31d45f9..d0029e2 100644
--- a/static/overlay.css
+++ b/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;
 }
 
diff --git a/static/roles.js b/static/roles.js
index 08c16c6..b9c67bd 100644
--- a/static/roles.js
+++ b/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)",
 ];
 
diff --git a/static/settings.css b/static/settings.css
index c006199..9857089 100644
--- a/static/settings.css
+++ b/static/settings.css
@@ -4,8 +4,8 @@
     bottom: 10px;
     left: 90px;
     width: 228px;
-    height: 65px;
-    background: var(--background-color-view);
+    height: 95px;
+    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;
 }
diff --git a/static/settings.js b/static/settings.js
index ba1ee5d..0564300 100644
--- a/static/settings.js
+++ b/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);
     }
 
 }
\ No newline at end of file
diff --git a/static/slider.css b/static/slider.css
index 49eac2e..854fd01 100644
--- a/static/slider.css
+++ b/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: 0.2px solid #010101;
+    border-radius: 1.0px;
+    border: 0.2px solid #01010120;
 }
 input[type=range]::-webkit-slider-thumb {
-    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-    border: 1px solid #000000;
+    box-shadow: 1px 1px 1px #00000080, 0px 0px 1px #0d0d0d40;
+    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;
-    border: 1px solid #000000;
+    box-shadow: 1px 1px 1px #00000080, 0px 0px 1px #0d0d0d40;
+    border: 1px solid #00000080;
     height: 13px;
     width: 13px;
     border-radius: 3px;
diff --git a/static/style.css b/static/style.css
index a667de2..4e09897 100644
--- a/static/style.css
+++ b/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);
 }
 
diff --git a/static/theme.css b/static/theme.css
new file mode 100644
index 0000000..5c0764e
--- /dev/null
+++ b/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);
+
+}
\ No newline at end of file
diff --git a/static/theme.js b/static/theme.js
new file mode 100644
index 0000000..50c0cb7
--- /dev/null
+++ b/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]);
+    }
+}
diff --git a/templates/index.html b/templates/index.html
index f2b9581..44ede4c 100644
--- a/templates/index.html
+++ b/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>
diff --git a/templates/svg_icons.html b/templates/svg_icons.html
index ac9c2cf..9fbccaa 100644
--- a/templates/svg_icons.html
+++ b/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="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="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"/>
         </symbol>
     </defs>
 </svg>