light mode vs dark mode

gpt4all-chat/mysettings.cpp

@@ -16,6 +16,7 @@ static QString  default_userDefaultModel    = "Application default";
 static bool     default_forceMetal          = false;
 static QString  default_lastVersionStarted  = "";
 static int      default_localDocsChunkSize  = 256;
+static QString  default_chatTheme           = "Dark";
 static int      default_localDocsRetrievalSize  = 3;
 static bool     default_localDocsShowReferences = true;
 static QString  default_networkAttribution      = "";
@@ -474,6 +475,24 @@ void MySettings::setUserDefaultModel(const QString &u)
     emit userDefaultModelChanged();
 }
 
+QString MySettings::chatTheme() const
+{
+    QSettings setting;
+    setting.sync();
+    return setting.value("chatTheme", default_chatTheme).toString();
+}
+
+void MySettings::setChatTheme(const QString &u)
+{
+    if(chatTheme() == u)
+        return;
+
+    QSettings setting;
+    setting.setValue("chatTheme", u);
+    setting.sync();
+    emit chatThemeChanged();
+}
+
 bool MySettings::forceMetal() const
 {
     return m_forceMetal;

gpt4all-chat/mysettings.h

@@ -15,6 +15,7 @@ class MySettings : public QObject
     Q_PROPERTY(bool serverChat READ serverChat WRITE setServerChat NOTIFY serverChatChanged)
     Q_PROPERTY(QString modelPath READ modelPath WRITE setModelPath NOTIFY modelPathChanged)
     Q_PROPERTY(QString userDefaultModel READ userDefaultModel WRITE setUserDefaultModel NOTIFY userDefaultModelChanged)
+    Q_PROPERTY(QString chatTheme READ chatTheme WRITE setChatTheme NOTIFY chatThemeChanged)
     Q_PROPERTY(bool forceMetal READ forceMetal WRITE setForceMetal NOTIFY forceMetalChanged)
     Q_PROPERTY(QString lastVersionStarted READ lastVersionStarted WRITE setLastVersionStarted NOTIFY lastVersionStartedChanged)
     Q_PROPERTY(int localDocsChunkSize READ localDocsChunkSize WRITE setLocalDocsChunkSize NOTIFY localDocsChunkSizeChanged)
@@ -70,6 +71,8 @@ public:
     void setModelPath(const QString &p);
     QString userDefaultModel() const;
     void setUserDefaultModel(const QString &u);
+    QString chatTheme() const;
+    void setChatTheme(const QString &u);
     bool forceMetal() const;
     void setForceMetal(bool b);
 
@@ -114,6 +117,7 @@ Q_SIGNALS:
     void serverChatChanged();
     void modelPathChanged();
     void userDefaultModelChanged();
+    void chatThemeChanged();
     void forceMetalChanged(bool);
     void lastVersionStartedChanged();
     void localDocsChunkSizeChanged();

gpt4all-chat/qml/ApplicationSettings.qml

@@ -18,17 +18,50 @@ MySettingsTab {
         columns: 3
         rowSpacing: 10
         columnSpacing: 10
-
+        Label {
+            id: themeLabel
+            text: qsTr("Theme:")
+            color: theme.textColor
+            Layout.row: 1
+            Layout.column: 0
+        }
+        MyComboBox {
+            id: themeBox
+            Layout.row: 1
+            Layout.column: 1
+            Layout.columnSpan: 1
+            Layout.minimumWidth: 50
+            Layout.fillWidth: false
+            model: ["Dark", "Light"]
+            Accessible.role: Accessible.ComboBox
+            Accessible.name: qsTr("ComboBox for displaying/picking the color theme")
+            Accessible.description: qsTr("Use this for picking the color them for the chat client to use")
+            function updateModel() {
+                themeBox.currentIndex = themeBox.indexOfValue(MySettings.chatTheme);
+            }
+            Component.onCompleted: {
+                themeBox.updateModel()
+            }
+            Connections {
+                target: MySettings
+                function onChatThemeChanged() {
+                    themeBox.updateModel()
+                }
+            }
+            onActivated: {
+                MySettings.chatTheme = themeBox.currentText
+            }
+        }
         Label {
             id: defaultModelLabel
             text: qsTr("Default model:")
             color: theme.textColor
-            Layout.row: 1
+            Layout.row: 2
             Layout.column: 0
         }
         MyComboBox {
             id: comboBox
-            Layout.row: 1
+            Layout.row: 2
             Layout.column: 1
             Layout.columnSpan: 2
             Layout.minimumWidth: 350
@@ -57,14 +90,14 @@ MySettingsTab {
             id: modelPathLabel
             text: qsTr("Download path:")
             color: theme.textColor
-            Layout.row: 2
+            Layout.row: 3
             Layout.column: 0
         }
         MyDirectoryField {
             id: modelPathDisplayField
             text: MySettings.modelPath
             implicitWidth: 300
-            Layout.row: 2
+            Layout.row: 3
             Layout.column: 1
             Layout.fillWidth: true
             ToolTip.text: qsTr("Path where model files will be downloaded to")
@@ -81,7 +114,7 @@ MySettingsTab {
             }
         }
         MyButton {
-            Layout.row: 2
+            Layout.row: 3
             Layout.column: 2
             text: qsTr("Browse")
             Accessible.description: qsTr("Opens a folder picker dialog to choose where to save model files")
@@ -95,7 +128,7 @@ MySettingsTab {
             id: nThreadsLabel
             text: qsTr("CPU Threads:")
             color: theme.textColor
-            Layout.row: 3
+            Layout.row: 4
             Layout.column: 0
         }
         MyTextField {
@@ -103,7 +136,7 @@ MySettingsTab {
             color: theme.textColor
             ToolTip.text: qsTr("Amount of processing threads to use bounded by 1 and number of logical processors")
             ToolTip.visible: hovered
-            Layout.row: 3
+            Layout.row: 4
             Layout.column: 1
             validator: IntValidator {
                 bottom: 1
@@ -125,12 +158,12 @@ MySettingsTab {
             id: saveChatsLabel
             text: qsTr("Save chats to disk:")
             color: theme.textColor
-            Layout.row: 4
+            Layout.row: 5
             Layout.column: 0
         }
         MyCheckBox {
             id: saveChatsBox
-            Layout.row: 4
+            Layout.row: 5
             Layout.column: 1
             checked: MySettings.saveChats
             onClicked: {
@@ -144,12 +177,12 @@ MySettingsTab {
             id: saveChatGPTChatsLabel
             text: qsTr("Save ChatGPT chats to disk:")
             color: theme.textColor
-            Layout.row: 5
+            Layout.row: 6
             Layout.column: 0
         }
         MyCheckBox {
             id: saveChatGPTChatsBox
-            Layout.row: 5
+            Layout.row: 6
             Layout.column: 1
             checked: MySettings.saveChatGPTChats
             onClicked: {
@@ -160,12 +193,12 @@ MySettingsTab {
             id: serverChatLabel
             text: qsTr("Enable API server:")
             color: theme.textColor
-            Layout.row: 6
+            Layout.row: 7
             Layout.column: 0
         }
         MyCheckBox {
             id: serverChatBox
-            Layout.row: 6
+            Layout.row: 7
             Layout.column: 1
             checked: MySettings.serverChat
             onClicked: {
@@ -175,7 +208,7 @@ MySettingsTab {
             ToolTip.visible: hovered
         }
         Rectangle {
-            Layout.row: 7
+            Layout.row: 8
             Layout.column: 0
             Layout.columnSpan: 3
             Layout.fillWidth: true

gpt4all-chat/qml/Theme.qml

@@ -1,25 +1,27 @@
 import QtCore
 import QtQuick
 import QtQuick.Controls.Basic
+import mysettings
 
 QtObject {
-    property color textColor: "#d1d5db"
-    property color textAccent: "#8e8ea0"
-    property color mutedTextColor: backgroundLightest
-    property color textErrorColor: "red"
-    property color backgroundDarkest: "#1c1f21"
-    property color backgroundDarker: "#1e2123"
-    property color backgroundDark: "#222527"
-    property color backgroundLight: "#343541"
-    property color backgroundLighter: "#444654"
-    property color backgroundLightest: "#7d7d8e"
-    property color backgroundAccent: "#40414f"
-    property color buttonBorder: "#565869"
-    property color dialogBorder: "#d1d5db"
-    property color userColor: "#ec86bf"
+    property color textColor: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34"
+    property color textAccent: MySettings.chatTheme == "Dark" ? "#8e8ea0" : "#71717f"
+    property color mutedTextColor: MySettings.chatTheme == "Dark" ? backgroundLightest : "#AFAFB5"
+    property color backgroundDarkest: MySettings.chatTheme == "Dark" ? "#1c1f21" : "#e3e3e5"
+    property color backgroundDarker: MySettings.chatTheme == "Dark" ? "#1e2123" : "#e0dedc"
+    property color backgroundDark: MySettings.chatTheme == "Dark" ? "#222527" : "#D2D1D5"
+    property color backgroundLight: MySettings.chatTheme == "Dark" ? "#343541" : "#FFFFFF"
+    property color backgroundLighter: MySettings.chatTheme == "Dark" ? "#444654" : "#F7F7F8"
+    property color backgroundLightest: MySettings.chatTheme == "Dark" ? "#7d7d8e" : "#82827a"
+    property color backgroundAccent: MySettings.chatTheme == "Dark" ? "#40414f" : "#E3E3E6"
+    property color buttonBorder: MySettings.chatTheme == "Dark" ? "#565869" : "#a9a9b0"
+    property color dialogBorder: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34"
+    property color userColor: MySettings.chatTheme == "Dark" ? "#ec86bf" : "#137382"
+    property color linkColor: MySettings.chatTheme == "Dark" ? "#55aaff" : "#aa5500"
+    property color tabBorder: MySettings.chatTheme == "Dark" ? backgroundLight : backgroundDark
     property color assistantColor: "#10a37f"
-    property color linkColor: "#55aaff"
-    property color tabBorder: backgroundLight
+    property color textErrorColor: "red"
     property real  fontSizeLarge: Qt.application.font.pixelSize
     property real  fontSizeLarger: Qt.application.font.pixelSize + 2
 }
+