Add a legacy dark mode.

Signed-off-by: Adam Treat <treat.adam@gmail.com>

gpt4all-chat/main.qml

@@ -198,12 +198,12 @@ Window {
     }
 
     Rectangle {
-        id: yellowRibbon
+        id: accentRibbon
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: header.bottom
         height: 3
-        color: theme.yellowAccent
+        color: theme.accentColor
     }
 
     Rectangle {
@@ -225,8 +225,8 @@ Window {
                 text: "<a href=\"https://gpt4all.io\">gpt4all.io</a> |"
                 horizontalAlignment: Text.AlignLeft
                 font.pixelSize: theme.fontSizeFixedSmall
-                color: theme.gray300
+                color: theme.iconBackgroundHovered
-                linkColor: hoverHandler1.hovered ? theme.yellowAccent : theme.gray300
+                linkColor: hoverHandler1.hovered ? theme.accentColor : theme.iconBackgroundHovered
                 HoverHandler { id: hoverHandler1 }
                 onLinkActivated: { Qt.openUrlExternally("https://gpt4all.io") }
             }
@@ -236,8 +236,8 @@ Window {
                 text: "<a href=\"https://github.com/nomic-ai/gpt4all\">github</a>"
                 horizontalAlignment: Text.AlignLeft
                 font.pixelSize: theme.fontSizeFixedSmall
-                color: theme.gray300
+                color: theme.iconBackgroundHovered
-                linkColor: hoverHandler2.hovered ? theme.yellowAccent : theme.gray300
+                linkColor: hoverHandler2.hovered ? theme.accentColor : theme.iconBackgroundHovered
                 HoverHandler { id: hoverHandler2 }
                 onLinkActivated: { Qt.openUrlExternally("https://github.com/nomic-ai/gpt4all") }
             }
@@ -252,8 +252,8 @@ Window {
                 text: "<a href=\"https://nomic.ai\">nomic.ai</a> |"
                 horizontalAlignment: Text.AlignRight
                 font.pixelSize: theme.fontSizeFixedSmall
-                color: theme.gray300
+                color: theme.iconBackgroundHovered
-                linkColor: hoverHandler3.hovered ? theme.yellowAccent : theme.gray300
+                linkColor: hoverHandler3.hovered ? theme.accentColor : theme.iconBackgroundHovered
                 HoverHandler { id: hoverHandler3 }
                 onLinkActivated: { Qt.openUrlExternally("https://nomic.ai") }
             }
@@ -263,8 +263,8 @@ Window {
                 text: "<a href=\"https://twitter.com/nomic_ai\">twitter</a> |"
                 horizontalAlignment: Text.AlignRight
                 font.pixelSize: theme.fontSizeFixedSmall
-                color: theme.gray300
+                color: theme.iconBackgroundHovered
-                linkColor: hoverHandler4.hovered ? theme.yellowAccent : theme.gray300
+                linkColor: hoverHandler4.hovered ? theme.accentColor : theme.iconBackgroundHovered
                 HoverHandler { id: hoverHandler4 }
                 onLinkActivated: { Qt.openUrlExternally("https://twitter.com/nomic_ai") }
             }
@@ -274,8 +274,8 @@ Window {
                 text: "<a href=\"https://discord.gg/4M2QFmTt2k\">discord</a>"
                 horizontalAlignment: Text.AlignRight
                 font.pixelSize: theme.fontSizeFixedSmall
-                color: theme.gray300
+                color: theme.iconBackgroundHovered
-                linkColor: hoverHandler5.hovered ? theme.yellowAccent : theme.gray300
+                linkColor: hoverHandler5.hovered ? theme.accentColor : theme.iconBackgroundHovered
                 HoverHandler { id: hoverHandler5 }
                 onLinkActivated: { Qt.openUrlExternally("https://discord.gg/4M2QFmTt2k") }
             }
@@ -364,7 +364,7 @@ Window {
                     background: Rectangle {
                         color: (index % 2 === 0 ? theme.darkContrast : theme.lightContrast)
                         border.width: highlighted
-                        border.color: theme.yellowAccent
+                        border.color: theme.accentColor
                     }
                     highlighted: comboBox.highlightedIndex === index
                 }
@@ -747,7 +747,7 @@ Window {
 
     ChatDrawer {
         id: drawer
-        y: header.height + yellowRibbon.height
+        y: header.height + accentRibbon.height
         width: Math.min(600, 0.3 * window.width)
         height: window.height - y
         onDownloadClicked: {
@@ -769,11 +769,11 @@ Window {
 
     Rectangle {
         id: conversation
-        color: theme.containerBackground
+        color: theme.conversationBackground
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        anchors.top: yellowRibbon.bottom
+        anchors.top: accentRibbon.bottom
 
         ScrollView {
             id: scrollView
@@ -786,7 +786,7 @@ Window {
 
             Rectangle {
                 anchors.fill: parent
-                color: currentChat.isServer ? theme.black : theme.containerBackground
+                color: currentChat.isServer ? theme.black : theme.conversationBackground
 
                 Rectangle {
                     id: homePage
@@ -888,7 +888,7 @@ Window {
                             ColorOverlay {
                                 anchors.fill: image
                                 source: image
-                                color: theme.yellowAccent
+                                color: theme.accentColor
                             }
                             onClicked: {
                                 downloadNewModels.open();

gpt4all-chat/qml/ApplicationSettings.qml

@@ -29,9 +29,9 @@ MySettingsTab {
             Layout.row: 1
             Layout.column: 1
             Layout.columnSpan: 1
-            Layout.minimumWidth: 50
+            Layout.minimumWidth: 200
             Layout.fillWidth: false
-            model: ["Dark", "Light"]
+            model: ["Dark", "Light", "LegacyDark"]
             Accessible.role: Accessible.ComboBox
             Accessible.name: qsTr("Color theme")
             Accessible.description: qsTr("Color theme for the chat client to use")
@@ -261,7 +261,7 @@ MySettingsTab {
             Layout.columnSpan: 3
             Layout.fillWidth: true
             height: 3
-            color: theme.yellowAccent
+            color: theme.accentColor
         }
     }
     advancedSettings: GridLayout {
@@ -274,7 +274,7 @@ MySettingsTab {
             Layout.fillWidth: true
             Layout.columnSpan: 3
             height: 3
-            color: theme.yellowAccent
+            color: theme.accentColor
         }
         MySettingsLabel {
             id: gpuOverrideLabel

gpt4all-chat/qml/LocalDocsSettings.qml

@@ -211,7 +211,7 @@ MySettingsTab {
             visible: hasEmbeddingModel
             Layout.fillWidth: true
             height: 3
-            color: theme.yellowAccent
+            color: theme.accentColor
         }
     }
     advancedSettings: GridLayout {
@@ -227,7 +227,7 @@ MySettingsTab {
             Layout.fillWidth: true
             Layout.columnSpan: 3
             height: 3
-            color: theme.yellowAccent
+            color: theme.accentColor
         }
 
         MySettingsLabel {

gpt4all-chat/qml/ModelDownloaderDialog.qml

@@ -42,6 +42,7 @@ MyDialog {
         Label {
             id: listLabel
             text: qsTr("Available Models")
+            visible: false
             Layout.alignment: Qt.AlignLeft
             Layout.fillWidth: true
             color: theme.titleTextColor
@@ -49,6 +50,10 @@ MyDialog {
             font.bold: true
         }
 
+        Item {
+            height: 0 // for visible space between close button and rest of dialog
+        }
+
         Label {
             visible: !ModelList.downloadableModels.count && !ModelList.asyncModelRequestOngoing
             Layout.fillWidth: true
@@ -110,7 +115,7 @@ MyDialog {
                             id: actionBox
                             width: childrenRect.width + 20
                             color: theme.containerBackground
-                            border.color: theme.yellowAccent
+                            border.color: theme.accentColor
                             border.width: 1
                             radius: 10
                             Layout.row: 1

gpt4all-chat/qml/ModelSettings.qml

@@ -684,7 +684,7 @@ MySettingsTab {
             Layout.fillWidth: true
             Layout.minimumWidth: promptTemplate.width
             height: 3
-            color: theme.yellowAccent
+            color: theme.accentColor
         }
     }
 }

gpt4all-chat/qml/MyBusyIndicator.qml

@@ -43,7 +43,7 @@ BusyIndicator {
                     implicitWidth: 10
                     implicitHeight: 10
                     radius: 5
-                    color: theme.yellowAccent
+                    color: theme.accentColor
 
                     required property int index
 

gpt4all-chat/qml/MyButton.qml

@@ -2,6 +2,7 @@ import QtCore
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
+import mysettings
 
 Button {
     id: myButton
@@ -12,8 +13,8 @@ Button {
     property color mutedTextColor: theme.oppositeMutedTextColor
     property color backgroundColor: theme.buttonBackground
     property color backgroundColorHovered: theme.buttonBackgroundHovered
-    property real  borderWidth: 0
+    property real  borderWidth: MySettings.chatTheme === "LegacyDark" ? 1 : 0
-    property color borderColor: "transparent"
+    property color borderColor: theme.buttonBorder
     property real fontPixelSize: theme.fontSizeLarge
     contentItem: Text {
         text: myButton.text
@@ -25,8 +26,8 @@ Button {
     }
     background: Rectangle {
         radius: 10
-        border.width: borderWidth
+        border.width: myButton.borderWidth
-        border.color: borderColor
+        border.color: myButton.borderColor
         color: myButton.hovered ? backgroundColorHovered : backgroundColor
     }
     Accessible.role: Accessible.Button

gpt4all-chat/qml/MyCheckBox.qml

@@ -15,8 +15,8 @@ CheckBox {
         implicitHeight: 26
         x: myCheckBox.leftPadding
         y: parent.height / 2 - height / 2
-        border.color: theme.gray200
+        border.color: theme.checkboxBorder
-        color: theme.containerBackground
+        color: "transparent"
         radius: 3
 
         Rectangle {
@@ -25,7 +25,7 @@ CheckBox {
             x: 6
             y: 6
             radius: 2
-            color: theme.green600
+            color: theme.checkboxForeground
             visible: myCheckBox.checked
         }
     }

gpt4all-chat/qml/MySettingsLabel.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 
 Label {
-    color: theme.titleTextColor
+    color: theme.settingsTitleTextColor
     font.pixelSize: theme.fontSizeLarge - 4
     font.bold: true
 }

gpt4all-chat/qml/MySettingsStack.qml

@@ -45,7 +45,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 3
-        color: theme.yellowAccent
+        color: theme.accentColor
     }
 
     TabBar {
@@ -90,7 +90,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         height: 3
-        color: theme.yellowAccent
+        color: theme.accentColor
     }
 
     FolderDialog {

gpt4all-chat/qml/MyToolButton.qml

@@ -27,7 +27,7 @@ Button {
             anchors.fill: parent
             color: "transparent"
             visible: myButton.toggled
-            border.color: theme.yellowAccent
+            border.color: theme.accentColor
             border.width: 1
             radius: 10
         }

gpt4all-chat/qml/SettingsDialog.qml

@@ -74,7 +74,7 @@ MyDialog {
                         id: titleLabel
                         backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground
                         backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground
-                        borderColor: index === listView.currentIndex ? theme.yellowAccent : "transparent"
+                        borderColor: index === listView.currentIndex ? theme.accentColor : "transparent"
                         borderWidth: index === listView.currentIndex ? 1 : 0
                         textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor
                         anchors.verticalCenter: parent.verticalCenter

gpt4all-chat/qml/Theme.qml

@@ -12,7 +12,7 @@ QtObject {
     // dark mode black and white
     property color darkwhite: Qt.hsla(0, 0, 0.85)
 
-    // gray
+    // gray // FIXME: These are slightly less red than what atlas uses. should resolve diff
     property color gray0: white
     property color gray50: Qt.hsla(25/360, 0.05, 0.97)
     property color gray100: Qt.hsla(25/360,0.05, 0.95)
@@ -79,60 +79,467 @@ QtObject {
     property color red900: Qt.hsla(0, 0.56, 0.31)
     property color red950: Qt.hsla(0, 0.67, 0.15)
 
-    // purple
+    // purple // FIXME: These are slightly more uniform than what atlas uses. should resolve diff
+    property color purple50: Qt.hsla(279/360, 1.0, 0.98)
+    property color purple100: Qt.hsla(279/360, 1.0, 0.95)
+    property color purple200: Qt.hsla(279/360, 1.0, 0.91)
+    property color purple300: Qt.hsla(279/360, 1.0, 0.84)
     property color purple400: Qt.hsla(279/360, 1.0, 0.73)
     property color purple500: Qt.hsla(279/360, 1.0, 0.63)
     property color purple600: Qt.hsla(279/360, 1.0, 0.53)
+    property color purple700: Qt.hsla(279/360, 1.0, 0.47)
+    property color purple800: Qt.hsla(279/360, 1.0, 0.39)
+    property color purple900: Qt.hsla(279/360, 1.0, 0.32)
+    property color purple950: Qt.hsla(279/360, 1.0, 0.22)
 
-    property color yellowAccent: MySettings.chatTheme === "Dark" ? yellow300 : yellow300;
+    property color blue0: "#d0d5db"
-    property color orangeAccent: MySettings.chatTheme === "Dark" ? yellow500 : yellow500;
+    property color blue100: "#8e8ea0"
+    property color blue200: "#7d7d8e"
+    property color blue400: "#444654"
+    property color blue500: "#343541"
+    property color blue600: "#2c2d37"
+    property color blue800: "#232628"
+    property color blue900: "#222527"
+    property color blue950: "#1c1f21"
+    property color blue1000: "#0e1011"
 
-    property color darkContrast: MySettings.chatTheme === "Dark" ? darkgray100 : gray100
+    property color accentColor: {
-    property color lightContrast: MySettings.chatTheme === "Dark" ? darkgray0 : gray0
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return yellow300;
+            default:
+                return yellow300;
+        }
+    }
 
-    property color controlBorder: MySettings.chatTheme === "Dark" ? darkgray0 : gray300
+    property color darkContrast: {
-    property color controlBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray100
+        switch (MySettings.chatTheme) {
-    property color disabledControlBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200
+            case "LegacyDark":
-    property color containerForeground: MySettings.chatTheme === "Dark" ? darkgray300 : gray300
+                return blue500;
-    property color containerBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray100;
+        }
+    }
 
-    property color progressForeground: yellowAccent
+    property color lightContrast: {
-    property color progressBackground: MySettings.chatTheme === "Dark" ? green600 : green600
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400;
+            case "Dark":
+                return darkgray0;
+            default:
+                return gray0;
+        }
+    }
 
-    property color buttonBackground: MySettings.chatTheme === "Dark" ? green700 : green700
+    property color controlBorder: {
-    property color buttonBackgroundHovered: MySettings.chatTheme === "Dark" ? green500 : green500
+        switch (MySettings.chatTheme) {
-    property color buttonBorder: MySettings.chatTheme === "Dark" ? yellow200 : yellow200
+            case "LegacyDark":
+                return blue800;
+            case "Dark":
+                return darkgray0;
+            default:
+                return gray300;
+        }
+    }
 
-    property color sendButtonBackground: yellowAccent
+    property color controlBackground: {
-    property color sendButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkwhite : black
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray100;
+        }
+    }
 
-    property color conversationButtonBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray0
+    property color disabledControlBackground: {
-    property color conversationButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkgray0 : gray100
+        switch (MySettings.chatTheme) {
-    property color conversationButtonBorder: yellow200
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray200;
+            default:
+                return gray200;
+        }
+    }
 
-    property color iconBackgroundDark: MySettings.chatTheme === "Dark" ? green400 : green400
+    property color conversationBackground: {
-    property color iconBackgroundLight: MySettings.chatTheme === "Dark" ? darkwhite : white
+        switch (MySettings.chatTheme) {
-    property color iconBackgroundHovered: yellowAccent;
+            case "LegacyDark":
+                return blue500;
+            default:
+                return containerBackground;
+        }
+    }
 
-    property color slugBackground: MySettings.chatTheme === "Dark" ? darkgray300 : gray100
+    property color containerForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray300;
+            default:
+                return gray300;
+        }
+    }
 
-    property color textColor: MySettings.chatTheme === "Dark" ? darkwhite : black
+    property color containerBackground: {
-    property color mutedTextColor: MySettings.chatTheme === "Dark" ? gray400 : gray600
+        switch (MySettings.chatTheme) {
-    property color oppositeTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white
+            case "LegacyDark":
-    property color oppositeMutedTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white
+                return blue900;
-    property color textAccent: yellowAccent
+            case "Dark":
-    property color textErrorColor: MySettings.chatTheme === "Dark" ? red400 : red400
+                return darkgray200;
-    property color titleTextColor: MySettings.chatTheme === "Dark" ? green400 : green700
+            default:
+                return gray200;
+        }
+    }
 
-    property color dialogBorder: MySettings.chatTheme === "Dark" ? darkgray0 : darkgray0
+    property color progressForeground: {
-    property color linkColor: MySettings.chatTheme === "Dark" ? yellow600 : yellow600
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
 
-    property color mainHeader: MySettings.chatTheme === "Dark" ? green600 : green600
+    property color progressBackground: {
-    property color mainComboBackground:  MySettings.chatTheme === "Dark" ? green700 : green700
+        switch (MySettings.chatTheme) {
-    property color sendGlow: MySettings.chatTheme === "Dark" ? green950 : green300
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return green600;
+            default:
+                return green600;
+        }
+    }
 
-    property color userColor: MySettings.chatTheme === "Dark" ? green700 : green700
+    property color checkboxBorder: {
-    property color assistantColor: yellowAccent
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return gray200;
+            default:
+                return gray600;
+        }
+    }
+
+    property color checkboxForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return green600;
+            default:
+                return green600;
+        }
+    }
+
+    property color buttonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return green700;
+            default:
+                return green700;
+        }
+    }
+
+    property color buttonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return green500;
+            default:
+                return green500;
+        }
+    }
+
+    property color buttonBorder: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return yellow200;
+            default:
+                return yellow200;
+        }
+    }
+
+    property color sendButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
+
+    property color sendButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue0;
+            case "Dark":
+                return darkwhite;
+            default:
+                return black;
+        }
+    }
+
+    property color conversationButtonBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue500;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray0;
+        }
+    }
+
+    property color conversationButtonBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400;
+            case "Dark":
+                return darkgray0;
+            default:
+                return gray100;
+        }
+    }
+
+    property color conversationButtonBorder: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return yellow200;
+            default:
+                return yellow200;
+        }
+    }
+
+    property color iconBackgroundDark: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return green400;
+            default:
+                return green400;
+        }
+    }
+
+    property color iconBackgroundLight: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return darkwhite;
+            default:
+                return white;
+        }
+    }
+
+    property color iconBackgroundHovered: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue0;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
+
+    property color slugBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue600;
+            case "Dark":
+                return darkgray300;
+            default:
+                return gray100;
+        }
+    }
+
+    property color textColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue0;
+            case "Dark":
+                return darkwhite;
+            default:
+                return black;
+        }
+    }
+
+    property color mutedTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return gray400;
+            default:
+                return gray600;
+        }
+    }
+
+    property color oppositeTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return white;
+            case "Dark":
+                return darkwhite;
+            default:
+                return white;
+        }
+    }
+
+    property color oppositeMutedTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return white;
+            case "Dark":
+                return darkwhite;
+            default:
+                return white;
+        }
+    }
+
+    property color textAccent: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
+
+    property color textErrorColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return red400;
+            case "Dark":
+                return red400;
+            default:
+                return red400;
+        }
+    }
+
+    property color settingsTitleTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue100;
+            case "Dark":
+                return green400;
+            default:
+                return green700;
+        }
+    }
+
+    property color titleTextColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return green400;
+            default:
+                return green700;
+        }
+    }
+
+    property color dialogBorder: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return darkgray0;
+            default:
+                return darkgray0;
+        }
+    }
+
+    property color linkColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return yellow600;
+            case "Dark":
+                return yellow600;
+            default:
+                return yellow600;
+        }
+    }
+
+    property color mainHeader: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return green600;
+            default:
+                return green600;
+        }
+    }
+
+    property color mainComboBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return green700;
+            default:
+                return green700;
+        }
+    }
+
+    property color sendGlow: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue1000;
+            case "Dark":
+                return green950;
+            default:
+                return green300;
+        }
+    }
+
+    property color userColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue700;
+            case "Dark":
+                return green700;
+            default:
+                return green700;
+        }
+    }
+
+    property color assistantColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return purple400;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
 
     property real fontSizeFixedSmall: 16