backend : quick llama.cpp update to fix fallback to CPU

Signed-off-by: Jared Van Bortel <jared@nomic.ai>

gpt4all-backend/bert.cpp

@@ -381,10 +381,9 @@ void bert_eval(
 
             struct ggml_tensor *KQ = ggml_mul_mat(ctx0, K, Q);
             // KQ = soft_max(KQ / sqrt(head width))
-            KQ = ggml_soft_max(ctx0,
-                               ggml_scale(ctx0,
-                                          KQ,
-                                          ggml_new_f32(ctx0, 1.0f / sqrt((float)d_head))));
+            KQ = ggml_soft_max(
+                ctx0, ggml_scale(ctx0, KQ, 1.0f / sqrt((float)d_head))
+            );
 
             V = ggml_cont(ctx0, ggml_transpose(ctx0, V));
             struct ggml_tensor *KQV = ggml_mul_mat(ctx0, V, KQ);
@@ -490,10 +489,6 @@ struct bert_ctx * bert_load_from_file(const char *fname)
 #endif
 
     bert_ctx * new_bert = new bert_ctx;
-#if defined(GGML_USE_KOMPUTE)
-    new_bert->buf_compute.force_cpu = true;
-    new_bert->work_buf.force_cpu = true;
-#endif
 
     bert_model & model = new_bert->model;
     bert_vocab & vocab = new_bert->vocab;

gpt4all-backend/gptj.cpp

@@ -414,11 +414,7 @@ bool gptj_eval(
             struct ggml_tensor * KQ = ggml_mul_mat(ctx0, K, Q);
 
             // KQ_scaled = KQ / sqrt(n_embd/n_head)
-            struct ggml_tensor * KQ_scaled =
-                ggml_scale(ctx0,
-                        KQ,
-                        ggml_new_f32(ctx0, 1.0f/sqrt(float(n_embd)/n_head))
-                        );
+            struct ggml_tensor * KQ_scaled = ggml_scale(ctx0, KQ, 1.0f/sqrt(float(n_embd)/n_head));
 
             // KQ_masked = mask_past(KQ_scaled)
             struct ggml_tensor * KQ_masked = ggml_diag_mask_inf(ctx0, KQ_scaled, n_past);

gpt4all-backend/llama.cpp-mainline

@@ -1 +1 @@
-Subproject commit 01307d86bbe980128308c36b64c494fb9dbaa5bf
+Subproject commit 28921b84e4547c42fd7d23615d92c9d894a6cc2d

gpt4all-backend/llama.cpp.cmake

@@ -175,6 +175,7 @@ if (LLAMA_KOMPUTE)
             DEPENDS ${LLAMA_DIR}/${source}
               ${LLAMA_DIR}/kompute-shaders/common.comp
               ${LLAMA_DIR}/kompute-shaders/op_getrows.comp
+              ${LLAMA_DIR}/kompute-shaders/op_mul_mv_q_n_pre.comp
               ${LLAMA_DIR}/kompute-shaders/op_mul_mv_q_n.comp
             COMMAND ${glslc_executable} --target-env=vulkan1.2 -o ${spv_file} ${LLAMA_DIR}/${source}
             COMMENT "Compiling ${source} to ${source}.spv"
@@ -231,7 +232,6 @@ if (LLAMA_KOMPUTE)
           kompute-shaders/op_add.comp
           kompute-shaders/op_addrow.comp
           kompute-shaders/op_mul.comp
-          kompute-shaders/op_mulrow.comp
           kompute-shaders/op_silu.comp
           kompute-shaders/op_relu.comp
           kompute-shaders/op_gelu.comp
@@ -264,7 +264,6 @@ if (LLAMA_KOMPUTE)
           shaderop_add.h
           shaderop_addrow.h
           shaderop_mul.h
-          shaderop_mulrow.h
           shaderop_silu.h
           shaderop_relu.h
           shaderop_gelu.h

gpt4all-backend/llamamodel.cpp

@@ -96,6 +96,7 @@ static int llama_sample_top_p_top_k(
 struct LLamaPrivate {
     const std::string modelPath;
     bool modelLoaded;
+    int device = -1;
     llama_model *model = nullptr;
     llama_context *ctx = nullptr;
     llama_model_params model_params;
@@ -167,24 +168,17 @@ bool LLamaModel::loadModel(const std::string &modelPath, int n_ctx)
     if (llama_verbose()) {
         std::cerr << "llama.cpp: using Metal" << std::endl;
     }
-    // metal always runs the whole model if n_gpu_layers is not 0, at least
-    // currently
-    d_ptr->model_params.n_gpu_layers = 1;
-#endif
-#ifdef GGML_USE_KOMPUTE
-    if (ggml_vk_has_device()) {
-        // vulkan always runs the whole model if n_gpu_layers is not 0, at least
-        // currently
-        d_ptr->model_params.n_gpu_layers = 1;
+    d_ptr->model_params.n_gpu_layers = 100;
+#elif defined(GGML_USE_KOMPUTE)
+    if (d_ptr->device != -1) {
+        d_ptr->model_params.main_gpu = d_ptr->device;
+        d_ptr->model_params.n_gpu_layers = 100;
     }
 #endif
 
     d_ptr->model = llama_load_model_from_file_gpt4all(modelPath.c_str(), &d_ptr->model_params);
     if (!d_ptr->model) {
-#ifdef GGML_USE_KOMPUTE
-        // Explicitly free the device so next load it doesn't use it
-        ggml_vk_free_device();
-#endif
+        d_ptr->device = -1;
         std::cerr << "LLAMA ERROR: failed to load model from " <<  modelPath << std::endl;
         return false;
     }
@@ -214,10 +208,7 @@ bool LLamaModel::loadModel(const std::string &modelPath, int n_ctx)
 
     d_ptr->ctx = llama_new_context_with_model(d_ptr->model, d_ptr->ctx_params);
     if (!d_ptr->ctx) {
-#ifdef GGML_USE_KOMPUTE
-        // Explicitly free the device so next load it doesn't use it
-        ggml_vk_free_device();
-#endif
+        d_ptr->device = -1;
         std::cerr << "LLAMA ERROR: failed to init context for model " <<  modelPath << std::endl;
         return false;
     }
@@ -225,7 +216,7 @@ bool LLamaModel::loadModel(const std::string &modelPath, int n_ctx)
     d_ptr->end_tokens = {llama_token_eos(d_ptr->model)};
 
 #ifdef GGML_USE_KOMPUTE
-    if (ggml_vk_has_device()) {
+    if (usingGPUDevice() && ggml_vk_has_device()) {
         std::cerr << "llama.cpp: using Vulkan on " << ggml_vk_current_device().name << std::endl;
     }
 #endif
@@ -339,62 +330,70 @@ const std::vector<LLModel::Token> &LLamaModel::endTokens() const
 std::vector<LLModel::GPUDevice> LLamaModel::availableGPUDevices(size_t memoryRequired)
 {
 #if defined(GGML_USE_KOMPUTE)
-    std::vector<ggml_vk_device> vkDevices = ggml_vk_available_devices(memoryRequired);
+    size_t count = 0;
+    auto * vkDevices = ggml_vk_available_devices(memoryRequired, &count);
 
-    std::vector<LLModel::GPUDevice> devices;
-    for(const auto& vkDevice : vkDevices) {
-        LLModel::GPUDevice device;
-        device.index = vkDevice.index;
-        device.type = vkDevice.type;
-        device.heapSize = vkDevice.heapSize;
-        device.name = vkDevice.name;
-        device.vendor = vkDevice.vendor;
+    if (vkDevices) {
+        std::vector<LLModel::GPUDevice> devices;
+        devices.reserve(count);
 
-        devices.push_back(device);
+        for (size_t i = 0; i < count; ++i) {
+            auto & dev = vkDevices[i];
+            devices.emplace_back(
+                /* index    = */ dev.index,
+                /* type     = */ dev.type,
+                /* heapSize = */ dev.heapSize,
+                /* name     = */ dev.name,
+                /* vendor   = */ dev.vendor
+            );
+        }
+
+        free(vkDevices);
+        return devices;
     }
-
-    return devices;
-#else
-    return std::vector<LLModel::GPUDevice>();
 #endif
+
+    return {};
 }
 
-bool LLamaModel::initializeGPUDevice(size_t memoryRequired, const std::string& device)
+bool LLamaModel::initializeGPUDevice(size_t memoryRequired, const std::string &name)
 {
 #if defined(GGML_USE_KOMPUTE)
-    return ggml_vk_init_device(memoryRequired, device);
+    ggml_vk_device device;
+    bool ok = ggml_vk_get_device(&device, memoryRequired, name.c_str());
+    if (ok) {
+        d_ptr->device = device.index;
+        return true;
+    }
 #else
-    return false;
+    (void)memoryRequired;
+    (void)name;
 #endif
+    return false;
 }
 
 bool LLamaModel::initializeGPUDevice(const LLModel::GPUDevice &device, std::string *unavail_reason)
 {
-    bool result = false;
 #if defined(GGML_USE_KOMPUTE)
-    ggml_vk_device vkDevice;
-    vkDevice.index = device.index;
-    vkDevice.type = device.type;
-    vkDevice.heapSize = device.heapSize;
-    vkDevice.name = device.name;
-    vkDevice.vendor = device.vendor;
-    result = ggml_vk_init_device(vkDevice);
-    if (!result && unavail_reason) {
-        *unavail_reason = "failed to init GPU";
-    }
+    (void)unavail_reason;
+    d_ptr->device = device.index;
+    return true;
 #else
+    (void)device;
     if (unavail_reason) {
         *unavail_reason = "built without Kompute";
     }
+    return false;
 #endif
-    return result;
 }
 
 bool LLamaModel::initializeGPUDevice(int device)
 {
 #if defined(GGML_USE_KOMPUTE)
-    return ggml_vk_init_device(device);
+    d_ptr->device = device;
+    return true;
 #else
+    (void)device;
     return false;
 #endif
 }
@@ -402,7 +401,7 @@ bool LLamaModel::initializeGPUDevice(int device)
 bool LLamaModel::hasGPUDevice()
 {
 #if defined(GGML_USE_KOMPUTE)
-    return ggml_vk_has_device();
+    return d_ptr->device != -1;
 #else
     return false;
 #endif
@@ -411,11 +410,12 @@ bool LLamaModel::hasGPUDevice()
 bool LLamaModel::usingGPUDevice()
 {
 #if defined(GGML_USE_KOMPUTE)
-    return ggml_vk_using_vulkan();
+    return hasGPUDevice() && d_ptr->model_params.n_gpu_layers > 0;
 #elif defined(GGML_USE_METAL)
     return true;
-#endif
+#else
     return false;
+#endif
 }
 
 std::string get_arch_name(gguf_context *ctx_gguf) {

gpt4all-backend/llamamodel_impl.h

@@ -26,7 +26,7 @@ public:
     void setThreadCount(int32_t n_threads) override;
     int32_t threadCount() const override;
     std::vector<GPUDevice> availableGPUDevices(size_t memoryRequired) override;
-    bool initializeGPUDevice(size_t memoryRequired, const std::string& device) override;
+    bool initializeGPUDevice(size_t memoryRequired, const std::string& name) override;
     bool initializeGPUDevice(const GPUDevice &device, std::string *unavail_reason) override;
     bool initializeGPUDevice(int device) override;
     bool hasGPUDevice() override;

gpt4all-backend/llmodel.h

@@ -17,11 +17,14 @@ public:
     using Token = int32_t;
 
     struct GPUDevice {
-        int index = 0;
-        int type = 0;
-        size_t heapSize = 0;
+        int index;
+        int type;
+        size_t heapSize;
         std::string name;
         std::string vendor;
+
+        GPUDevice(int index, int type, size_t heapSize, std::string name, std::string vendor):
+            index(index), type(type), heapSize(heapSize), name(std::move(name)), vendor(std::move(vendor)) {}
     };
 
     class Implementation {
@@ -98,14 +101,25 @@ public:
         return *m_implementation;
     }
 
-    virtual std::vector<GPUDevice> availableGPUDevices(size_t /*memoryRequired*/) { return std::vector<GPUDevice>(); }
-    virtual bool initializeGPUDevice(size_t /*memoryRequired*/, const std::string& /*device*/) { return false; }
-    virtual bool initializeGPUDevice(const GPUDevice &/*device*/, std::string *unavail_reason = nullptr) {
+    virtual std::vector<GPUDevice> availableGPUDevices(size_t memoryRequired) {
+        (void)memoryRequired;
+        return {};
+    }
+
+    virtual bool initializeGPUDevice(size_t memoryRequired, const std::string& name) {
+        (void)memoryRequired;
+        (void)name;
+        return false;
+    }
+
+    virtual bool initializeGPUDevice(const GPUDevice & device, std::string *unavail_reason = nullptr) {
+        (void)device;
         if (unavail_reason) {
             *unavail_reason = "model has no GPU support";
         }
         return false;
     }
+
     virtual bool initializeGPUDevice(int /*device*/) { return false; }
     virtual bool hasGPUDevice() { return false; }
     virtual bool usingGPUDevice() { return false; }

gpt4all-backend/llmodel_c.cpp

@@ -230,12 +230,13 @@ bool llmodel_gpu_init_gpu_device_by_string(llmodel_model model, size_t memoryReq
 
 bool llmodel_gpu_init_gpu_device_by_struct(llmodel_model model, const llmodel_gpu_device *device)
 {
-    LLModel::GPUDevice d;
-    d.index = device->index;
-    d.type = device->type;
-    d.heapSize = device->heapSize;
-    d.name = device->name;
-    d.vendor = device->vendor;
+    LLModel::GPUDevice d(
+        /* index    = */ device->index,
+        /* type     = */ device->type,
+        /* heapSize = */ device->heapSize,
+        /* name     = */ device->name,
+        /* vendor   = */ device->vendor
+    );
     LLModelWrapper *wrapper = reinterpret_cast<LLModelWrapper*>(model);
     return wrapper->llModel->initializeGPUDevice(d);
 }

gpt4all-backend/llmodel_shared.h

@@ -4,50 +4,6 @@
 #include <vector>
 #include <ggml.h>
 
-#if defined(GGML_USE_KOMPUTE)
-#include "ggml-kompute.h"
-struct llm_buffer {
-    uint8_t * addr = NULL;
-    size_t size = 0;
-    ggml_vk_memory memory;
-    bool force_cpu = false;
-
-    llm_buffer() = default;
-
-    void resize(size_t size) {
-        free();
-
-        if (!ggml_vk_has_device() || force_cpu) {
-            this->addr = new uint8_t[size];
-            this->size = size;
-        } else {
-            this->memory = ggml_vk_allocate(size);
-            this->addr = (uint8_t*)memory.data;
-            this->size = size;
-        }
-    }
-
-    void free() {
-        if (!memory.primaryMemory) {
-            delete[] addr;
-        } else if (memory.data) {
-            ggml_vk_free_memory(memory);
-        }
-        this->addr = NULL;
-        this->size = 0;
-    }
-
-    ~llm_buffer() {
-        free();
-    }
-
-    // disable copy and move
-    llm_buffer(const llm_buffer&) = delete;
-    llm_buffer(llm_buffer&&) = delete;
-    llm_buffer& operator=(const llm_buffer&) = delete;
-    llm_buffer& operator=(llm_buffer&&) = delete;
-};
-#else
 struct llm_buffer {
     uint8_t * addr = NULL;
     size_t size = 0;
@@ -62,7 +18,6 @@ struct llm_buffer {
         delete[] addr;
     }
 };
-#endif
 
 struct llm_kv_cache {
     struct ggml_tensor * k;

gpt4all-chat/CMakeLists.txt

@@ -111,10 +111,15 @@ qt_add_qml_module(chat
       qml/LocalDocsSettings.qml
       qml/MySettingsTab.qml
       qml/MySettingsStack.qml
+      qml/MySettingsDestructiveButton.qml
+      qml/MySettingsButton.qml
+      qml/MySettingsLabel.qml
+      qml/MySlug.qml
       qml/MyButton.qml
       qml/MyComboBox.qml
       qml/MyDialog.qml
       qml/MyDirectoryField.qml
+      qml/MyTextArea.qml
       qml/MyTextField.qml
       qml/MyCheckBox.qml
       qml/MyBusyIndicator.qml

gpt4all-chat/chat.cpp

@@ -112,7 +112,7 @@ void Chat::resetResponseState()
     m_tokenSpeed = QString();
     emit tokenSpeedChanged();
     m_responseInProgress = true;
-    m_responseState = Chat::LocalDocsRetrieval;
+    m_responseState = m_collections.empty() ? Chat::PromptProcessing : Chat::LocalDocsRetrieval;
     emit responseInProgressChanged();
     emit responseStateChanged();
 }
@@ -120,7 +120,7 @@ void Chat::resetResponseState()
 void Chat::prompt(const QString &prompt)
 {
     resetResponseState();
-    emit promptRequested( m_collections, prompt);
+    emit promptRequested(m_collections, prompt);
 }
 
 void Chat::regenerateResponse()

gpt4all-chat/main.qml

@@ -14,10 +14,10 @@ import mysettings
 
 Window {
     id: window
-    width: 1280
-    height: 720
-    minimumWidth: 720
-    minimumHeight: 480
+    width: 1920
+    height: 1080
+    minimumWidth: 1280
+    minimumHeight: 720
     visible: true
     title: qsTr("GPT4All v") + Qt.application.version
 
@@ -47,7 +47,7 @@ Window {
         }
     }
 
-    color: theme.backgroundDarkest
+    color: theme.black
 
     // Startup code
     Component.onCompleted: {
@@ -197,13 +197,98 @@ Window {
             + "<li>Check out our <a href=\"https://discord.gg/4M2QFmTt2k\">discord channel</a> for help")
     }
 
+    Rectangle {
+        id: accentRibbon
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        height: 3
+        color: theme.accentColor
+    }
+
+    Rectangle {
+        id: titleBar
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: 5
+        z: 200
+        height: 25
+        color: "transparent"
+
+        RowLayout {
+            anchors.left: parent.left
+            anchors.leftMargin: 30
+
+            Text {
+                textFormat: Text.StyledText
+                text: "<a href=\"https://gpt4all.io\">gpt4all.io</a> |"
+                horizontalAlignment: Text.AlignLeft
+                font.pixelSize: theme.fontSizeFixedSmall
+                color: theme.iconBackgroundLight
+                linkColor: hoverHandler1.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                HoverHandler { id: hoverHandler1 }
+                onLinkActivated: { Qt.openUrlExternally("https://gpt4all.io") }
+            }
+
+            Text {
+                textFormat: Text.StyledText
+                text: "<a href=\"https://github.com/nomic-ai/gpt4all\">github</a>"
+                horizontalAlignment: Text.AlignLeft
+                font.pixelSize: theme.fontSizeFixedSmall
+                color: theme.iconBackgroundLight
+                linkColor: hoverHandler2.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                HoverHandler { id: hoverHandler2 }
+                onLinkActivated: { Qt.openUrlExternally("https://github.com/nomic-ai/gpt4all") }
+            }
+        }
+
+        RowLayout {
+            anchors.right: parent.right
+            anchors.rightMargin: 30
+
+            Text {
+                textFormat: Text.StyledText
+                text: "<a href=\"https://nomic.ai\">nomic.ai</a> |"
+                horizontalAlignment: Text.AlignRight
+                font.pixelSize: theme.fontSizeFixedSmall
+                color: theme.iconBackgroundLight
+                linkColor: hoverHandler3.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                HoverHandler { id: hoverHandler3 }
+                onLinkActivated: { Qt.openUrlExternally("https://nomic.ai") }
+            }
+
+            Text {
+                textFormat: Text.StyledText
+                text: "<a href=\"https://twitter.com/nomic_ai\">twitter</a> |"
+                horizontalAlignment: Text.AlignRight
+                font.pixelSize: theme.fontSizeFixedSmall
+                color: theme.iconBackgroundLight
+                linkColor: hoverHandler4.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                HoverHandler { id: hoverHandler4 }
+                onLinkActivated: { Qt.openUrlExternally("https://twitter.com/nomic_ai") }
+            }
+
+            Text {
+                textFormat: Text.StyledText
+                text: "<a href=\"https://discord.gg/4M2QFmTt2k\">discord</a>"
+                horizontalAlignment: Text.AlignRight
+                font.pixelSize: theme.fontSizeFixedSmall
+                color: theme.iconBackgroundLight
+                linkColor: hoverHandler5.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
+                HoverHandler { id: hoverHandler5 }
+                onLinkActivated: { Qt.openUrlExternally("https://discord.gg/4M2QFmTt2k") }
+            }
+        }
+    }
+
     Rectangle {
         id: header
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
         height: 100
-        color: theme.backgroundDarkest
+        color: theme.mainHeader
         Item {
             anchors.centerIn: parent
             height: childrenRect.height
@@ -216,7 +301,7 @@ Window {
                 font.pixelSize: theme.fontSizeLarger
                 text: ""
                 background: Rectangle {
-                    color: theme.backgroundDarkest
+                    color: theme.mainHeader
                 }
                 horizontalAlignment: TextInput.AlignRight
             }
@@ -251,7 +336,7 @@ Window {
                     }
                 }
                 background: Rectangle {
-                    color: theme.backgroundDark
+                    color: theme.mainComboBackground
                     radius: 10
                 }
                 contentItem: Text {
@@ -261,8 +346,8 @@ Window {
                     text: currentChat.modelLoadingError !== ""
                         ? qsTr("Model loading error...")
                         : comboBox.currentModelName
-                    font: comboBox.font
-                    color: theme.textColor
+                    font.pixelSize: theme.fontSizeLarger
+                    color: theme.white
                     verticalAlignment: Text.AlignVCenter
                     horizontalAlignment: Text.AlignHCenter
                     elide: Text.ElideRight
@@ -277,7 +362,9 @@ Window {
                         verticalAlignment: Text.AlignVCenter
                     }
                     background: Rectangle {
-                        color: highlighted ? theme.backgroundLight : theme.backgroundDark
+                        color: (index % 2 === 0 ? theme.darkContrast : theme.lightContrast)
+                        border.width: highlighted
+                        border.color: theme.accentColor
                     }
                     highlighted: comboBox.highlightedIndex === index
                 }
@@ -314,7 +401,7 @@ Window {
                     anchors.verticalCenter: parent.verticalCenter
                     text: qsTr("Loading model...")
                     font.pixelSize: theme.fontSizeLarge
-                    color: theme.textAccent
+                    color: theme.oppositeTextColor
                 }
             }
         }
@@ -335,7 +422,7 @@ Window {
         id: drawerButton
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.leftMargin: 30
         width: 40
         height: 40
@@ -353,7 +440,7 @@ Window {
 
             Rectangle {
                 id: bar1
-                color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest
+                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
                 width: parent.width
                 height: 6
                 radius: 2
@@ -363,7 +450,7 @@ Window {
             Rectangle {
                 id: bar2
                 anchors.centerIn: parent
-                color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest
+                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
                 width: parent.width
                 height: 6
                 radius: 2
@@ -373,7 +460,7 @@ Window {
             Rectangle {
                 id: bar3
                 anchors.bottom: parent.bottom
-                color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest
+                color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
                 width: parent.width
                 height: 6
                 radius: 2
@@ -399,9 +486,10 @@ Window {
 
     MyToolButton {
         id: networkButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.rightMargin: 30
         width: 40
         height: 40
@@ -439,12 +527,13 @@ Window {
 
     MyToolButton {
         id: collectionsButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.right: networkButton.left
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.rightMargin: 10
         width: 40
-        height: 40
+        height: 42.5
         z: 200
         padding: 15
         toggled: currentChat.collectionList.length
@@ -459,9 +548,10 @@ Window {
 
     MyToolButton {
         id: settingsButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.right: collectionsButton.left
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.rightMargin: 10
         width: 40
         height: 40
@@ -527,9 +617,10 @@ Window {
 
     MyToolButton {
         id: copyButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.right: settingsButton.left
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.rightMargin: 10
         width: 40
         height: 40
@@ -592,9 +683,10 @@ Window {
 
     MyToolButton {
         id: resetContextButton
+        backgroundColor: theme.iconBackgroundLight
         anchors.right: copyButton.left
         anchors.top: parent.top
-        anchors.topMargin: 30
+        anchors.topMargin: 42.5
         anchors.rightMargin: 10
         width: 40
         height: 40
@@ -616,7 +708,6 @@ Window {
         id: checkForUpdatesError
         anchors.centerIn: parent
         modal: false
-        opacity: 0.9
         padding: 20
         Text {
             horizontalAlignment: Text.AlignJustify
@@ -627,7 +718,7 @@ Window {
                    above where this application resides on your filesystem.<br><br>
                    If you can't start it manually, then I'm afraid you'll have to<br>
                    reinstall.")
-            color: theme.textColor
+            color: theme.textErrorColor
             font.pixelSize: theme.fontSizeLarge
             Accessible.role: Accessible.Dialog
             Accessible.name: text
@@ -635,7 +726,7 @@ Window {
         }
         background: Rectangle {
             anchors.fill: parent
-            color: theme.backgroundDarkest
+            color: theme.containerBackground
             border.width: 1
             border.color: theme.dialogBorder
             radius: 10
@@ -656,7 +747,7 @@ Window {
 
     ChatDrawer {
         id: drawer
-        y: header.height
+        y: header.height + accentRibbon.height
         width: Math.min(600, 0.3 * window.width)
         height: window.height - y
         onDownloadClicked: {
@@ -678,11 +769,11 @@ Window {
 
     Rectangle {
         id: conversation
-        color: theme.backgroundLight
+        color: theme.conversationBackground
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
-        anchors.top: header.bottom
+        anchors.top: accentRibbon.bottom
 
         ScrollView {
             id: scrollView
@@ -695,58 +786,129 @@ Window {
 
             Rectangle {
                 anchors.fill: parent
-                color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLight
+                color: currentChat.isServer ? theme.black : theme.conversationBackground
 
-                Text {
-                    id: warningLabel
-                    text: qsTr("You must install a model to continue. Models are available via the download dialog or you can install them manually by downloading from <a href=\"https://gpt4all.io\">the GPT4All website</a> (look for the Models Explorer) and placing them in the model folder. The model folder can be found in the settings dialog under the application tab.")
-                    color: theme.textColor
-                    font.pixelSize: theme.fontSizeLarge
-                    width: 600
-                    linkColor: theme.linkColor
-                    wrapMode: Text.WordWrap
-                    anchors.centerIn: parent
-                    visible: ModelList.installedModels.count === 0
-                    onLinkActivated: function(link) {
-                        Qt.openUrlExternally(link)
-                    }
-                }
+                Rectangle {
+                    id: homePage
+                    color: "transparent"//theme.green200
+                    anchors.fill: parent
+                    visible: (ModelList.installedModels.count === 0 || chatModel.count === 0) && !currentChat.isServer
 
-                MyButton {
-                    id: downloadButton
-                    text: qsTr("Download models")
-                    visible: ModelList.installedModels.count === 0
-                    anchors.top: warningLabel.bottom
-                    anchors.topMargin: 20
-                    anchors.horizontalCenter: warningLabel.horizontalCenter
-                    padding: 15
-                    leftPadding: 50
-                    Image {
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                        anchors.leftMargin: 15
-                        width: 24
-                        height: 24
-                        mipmap: true
-                        source: "qrc:/gpt4all/icons/download.svg"
-                    }
-                    background: Rectangle {
-                        border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder
-                        border.width: 2
-                        radius: 10
-                        color: downloadButton.hovered ? theme.backgroundLighter : theme.backgroundLight
-                    }
-                    onClicked: {
-                        downloadNewModels.open();
+                    ColumnLayout {
+                        anchors.centerIn: parent
+                        spacing: 0
+
+                        Text {
+                            Layout.alignment: Qt.AlignHCenter
+                            text: qsTr("GPT4All")
+                            color: theme.titleTextColor
+                            font.pixelSize: theme.fontSizeLargest + 15
+                            font.bold: true
+                            horizontalAlignment: Qt.AlignHCenter
+                            wrapMode: Text.WordWrap
+                        }
+
+                        Text {
+                            Layout.alignment: Qt.AlignHCenter
+                            textFormat: Text.StyledText
+                            text: qsTr(
+                            "<ul>
+                            <li>Run privacy-aware local chatbots.
+                            <li>No internet required to use.
+                            <li>CPU and GPU acceleration.
+                            <li>Chat with your local data and documents.
+                            <li>Built by Nomic AI and forever open-source.
+                            </ul>
+                            ")
+                            color: theme.textColor
+                            font.pixelSize: theme.fontSizeLarge
+                            wrapMode: Text.WordWrap
+                        }
+
+                        RowLayout {
+                            spacing: 10
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.topMargin: 30
+                            MySlug {
+                               text: "MISTRAL"
+                               color: theme.red600
+                            }
+                            MySlug {
+                               text: "FALCON"
+                               color: theme.green600
+                            }
+                            MySlug {
+                               text: "LLAMA"
+                               color: theme.purple500
+                            }
+                            MySlug {
+                               text: "LLAMA2"
+                               color: theme.red400
+                            }
+                            MySlug {
+                               text: "MPT"
+                               color: theme.green700
+                            }
+                            MySlug {
+                               text: "REPLIT"
+                               color: theme.yellow700
+                            }
+                            MySlug {
+                               text: "STARCODER"
+                               color: theme.purple400
+                            }
+                            MySlug {
+                               text: "SBERT"
+                               color: theme.yellow600
+                            }
+                            MySlug {
+                               text: "GPT-J"
+                               color: theme.gray600
+                            }
+                        }
+
+                        MyButton {
+                            id: downloadButton
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.topMargin: 40
+                            text: qsTr("Download models")
+                            fontPixelSize: theme.fontSizeLargest + 10
+                            padding: 18
+                            leftPadding: 50
+                            Image {
+                                id: image
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: parent.left
+                                anchors.leftMargin: 15
+                                width: 24
+                                height: 24
+                                mipmap: true
+                                source: "qrc:/gpt4all/icons/download.svg"
+                            }
+                            ColorOverlay {
+                                anchors.fill: image
+                                source: image
+                                color: theme.accentColor
+                            }
+                            onClicked: {
+                                downloadNewModels.open();
+                            }
+                        }
                     }
                 }
 
                 ListView {
                     id: listView
-                    visible: ModelList.installedModels.count !== 0
+                    visible: ModelList.installedModels.count !== 0 && chatModel.count !== 0
                     anchors.fill: parent
                     model: chatModel
-                    ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
+
+                    ScrollBar.vertical: ScrollBar {
+                        parent: listView.parent
+                        anchors.top: listView.top
+                        anchors.left: listView.right
+                        anchors.bottom: listView.bottom
+                    }
 
                     Accessible.role: Accessible.List
                     Accessible.name: qsTr("Conversation with the model")
@@ -767,8 +929,8 @@ Window {
                         background: Rectangle {
                             opacity: 1.0
                             color: name === qsTr("Response: ")
-                                ? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter)
-                                : (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight)
+                                ? (currentChat.isServer ? theme.black : theme.lightContrast)
+                                : (currentChat.isServer ? theme.white : theme.darkContrast)
                         }
                         TapHandler {
                             id: tapHandler
@@ -793,7 +955,7 @@ Window {
 
                         Component.onCompleted: {
                             responseText.setLinkColor(theme.linkColor);
-                            responseText.setHeaderColor(name === qsTr("Response: ") ? theme.backgroundLight : theme.backgroundLighter);
+                            responseText.setHeaderColor(name === qsTr("Response: ") ? theme.darkContrast : theme.lightContrast);
                             responseText.textDocument = textDocument
                         }
 
@@ -824,7 +986,7 @@ Window {
                                 }
                                 Label {
                                     anchors.verticalCenter: parent.verticalCenter
-                                    color: theme.textAccent
+                                    color: theme.mutedTextColor
                                     text: {
                                         switch (currentChat.responseState) {
                                         case Chat.ResponseStopped: return qsTr("response stopped ...");
@@ -981,6 +1143,7 @@ Window {
         MyButton {
             id: myButton
             visible: chatModel.count && !currentChat.isServer
+            textColor: theme.textColor
             Image {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
@@ -1010,10 +1173,10 @@ Window {
                 }
             }
             background: Rectangle {
-                border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder
+                border.color: theme.conversationButtonBorder
                 border.width: 2
                 radius: 10
-                color: myButton.hovered ? theme.backgroundLighter : theme.backgroundLight
+                color: myButton.hovered ? theme.conversationButtonBackgroundHovered : theme.conversationButtonBackground
             }
             anchors.bottom: textInputView.top
             anchors.horizontalCenter: textInputView.horizontalCenter
@@ -1037,12 +1200,13 @@ Window {
 
         RectangularGlow {
             id: effect
+            visible: !currentChat.isServer
             anchors.fill: textInputView
             glowRadius: 50
             spread: 0
-            color: theme.backgroundDark
+            color: theme.sendGlow
             cornerRadius: 10
-            opacity: 0.2
+            opacity: 0.1
         }
 
         ScrollView {
@@ -1053,7 +1217,7 @@ Window {
             anchors.margins: 30
             height: Math.min(contentHeight, 200)
             visible: !currentChat.isServer
-            TextArea {
+            MyTextArea {
                 id: textInput
                 color: theme.textColor
                 topPadding: 30
@@ -1061,14 +1225,8 @@ Window {
                 leftPadding: 20
                 rightPadding: 40
                 enabled: currentChat.isModelLoaded && !currentChat.isServer
-                wrapMode: Text.WordWrap
                 font.pixelSize: theme.fontSizeLarger
                 placeholderText: qsTr("Send a message...")
-                placeholderTextColor: theme.mutedTextColor
-                background: Rectangle {
-                    color: theme.backgroundAccent
-                    radius: 10
-                }
                 Accessible.role: Accessible.EditableText
                 Accessible.name: placeholderText
                 Accessible.description: qsTr("Send messages/prompts to the model")
@@ -1101,6 +1259,8 @@ Window {
         }
 
         MyToolButton {
+            backgroundColor: theme.sendButtonBackground
+            backgroundColorHovered: theme.sendButtonBackgroundHovered
             anchors.right: textInputView.right
             anchors.verticalCenter: textInputView.verticalCenter
             anchors.rightMargin: 15

gpt4all-chat/qml/AboutDialog.qml

@@ -11,7 +11,6 @@ MyDialog {
     id: abpoutDialog
     anchors.centerIn: parent
     modal: false
-    opacity: 0.9
     padding: 20
     width: 1024
     height: column.height + 40
@@ -39,8 +38,9 @@ MyDialog {
                 anchors.leftMargin: 30
                 anchors.verticalCenter: img.verticalCenter
                 text: qsTr("About GPT4All")
-                font.pixelSize: theme.fontSizeLarger
                 color: theme.textColor
+                font.pixelSize: theme.fontSizeLarge
+                font.bold: true
             }
         }
 
@@ -51,31 +51,23 @@ MyDialog {
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            TextArea {
+            MyTextArea {
                 id: welcome
-                wrapMode: Text.Wrap
                 width: 1024 - 40
-                padding: 20
                 textFormat: TextEdit.MarkdownText
                 text: qsTr("### Release notes\n")
                     + Download.releaseInfo.notes
                     + qsTr("### Contributors\n")
                     + Download.releaseInfo.contributors
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
                 focus: false
                 readOnly: true
                 Accessible.role: Accessible.Paragraph
                 Accessible.name: qsTr("Release notes")
                 Accessible.description: qsTr("Release notes for this version")
-                background: Rectangle {
-                    color: theme.backgroundLight
-                    radius: 10
-                }
             }
         }
 
-        Label {
+        MySettingsLabel {
             id: discordLink
             width: parent.width
             textFormat: Text.StyledText
@@ -90,7 +82,7 @@ MyDialog {
             Accessible.name: qsTr("Discord link")
         }
 
-        Label {
+        MySettingsLabel {
             id: nomicProps
             width: parent.width
             textFormat: Text.StyledText

gpt4all-chat/qml/ApplicationSettings.qml

@@ -18,11 +18,9 @@ MySettingsTab {
         columns: 3
         rowSpacing: 10
         columnSpacing: 10
-        Label {
+        MySettingsLabel {
             id: themeLabel
-            text: qsTr("Theme:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Theme")
             Layout.row: 1
             Layout.column: 0
         }
@@ -31,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")
@@ -53,11 +51,9 @@ MySettingsTab {
                 MySettings.chatTheme = themeBox.currentText
             }
         }
-        Label {
+        MySettingsLabel {
             id: fontLabel
-            text: qsTr("Font Size:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Font Size")
             Layout.row: 2
             Layout.column: 0
         }
@@ -88,11 +84,9 @@ MySettingsTab {
                 MySettings.fontSize = fontBox.currentText
             }
         }
-        Label {
+        MySettingsLabel {
             id: deviceLabel
-            text: qsTr("Device:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Device")
             Layout.row: 3
             Layout.column: 0
         }
@@ -126,11 +120,9 @@ MySettingsTab {
                 MySettings.device = deviceBox.currentText
             }
         }
-        Label {
+        MySettingsLabel {
             id: defaultModelLabel
-            text: qsTr("Default model:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Default model")
             Layout.row: 4
             Layout.column: 0
         }
@@ -161,11 +153,9 @@ MySettingsTab {
                 MySettings.userDefaultModel = comboBox.currentText
             }
         }
-        Label {
+        MySettingsLabel {
             id: modelPathLabel
-            text: qsTr("Download path:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Download path")
             Layout.row: 5
             Layout.column: 0
         }
@@ -190,7 +180,7 @@ MySettingsTab {
                 }
             }
         }
-        MyButton {
+        MySettingsButton {
             Layout.row: 5
             Layout.column: 2
             text: qsTr("Browse")
@@ -201,11 +191,9 @@ MySettingsTab {
                 })
             }
         }
-        Label {
+        MySettingsLabel {
             id: nThreadsLabel
-            text: qsTr("CPU Threads:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("CPU Threads")
             Layout.row: 6
             Layout.column: 0
         }
@@ -233,11 +221,9 @@ MySettingsTab {
             Accessible.name: nThreadsLabel.text
             Accessible.description: ToolTip.text
         }
-        Label {
+        MySettingsLabel {
             id: saveChatsContextLabel
-            text: qsTr("Save chats context to disk:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Save chats context to disk")
             Layout.row: 7
             Layout.column: 0
         }
@@ -252,11 +238,9 @@ MySettingsTab {
             ToolTip.text: qsTr("WARNING: Saving chats to disk can be ~2GB per chat")
             ToolTip.visible: hovered
         }
-        Label {
+        MySettingsLabel {
             id: serverChatLabel
-            text: qsTr("Enable API server:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Enable API server")
             Layout.row: 8
             Layout.column: 0
         }
@@ -276,8 +260,8 @@ MySettingsTab {
             Layout.column: 0
             Layout.columnSpan: 3
             Layout.fillWidth: true
-            height: 1
-            color: theme.tabBorder
+            height: 3
+            color: theme.accentColor
         }
     }
     advancedSettings: GridLayout {
@@ -289,14 +273,12 @@ MySettingsTab {
             Layout.column: 0
             Layout.fillWidth: true
             Layout.columnSpan: 3
-            height: 1
-            color: theme.tabBorder
+            height: 3
+            color: theme.accentColor
         }
-        Label {
+        MySettingsLabel {
             id: gpuOverrideLabel
-            text: qsTr("Force Metal (macOS+arm):")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Force Metal (macOS+arm)")
             Layout.row: 1
             Layout.column: 0
         }
@@ -316,7 +298,7 @@ MySettingsTab {
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignTop
                 Layout.minimumHeight: warningLabel.height
-                Label {
+                MySettingsLabel {
                     id: warningLabel
                     width: parent.width
                     color: theme.textErrorColor

gpt4all-chat/qml/ChatDrawer.qml

@@ -12,7 +12,6 @@ import mysettings
 Drawer {
     id: chatDrawer
     modal: false
-    opacity: 0.9
 
     Theme {
         id: theme
@@ -23,7 +22,7 @@ Drawer {
 
     background: Rectangle {
         height: parent.height
-        color: theme.backgroundDarkest
+        color: theme.containerBackground
     }
 
     Item {
@@ -43,12 +42,6 @@ Drawer {
             bottomPadding: 20
             text: qsTr("\uFF0B New chat")
             Accessible.description: qsTr("Create a new chat")
-            background: Rectangle {
-                border.color: newChat.down ? theme.backgroundLightest : theme.buttonBorder
-                border.width: 2
-                radius: 10
-                color: newChat.hovered ? theme.backgroundDark : theme.backgroundDarkest
-            }
             onClicked: {
                 ChatListModel.addChat();
                 Network.sendNewChat(ChatListModel.count)
@@ -71,19 +64,23 @@ Drawer {
                 anchors.fill: parent
                 anchors.rightMargin: 10
                 model: ChatListModel
-                ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
+                ScrollBar.vertical: ScrollBar {
+                    parent: conversationList.parent
+                    anchors.top: conversationList.top
+                    anchors.left: conversationList.right
+                    anchors.bottom: conversationList.bottom
+                }
 
                 delegate: Rectangle {
                     id: chatRectangle
                     width: conversationList.width
                     height: chatName.height
-                    opacity: 0.9
                     property bool isCurrent: ChatListModel.currentChat === ChatListModel.get(index)
                     property bool isServer: ChatListModel.get(index) && ChatListModel.get(index).isServer
                     property bool trashQuestionDisplayed: false
                     visible: !isServer || MySettings.serverChat
                     z: isCurrent ? 199 : 1
-                    color: isServer ? theme.backgroundDarkest : (index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter)
+                    color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
                     border.width: isCurrent
                     border.color: chatName.readOnly ? theme.assistantColor : theme.userColor
                     TextField {
@@ -106,7 +103,7 @@ Drawer {
                             font: chatName.font
                             text: name
                             elide: Text.ElideRight
-                            elideWidth: chatName.width - 25
+                            elideWidth: chatName.width - 40
                         }
                         background: Rectangle {
                             color: "transparent"

gpt4all-chat/qml/CollectionsDialog.qml

@@ -22,9 +22,10 @@ MyDialog {
         id: listLabel
         anchors.top: parent.top
         anchors.left: parent.left
-        text: qsTr("Local Documents:")
+        text: qsTr("Local Documents")
+        color: theme.titleTextColor
         font.pixelSize: theme.fontSizeLarge
-        color: theme.textColor
+        font.bold: true
     }
 
     ScrollView {
@@ -37,21 +38,28 @@ MyDialog {
         anchors.right: parent.right
         clip: true
         contentHeight: 300
-        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
         background: Rectangle {
-            color: theme.backgroundLighter
+            color: theme.controlBackground
         }
 
         ListView {
             id: listView
             model: LocalDocs.localDocsModel
             boundsBehavior: Flickable.StopAtBounds
+            ScrollBar.vertical: ScrollBar {
+                parent: listView.parent
+                anchors.top: listView.top
+                anchors.left: listView.right
+                anchors.bottom: listView.bottom
+            }
+
             delegate: Rectangle {
                 id: item
                 width: listView.width
                 height: collectionId.height + 40
-                color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter
+                color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
                 MyCheckBox {
                     id: checkBox
                     anchors.verticalCenter: parent.verticalCenter
@@ -90,7 +98,7 @@ MyDialog {
                     value: (model.totalBytesToIndex - model.currentBytesToIndex) / model.totalBytesToIndex
                     background: Rectangle {
                         implicitHeight: 45
-                        color: theme.backgroundDarkest
+                        color: theme.progressBackground
                         radius: 3
                     }
                     contentItem: Item {
@@ -100,7 +108,7 @@ MyDialog {
                             width: itemProgressBar.visualPosition * parent.width
                             height: parent.height
                             radius: 2
-                            color: theme.assistantColor
+                            color: theme.progressForeground
                         }
                     }
                     Accessible.role: Accessible.ProgressBar
@@ -123,7 +131,7 @@ MyDialog {
         }
     }
 
-    MyButton {
+    MySettingsButton {
         id: collectionSettings
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter

gpt4all-chat/qml/LocalDocsSettings.qml

@@ -26,7 +26,7 @@ MySettingsTab {
         property alias collection: collection.text
         property alias folder_path: folderEdit.text
 
-        Label {
+        MySettingsLabel {
             id: downloadLabel
             Layout.fillWidth: true
             Layout.maximumWidth: parent.width
@@ -34,11 +34,9 @@ MySettingsTab {
             visible: !hasEmbeddingModel
             Layout.alignment: Qt.AlignLeft
             text: qsTr("This feature requires the download of a text embedding model in order to index documents for later search. Please download the <b>SBert</a> text embedding model from the download dialog to proceed.")
-            font.pixelSize: theme.fontSizeLarger
-            color: theme.textColor
         }
 
-        MyButton {
+        MySettingsButton {
             visible: !hasEmbeddingModel
             Layout.topMargin: 20
             Layout.alignment: Qt.AlignLeft
@@ -97,7 +95,7 @@ MySettingsTab {
                     }
                 }
 
-                MyButton {
+                MySettingsButton {
                     id: browseButton
                     text: qsTr("Browse")
                     onClicked: {
@@ -107,7 +105,7 @@ MySettingsTab {
                     }
                 }
 
-                MyButton {
+                MySettingsButton {
                     id: addButton
                     text: qsTr("Add")
                     Accessible.role: Accessible.Button
@@ -143,7 +141,7 @@ MySettingsTab {
                     id: item
                     Layout.fillWidth: true
                     height: buttons.height + 20
-                    color: index % 2 === 0 ? theme.backgroundDark : theme.backgroundDarker
+                    color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
                     property bool removing: false
 
                     Text {
@@ -177,7 +175,7 @@ MySettingsTab {
                         anchors.margins: 20
                         width: removeButton.width
                         height:removeButton.height
-                        MyButton {
+                        MySettingsButton {
                             id: removeButton
                             anchors.centerIn: parent
                             text: qsTr("Remove")
@@ -194,11 +192,9 @@ MySettingsTab {
 
         RowLayout {
             visible: hasEmbeddingModel
-            Label {
+            MySettingsLabel {
                 id: showReferencesLabel
-                text: qsTr("Show references:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Show references")
             }
             MyCheckBox {
                 id: showReferencesBox
@@ -214,8 +210,8 @@ MySettingsTab {
         Rectangle {
             visible: hasEmbeddingModel
             Layout.fillWidth: true
-            height: 1
-            color: theme.tabBorder
+            height: 3
+            color: theme.accentColor
         }
     }
     advancedSettings: GridLayout {
@@ -230,17 +226,15 @@ MySettingsTab {
             Layout.column: 0
             Layout.fillWidth: true
             Layout.columnSpan: 3
-            height: 1
-            color: theme.tabBorder
+            height: 3
+            color: theme.accentColor
         }
 
-        Label {
+        MySettingsLabel {
             id: chunkLabel
             Layout.row: 1
             Layout.column: 0
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
-            text: qsTr("Document snippet size (characters):")
+            text: qsTr("Document snippet size (characters)")
         }
 
         MyTextField {
@@ -264,13 +258,11 @@ MySettingsTab {
             }
         }
 
-        Label {
+        MySettingsLabel {
             id: contextItemsPerPrompt
             Layout.row: 2
             Layout.column: 0
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
-            text: qsTr("Max document snippets per prompt:")
+            text: qsTr("Max document snippets per prompt")
         }
 
         MyTextField {
@@ -300,7 +292,7 @@ MySettingsTab {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignTop
             Layout.minimumHeight: warningLabel.height
-            Label {
+            MySettingsLabel {
                 id: warningLabel
                 width: parent.width
                 color: theme.textErrorColor

gpt4all-chat/qml/ModelDownloaderDialog.qml

@@ -41,11 +41,17 @@ MyDialog {
 
         Label {
             id: listLabel
-            text: qsTr("Available Models:")
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Available Models")
+            visible: false
             Layout.alignment: Qt.AlignLeft
             Layout.fillWidth: true
-            color: theme.textColor
+            color: theme.titleTextColor
+            font.pixelSize: theme.fontSizeLarge
+            font.bold: true
+        }
+
+        Item {
+            height: 0 // for visible space between close button and rest of dialog
         }
 
         Label {
@@ -84,7 +90,7 @@ MyDialog {
                     id: delegateItem
                     width: modelListView.width
                     height: childrenRect.height
-                    color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter
+                    color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
 
                     GridLayout {
                         columns: 2
@@ -99,7 +105,7 @@ MyDialog {
                             Layout.topMargin: 20
                             Layout.leftMargin: 20
                             Layout.columnSpan: 2
-                            color: theme.assistantColor
+                            color: theme.titleTextColor
                             Accessible.role: Accessible.Paragraph
                             Accessible.name: qsTr("Model file")
                             Accessible.description: qsTr("Model file to be downloaded")
@@ -108,7 +114,8 @@ MyDialog {
                         Rectangle {
                             id: actionBox
                             width: childrenRect.width + 20
-                            color: theme.backgroundDark
+                            color: theme.containerBackground
+                            border.color: theme.accentColor
                             border.width: 1
                             radius: 10
                             Layout.row: 1
@@ -122,7 +129,7 @@ MyDialog {
 
                             ColumnLayout {
                                 spacing: 0
-                                MyButton {
+                                MySettingsButton {
                                     id: downloadButton
                                     text: isDownloading ? qsTr("Cancel") : isIncomplete ? qsTr("Resume") : qsTr("Download")
                                     font.pixelSize: theme.fontSizeLarge
@@ -133,12 +140,6 @@ MyDialog {
                                     Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                     visible: !isChatGPT && !installed && !calcHash && downloadError === ""
                                     Accessible.description: qsTr("Stop/restart/start the download")
-                                    background: Rectangle {
-                                        border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder
-                                        border.width: 2
-                                        radius: 10
-                                        color: downloadButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
-                                    }
                                     onClicked: {
                                         if (!isDownloading) {
                                             Download.downloadModel(filename);
@@ -148,10 +149,9 @@ MyDialog {
                                     }
                                 }
 
-                                MyButton {
+                                MySettingsDestructiveButton {
                                     id: removeButton
                                     text: qsTr("Remove")
-                                    font.pixelSize: theme.fontSizeLarge
                                     Layout.topMargin: 20
                                     Layout.leftMargin: 20
                                     Layout.minimumWidth: openaiKey.width
@@ -159,18 +159,12 @@ MyDialog {
                                     Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                     visible: installed || downloadError !== ""
                                     Accessible.description: qsTr("Remove model from filesystem")
-                                    background: Rectangle {
-                                        border.color: removeButton.down ? theme.backgroundLightest : theme.buttonBorder
-                                        border.width: 2
-                                        radius: 10
-                                        color: removeButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
-                                    }
                                     onClicked: {
                                         Download.removeModel(filename);
                                     }
                                 }
 
-                                MyButton {
+                                MySettingsButton {
                                     id: installButton
                                     visible: !installed && isChatGPT
                                     Layout.topMargin: 20
@@ -180,12 +174,6 @@ MyDialog {
                                     Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                                     text: qsTr("Install")
                                     font.pixelSize: theme.fontSizeLarge
-                                    background: Rectangle {
-                                        border.color: installButton.down ? theme.backgroundLightest : theme.buttonBorder
-                                        border.width: 2
-                                        radius: 10
-                                        color: installButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
-                                    }
                                     onClicked: {
                                         if (openaiKey.text === "")
                                             openaiKey.showError();
@@ -285,7 +273,7 @@ MyDialog {
                                         value: bytesReceived / bytesTotal
                                         background: Rectangle {
                                             implicitHeight: 45
-                                            color: theme.backgroundDarkest
+                                            color: theme.progressBackground
                                             radius: 3
                                         }
                                         contentItem: Item {
@@ -295,7 +283,7 @@ MyDialog {
                                                 width: itemProgressBar.visualPosition * parent.width
                                                 height: parent.height
                                                 radius: 2
-                                                color: theme.assistantColor
+                                                color: theme.progressForeground
                                             }
                                         }
                                         Accessible.role: Accessible.ProgressBar
@@ -350,21 +338,14 @@ MyDialog {
                                     Layout.minimumWidth: 150
                                     Layout.maximumWidth: textMetrics.width + 25
                                     Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-                                    color: theme.textColor
-                                    background: Rectangle {
-                                        color: theme.backgroundLighter
-                                        radius: 10
-                                    }
                                     wrapMode: Text.WrapAnywhere
                                     function showError() {
                                         openaiKey.placeholderTextColor = theme.textErrorColor
                                     }
                                     onTextChanged: {
-                                        openaiKey.placeholderTextColor = theme.backgroundLightest
+                                        openaiKey.placeholderTextColor = theme.mutedTextColor
                                     }
                                     placeholderText: qsTr("enter $OPENAI_API_KEY")
-                                    font.pixelSize: theme.fontSizeLarge
-                                    placeholderTextColor: theme.backgroundLightest
                                     Accessible.role: Accessible.EditableText
                                     Accessible.name: placeholderText
                                     Accessible.description: qsTr("Whether the file hash is being calculated")
@@ -402,18 +383,12 @@ MyDialog {
                     Rectangle {
                         width: modelListView.width
                         height: expandButton.height + 80
-                        color: ModelList.downloadableModels.count % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter
-                        MyButton {
+                        color: ModelList.downloadableModels.count % 2 === 0 ? theme.darkContrast : theme.lightContrast
+                        MySettingsButton {
                             id: expandButton
                             anchors.centerIn: parent
                             padding: 40
                             text: ModelList.downloadableModels.expanded ? qsTr("Show fewer models") : qsTr("Show more models")
-                            background: Rectangle {
-                                border.color: expandButton.down ? theme.backgroundLightest : theme.buttonBorder
-                                border.width: 2
-                                radius: 10
-                                color: expandButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
-                            }
                             onClicked: {
                                 ModelList.downloadableModels.expanded = !ModelList.downloadableModels.expanded;
                             }
@@ -435,9 +410,9 @@ MyDialog {
                     MySettings.modelPath = selectedFolder
                 }
             }
-            Label {
+            MySettingsLabel {
                 id: modelPathLabel
-                text: qsTr("Download path:")
+                text: qsTr("Download path")
                 font.pixelSize: theme.fontSizeLarge
                 color: theme.textColor
                 Layout.row: 1
@@ -461,7 +436,7 @@ MyDialog {
                     }
                 }
             }
-            MyButton {
+            MySettingsButton {
                 text: qsTr("Browse")
                 Accessible.description: qsTr("Choose where to save model files")
                 onClicked: modelPathDialog.open()

gpt4all-chat/qml/ModelSettings.qml

@@ -21,13 +21,11 @@ MySettingsTab {
         property var currentModelId: comboBox.currentValue
         property var currentModelInfo: ModelList.modelInfo(root.currentModelId)
 
-        Label {
+        MySettingsLabel {
             id: label
             Layout.row: 0
             Layout.column: 0
-            text: qsTr("Model/Character:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("Model/Character")
         }
 
         RowLayout {
@@ -64,13 +62,13 @@ MySettingsTab {
                         verticalAlignment: Text.AlignVCenter
                     }
                     background: Rectangle {
-                        color: highlighted ? theme.backgroundLight : theme.backgroundDark
+                        color: highlighted ? theme.lightContrast : theme.darkContrast
                     }
                     highlighted: comboBox.highlightedIndex === index
                 }
             }
 
-            MyButton {
+            MySettingsButton {
                 id: cloneButton
                 text: qsTr("Clone")
                 onClicked: {
@@ -79,7 +77,7 @@ MySettingsTab {
                 }
             }
 
-            MyButton {
+            MySettingsDestructiveButton {
                 id: removeButton
                 enabled: root.currentModelInfo.isClone
                 text: qsTr("Remove")
@@ -95,18 +93,15 @@ MySettingsTab {
             Layout.column: 0
             Layout.topMargin: 15
             spacing: 10
-            Label {
+            MySettingsLabel {
                 id: uniqueNameLabel
-                text: qsTr("Unique Name:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Unique Name")
             }
-            Label {
+            MySettingsLabel {
                 id: uniqueNameLabelHelp
                 visible: false
                 text: qsTr("Must contain a non-empty unique name that does not match any existing model/character.")
                 color: theme.textErrorColor
-                font.pixelSize: theme.fontSizeLarge
                 wrapMode: TextArea.Wrap
             }
         }
@@ -116,7 +111,6 @@ MySettingsTab {
             text: root.currentModelName
             font.pixelSize: theme.fontSizeLarge
             enabled: root.currentModelInfo.isClone || root.currentModelInfo.description === ""
-            color: enabled ? theme.textColor : theme.mutedTextColor
             Layout.row: 3
             Layout.column: 0
             Layout.columnSpan: 2
@@ -142,10 +136,8 @@ MySettingsTab {
             }
         }
 
-        Label {
-            text: qsTr("Model File:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+        MySettingsLabel {
+            text: qsTr("Model File")
             Layout.row: 4
             Layout.column: 0
             Layout.topMargin: 15
@@ -155,18 +147,15 @@ MySettingsTab {
             text: root.currentModelInfo.filename
             font.pixelSize: theme.fontSizeLarge
             enabled: false
-            color: enabled ? theme.textColor : theme.mutedTextColor
             Layout.row: 5
             Layout.column: 0
             Layout.columnSpan: 2
             Layout.fillWidth: true
         }
 
-        Label {
+        MySettingsLabel {
             visible: !root.currentModelInfo.isChatGPT
-            text: qsTr("System Prompt:")
-            color: theme.textColor
-            font.pixelSize: theme.fontSizeLarge
+            text: qsTr("System Prompt")
             Layout.row: 6
             Layout.column: 0
             Layout.topMargin: 15
@@ -181,18 +170,10 @@ MySettingsTab {
             Layout.fillWidth: true
             color: "transparent"
             Layout.minimumHeight: Math.max(100, systemPromptArea.contentHeight + 20)
-            TextArea {
+            MyTextArea {
                 id: systemPromptArea
                 anchors.fill: parent
                 text: root.currentModelInfo.systemPrompt
-                color: theme.textColor
-                background: Rectangle {
-                    implicitWidth: 150
-                    color: theme.backgroundDark
-                    radius: 10
-                }
-                padding: 10
-                wrapMode: TextArea.Wrap
                 Connections {
                     target: MySettings
                     function onSystemPromptChanged() {
@@ -208,10 +189,10 @@ MySettingsTab {
                 onTextChanged: {
                     MySettings.setModelSystemPrompt(root.currentModelInfo, text)
                 }
-                bottomPadding: 10
                 Accessible.role: Accessible.EditableText
                 ToolTip.text: qsTr("The systemPrompt allows instructions to the model at the beginning of a chat.\nNOTE: A longer, detailed system prompt can lead to higher quality answers, but can also slow down generation.")
                 ToolTip.visible: hovered
+                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
             }
         }
 
@@ -221,17 +202,14 @@ MySettingsTab {
             Layout.columnSpan: 2
             Layout.topMargin: 15
             spacing: 10
-            Label {
+            MySettingsLabel {
                 id: promptTemplateLabel
-                text: qsTr("Prompt Template:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Prompt Template")
             }
-            Label {
+            MySettingsLabel {
                 id: promptTemplateLabelHelp
                 text: qsTr("Must contain the string \"%1\" to be replaced with the user's input.")
                 color: theme.textErrorColor
-                font.pixelSize: theme.fontSizeLarge
                 visible: templateTextArea.text.indexOf("%1") === -1
                 wrapMode: TextArea.Wrap
             }
@@ -246,19 +224,10 @@ MySettingsTab {
             Layout.minimumHeight: Math.max(100, templateTextArea.contentHeight + 20)
             color: "transparent"
             clip: true
-            TextArea {
+            MyTextArea {
                 id: templateTextArea
                 anchors.fill: parent
                 text: root.currentModelInfo.promptTemplate
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
-                background: Rectangle {
-                    implicitWidth: 150
-                    color: theme.backgroundDark
-                    radius: 10
-                }
-                padding: 10
-                wrapMode: TextArea.Wrap
                 Connections {
                     target: MySettings
                     function onPromptTemplateChanged() {
@@ -276,12 +245,12 @@ MySettingsTab {
                         MySettings.setModelPromptTemplate(root.currentModelInfo, text)
                     }
                 }
-                bottomPadding: 10
                 Accessible.role: Accessible.EditableText
                 Accessible.name: promptTemplateLabel.text
                 Accessible.description: promptTemplateLabelHelp.text
                 ToolTip.text: qsTr("The prompt template partially determines how models will respond to prompts.\nNOTE: A longer, detailed template can lead to higher quality answers, but can also slow down generation.")
                 ToolTip.visible: hovered
+                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
             }
         }
 
@@ -298,8 +267,6 @@ MySettingsTab {
             Layout.bottomMargin: 35
             Layout.leftMargin: 35
             width: 3000
-            border.width: 1
-            border.color: theme.tabBorder
             radius: 10
             color: "transparent"
             Item {
@@ -324,9 +291,8 @@ MySettingsTab {
             }
         }
 
-        Label {
+        MySettingsLabel {
             text: qsTr("Generation Settings")
-            color: theme.textColor
             Layout.row: 10
             Layout.column: 0
             Layout.columnSpan: 2
@@ -334,7 +300,7 @@ MySettingsTab {
             Layout.alignment: Qt.AlignHCenter
             Layout.minimumWidth: promptTemplate.width
             horizontalAlignment: Qt.AlignHCenter
-            font.pixelSize: theme.fontSizeLarger
+            font.pixelSize: theme.fontSizeLarge
             font.bold: true
         }
 
@@ -349,12 +315,10 @@ MySettingsTab {
             rowSpacing: 10
             columnSpacing: 10
 
-            Label {
+            MySettingsLabel {
                 id: contextLengthLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Context Length:")
-                font.pixelSize: theme.fontSizeLarge
-                color: theme.textColor
+                text: qsTr("Context Length")
                 Layout.row: 0
                 Layout.column: 0
             }
@@ -362,8 +326,8 @@ MySettingsTab {
                 id: contextLengthField
                 visible: !root.currentModelInfo.isChatGPT
                 text: root.currentModelInfo.contextLength
-                color: theme.textColor
                 font.pixelSize: theme.fontSizeLarge
+                color: theme.textColor
                 ToolTip.text: qsTr("Maximum combined prompt/response tokens before information is lost.\nUsing more context than the model was trained on will yield poor results.\nNOTE: Does not take effect until you RESTART GPT4All or SWITCH MODELS.")
                 ToolTip.visible: hovered
                 Layout.row: 0
@@ -397,11 +361,9 @@ MySettingsTab {
                 Accessible.description: ToolTip.text
             }
 
-            Label {
+            MySettingsLabel {
                 id: tempLabel
-                text: qsTr("Temperature:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Temperature")
                 Layout.row: 1
                 Layout.column: 2
             }
@@ -409,8 +371,8 @@ MySettingsTab {
             MyTextField {
                 id: temperatureField
                 text: root.currentModelInfo.temperature
-                color: theme.textColor
                 font.pixelSize: theme.fontSizeLarge
+                color: theme.textColor
                 ToolTip.text: qsTr("Temperature increases the chances of choosing less likely tokens.\nNOTE: Higher temperature gives more creative but less predictable outputs.")
                 ToolTip.visible: hovered
                 Layout.row: 1
@@ -443,11 +405,9 @@ MySettingsTab {
                 Accessible.name: tempLabel.text
                 Accessible.description: ToolTip.text
             }
-            Label {
+            MySettingsLabel {
                 id: topPLabel
-                text: qsTr("Top P:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Top P")
                 Layout.row: 2
                 Layout.column: 0
             }
@@ -488,12 +448,10 @@ MySettingsTab {
                 Accessible.name: topPLabel.text
                 Accessible.description: ToolTip.text
             }
-            Label {
+            MySettingsLabel {
                 id: topKLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Top K:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Top K")
                 Layout.row: 2
                 Layout.column: 2
             }
@@ -535,12 +493,10 @@ MySettingsTab {
                 Accessible.name: topKLabel.text
                 Accessible.description: ToolTip.text
             }
-            Label {
+            MySettingsLabel {
                 id: maxLengthLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Max Length:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Max Length")
                 Layout.row: 0
                 Layout.column: 2
             }
@@ -583,12 +539,10 @@ MySettingsTab {
                 Accessible.description: ToolTip.text
             }
 
-            Label {
+            MySettingsLabel {
                 id: batchSizeLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Prompt Batch Size:")
-                font.pixelSize: theme.fontSizeLarge
-                color: theme.textColor
+                text: qsTr("Prompt Batch Size")
                 Layout.row: 1
                 Layout.column: 0
             }
@@ -630,12 +584,10 @@ MySettingsTab {
                 Accessible.name: batchSizeLabel.text
                 Accessible.description: ToolTip.text
             }
-            Label {
+            MySettingsLabel {
                 id: repeatPenaltyLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Repeat Penalty:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Repeat Penalty")
                 Layout.row: 3
                 Layout.column: 0
             }
@@ -677,12 +629,10 @@ MySettingsTab {
                 Accessible.name: repeatPenaltyLabel.text
                 Accessible.description: ToolTip.text
             }
-            Label {
+            MySettingsLabel {
                 id: repeatPenaltyTokensLabel
                 visible: !root.currentModelInfo.isChatGPT
-                text: qsTr("Repeat Penalty Tokens:")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
+                text: qsTr("Repeat Penalty Tokens")
                 Layout.row: 3
                 Layout.column: 2
             }
@@ -733,8 +683,8 @@ MySettingsTab {
             Layout.topMargin: 15
             Layout.fillWidth: true
             Layout.minimumWidth: promptTemplate.width
-            height: 1
-            color: theme.tabBorder
+            height: 3
+            color: theme.accentColor
         }
     }
 }

gpt4all-chat/qml/MyBusyIndicator.qml

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

gpt4all-chat/qml/MyButton.qml

@@ -2,24 +2,35 @@ import QtCore
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
+import mysettings
 
 Button {
     id: myButton
     padding: 10
+    rightPadding: 18
+    leftPadding: 18
+    property color textColor: theme.oppositeTextColor
+    property color mutedTextColor: theme.oppositeMutedTextColor
+    property color backgroundColor: theme.buttonBackground
+    property color backgroundColorHovered: theme.buttonBackgroundHovered
+    property real  borderWidth: MySettings.chatTheme === "LegacyDark" ? 1 : 0
+    property color borderColor: theme.buttonBorder
+    property real fontPixelSize: theme.fontSizeLarge
     contentItem: Text {
         text: myButton.text
         horizontalAlignment: Text.AlignHCenter
-        color: myButton.enabled ? theme.textColor : theme.mutedTextColor
-        font.pixelSize: theme.fontSizeLarge
+        color: myButton.enabled ? textColor : mutedTextColor
+        font.pixelSize: fontPixelSize
         Accessible.role: Accessible.Button
         Accessible.name: text
     }
     background: Rectangle {
-        border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder
-        border.width: 2
         radius: 10
-        color: myButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
+        border.width: myButton.borderWidth
+        border.color: myButton.borderColor
+        color: myButton.hovered ? backgroundColorHovered : backgroundColor
     }
     Accessible.role: Accessible.Button
     Accessible.name: text
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
 }

gpt4all-chat/qml/MyCheckBox.qml

@@ -15,15 +15,17 @@ CheckBox {
         implicitHeight: 26
         x: myCheckBox.leftPadding
         y: parent.height / 2 - height / 2
-        border.color: theme.dialogBorder
+        border.color: theme.checkboxBorder
         color: "transparent"
+        radius: 3
 
         Rectangle {
             width: 14
             height: 14
             x: 6
             y: 6
-            color: theme.textColor
+            radius: 2
+            color: theme.checkboxForeground
             visible: myCheckBox.checked
         }
     }
@@ -36,4 +38,5 @@ CheckBox {
         verticalAlignment: Text.AlignVCenter
         leftPadding: myCheckBox.indicator.width + myCheckBox.spacing
     }
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
 }

gpt4all-chat/qml/MyComboBox.qml

@@ -28,7 +28,7 @@ ComboBox {
             verticalAlignment: Text.AlignVCenter
         }
         background: Rectangle {
-            color: highlighted ? theme.backgroundLight : theme.backgroundDark
+            color: highlighted ? theme.lightContrast : theme.darkContrast
         }
         highlighted: comboBox.highlightedIndex === index
     }
@@ -47,7 +47,7 @@ ComboBox {
         }
 
         background: Rectangle {
-            color: theme.backgroundDark
+            color: theme.black
         }
     }
     indicator: Canvas {
@@ -73,13 +73,16 @@ ComboBox {
             context.moveTo(0, height / 2 + 2);
             context.lineTo(width / 2, height);
             context.lineTo(width, height / 2 + 2);
-            context.strokeStyle = comboBox.pressed ? theme.textAccent : theme.mutedTextColor;
+            context.strokeStyle = comboBox.pressed ? theme.gray400 : theme.gray300;
             context.stroke();
 
         }
     }
     background: Rectangle {
-        color: theme.backgroundDark
+        color: theme.controlBackground
+        border.width: 1
+        border.color: theme.controlBorder
         radius: 10
     }
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
 }

gpt4all-chat/qml/MyDialog.qml

@@ -11,7 +11,7 @@ Dialog {
     background: Rectangle {
         width: parent.width
         height: parent.height
-        color: theme.backgroundDarkest
+        color: theme.containerBackground
         border.width: 1
         border.color: theme.dialogBorder
         radius: 10
@@ -23,7 +23,7 @@ Dialog {
         anchors.centerIn: myCloseButton
         width: myCloseButton.width + 10
         height: myCloseButton.height + 10
-        color: theme.backgroundDarkest
+        color: theme.containerBackground
     }
 
     MyToolButton {

gpt4all-chat/qml/MyDirectoryField.qml

@@ -11,7 +11,8 @@ TextField {
     color: text === "" || isValid ? theme.textColor : theme.textErrorColor
     background: Rectangle {
         implicitWidth: 150
-        color: theme.backgroundDark
+        color: theme.controlBackground
         radius: 10
     }
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
 }

gpt4all-chat/qml/MySettingsButton.qml

@@ -0,0 +1,38 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import mysettings
+
+Button {
+    id: myButton
+    padding: 10
+    rightPadding: 18
+    leftPadding: 18
+    property color textColor: MySettings.chatTheme === "Dark" ? theme.green800 : theme.green600
+    property color mutedTextColor: textColor
+    property color backgroundColor: MySettings.chatTheme === "Dark" ? theme.green400 : theme.green200
+    property color backgroundColorHovered: theme.green300
+    property real  borderWidth: 0
+    property color borderColor: "transparent"
+    property real fontPixelSize: theme.fontSizeLarge
+
+    contentItem: Text {
+        text: myButton.text
+        horizontalAlignment: Text.AlignHCenter
+        color: myButton.enabled ? textColor : mutedTextColor
+        font.pixelSize: fontPixelSize
+        font.bold: true
+        Accessible.role: Accessible.Button
+        Accessible.name: text
+    }
+    background: Rectangle {
+        radius: 10
+        border.width: borderWidth
+        border.color: borderColor
+        color: myButton.hovered ? backgroundColorHovered : backgroundColor
+    }
+    Accessible.role: Accessible.Button
+    Accessible.name: text
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+}

gpt4all-chat/qml/MySettingsDestructiveButton.qml

@@ -0,0 +1,38 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import mysettings
+
+Button {
+    id: myButton
+    padding: 10
+    rightPadding: 18
+    leftPadding: 18
+    font.pixelSize: theme.fontSizeLarge
+    property color textColor: MySettings.chatTheme === "Dark" ? theme.red800 : theme.red600
+    property color mutedTextColor: MySettings.chatTheme === "Dark" ? theme.red400 : theme.red300
+    property color backgroundColor: enabled ? (MySettings.chatTheme === "Dark" ? theme.red400 : theme.red200) :
+        (MySettings.chatTheme === "Dark" ? theme.red200 : theme.red100)
+    property color backgroundColorHovered: enabled ? (MySettings.chatTheme === "Dark" ? theme.red500 : theme.red300) : backgroundColor
+    property real  borderWidth: 0
+    property color borderColor: "transparent"
+    contentItem: Text {
+        text: myButton.text
+        horizontalAlignment: Text.AlignHCenter
+        color: myButton.enabled ? textColor : mutedTextColor
+        font.pixelSize: theme.fontSizeLarge
+        font.bold: true
+        Accessible.role: Accessible.Button
+        Accessible.name: text
+    }
+    background: Rectangle {
+        radius: 10
+        border.width: borderWidth
+        border.color: borderColor
+        color: myButton.hovered ? backgroundColorHovered : backgroundColor
+    }
+    Accessible.role: Accessible.Button
+    Accessible.name: text
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+}

gpt4all-chat/qml/MySettingsLabel.qml

@@ -0,0 +1,10 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Label {
+    color: theme.settingsTitleTextColor
+    font.pixelSize: theme.fontSizeSmall
+    font.bold: true
+}

gpt4all-chat/qml/MySettingsStack.qml

@@ -14,28 +14,38 @@ Item {
         id: theme
     }
 
-    property alias title: titleLabel.text
+    property alias title: titleLabelText.text
     property ListModel tabTitlesModel: ListModel { }
     property list<Component> tabs: [ ]
 
-    Label {
+    Rectangle {
         id: titleLabel
         anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: theme.textColor
-        padding: 10
-        font.bold: true
-        font.pixelSize: theme.fontSizeLarger
+        anchors.leftMargin: 20
+        anchors.rightMargin: 15
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: titleLabelText.height
+        color: "transparent"
+        Label {
+            id: titleLabelText
+            anchors.left: parent.left
+            color: theme.titleTextColor
+            topPadding: 10
+            bottomPadding: 10
+            font.pixelSize: theme.fontSizeLargest
+            font.bold: true
+        }
     }
 
     Rectangle {
         anchors.top: titleLabel.bottom
-        anchors.leftMargin: 15
+        anchors.leftMargin: 20
         anchors.rightMargin: 15
         anchors.left: parent.left
         anchors.right: parent.right
-        height: 1
-        color: theme.tabBorder
+        height: 3
+        color: theme.accentColor
     }
 
     TabBar {
@@ -62,9 +72,6 @@ Item {
                 }
                 background: Rectangle {
                     color: "transparent"
-                    border.width: 1
-                    border.color: tabButton.checked ? theme.tabBorder : "transparent"
-                    radius: 10
                 }
                 Accessible.role: Accessible.Button
                 Accessible.name: model.title
@@ -82,16 +89,8 @@ Item {
         anchors.rightMargin: 15
         anchors.left: parent.left
         anchors.right: parent.right
-        height: 1
-        color: theme.tabBorder
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        radius: 10
-        border.width: 1
-        border.color: theme.tabBorder
+        height: 3
+        color: theme.accentColor
     }
 
     FolderDialog {

gpt4all-chat/qml/MySettingsTab.qml

@@ -32,13 +32,19 @@ Item {
     }
 
     ScrollView {
+        id: scrollView
         width: parent.width
         height: parent.height
-        padding: 15
-        rightPadding: 20
+        topPadding: 15
+        leftPadding: 5
         contentWidth: availableWidth
         contentHeight: innerColumn.height
-        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+        ScrollBar.vertical: ScrollBar {
+            parent: scrollView.parent
+            anchors.top: scrollView.top
+            anchors.left: scrollView.right
+            anchors.bottom: scrollView.bottom
+        }
 
         Theme {
             id: theme
@@ -64,7 +70,7 @@ Item {
             Item {
                 Layout.fillWidth: true
                 height: restoreDefaultsButton.height
-                MyButton {
+                MySettingsButton {
                     id: restoreDefaultsButton
                     anchors.left: parent.left
                     visible: showRestoreDefaultsButton
@@ -78,7 +84,7 @@ Item {
                         root.restoreDefaultsClicked();
                     }
                 }
-                MyButton {
+                MySettingsButton {
                     id: advancedSettingsButton
                     anchors.right: parent.right
                     visible: root.advancedSettings && showAdvancedSettingsButton

gpt4all-chat/qml/MySlug.qml

@@ -0,0 +1,24 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Label {
+    id: mySlug
+    padding: 3
+    rightPadding: 9
+    leftPadding: 9
+    font.pixelSize: theme.fontSizeFixedSmall
+    background: Rectangle {
+        radius: 6
+        border.width: 1
+        border.color: mySlug.color
+        color: theme.slugBackground
+    }
+    ToolTip.visible: ma.containsMouse && ToolTip.text !== ""
+    MouseArea {
+        id: ma
+        anchors.fill: parent
+        hoverEnabled: true
+    }
+}

gpt4all-chat/qml/MyTextArea.qml

@@ -0,0 +1,22 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+TextArea {
+    id: myTextArea
+    color: enabled ? theme.textColor : theme.mutedTextColor
+    placeholderTextColor: theme.mutedTextColor
+    font.pixelSize: theme.fontSizeLarge
+    background: Rectangle {
+        implicitWidth: 150
+        color: theme.controlBackground
+        border.width: 1
+        border.color: theme.controlBorder
+        radius: 10
+    }
+    padding: 10
+    wrapMode: TextArea.Wrap
+
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+}

gpt4all-chat/qml/MyTextField.qml

@@ -6,10 +6,14 @@ import QtQuick.Controls.Basic
 TextField {
     id: myTextField
     padding: 10
+    placeholderTextColor: theme.mutedTextColor
     background: Rectangle {
         implicitWidth: 150
-        color: theme.backgroundDark
+        color: myTextField.enabled ? theme.controlBackground : theme.disabledControlBackground
+        border.width: 1
+        border.color: theme.controlBorder
         radius: 10
     }
-    color: theme.textColor
-}
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
+    color: enabled ? theme.textColor : theme.mutedTextColor
+}

gpt4all-chat/qml/MyToolButton.qml

@@ -7,6 +7,8 @@ import Qt5Compat.GraphicalEffects
 Button {
     id: myButton
     padding: 10
+    property color backgroundColor: theme.iconBackgroundDark
+    property color backgroundColorHovered: theme.iconBackgroundHovered
     property bool toggled: false
     property alias source: image.source
     property alias fillMode: image.fillMode
@@ -25,7 +27,7 @@ Button {
             anchors.fill: parent
             color: "transparent"
             visible: myButton.toggled
-            border.color: theme.backgroundLightest
+            border.color: theme.accentColor
             border.width: 1
             radius: 10
         }
@@ -39,9 +41,10 @@ Button {
         ColorOverlay {
             anchors.fill: image
             source: image
-            color: myButton.hovered ? theme.textColor : "transparent"
+            color: myButton.hovered ? backgroundColorHovered : backgroundColor
         }
     }
     Accessible.role: Accessible.Button
     Accessible.name: text
+    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
 }

gpt4all-chat/qml/NetworkDialog.qml

@@ -12,7 +12,6 @@ MyDialog {
     id: networkDialog
     anchors.centerIn: parent
     modal: true
-    opacity: 0.9
     padding: 20
 
     Theme {
@@ -50,43 +49,27 @@ MyDialog {
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            TextArea {
+            MyTextArea {
                 id: textOptIn
-                wrapMode: Text.Wrap
                 width: 1024 - 40
-                padding: 20
                 text: qsTr("By enabling this feature, you will be able to participate in the democratic process of training a large language model by contributing data for future model improvements.
 
 When a GPT4All model responds to you and you have opted-in, your conversation will be sent to the GPT4All Open Source Datalake. Additionally, you can like/dislike its response. If you dislike a response, you can suggest an alternative response. This data will be collected and aggregated in the GPT4All Datalake.
 
 NOTE: By turning on this feature, you will be sending your data to the GPT4All Open Source Datalake. You should have no expectation of chat privacy when this feature is enabled. You should; however, have an expectation of an optional attribution if you wish. Your chat data will be openly available for anyone to download and will be used by Nomic AI to improve future GPT4All models. Nomic AI will retain all attribution information attached to your data and you will be credited as a contributor to any GPT4All model release that uses your data!")
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
                 focus: false
                 readOnly: true
                 Accessible.role: Accessible.Paragraph
                 Accessible.name: qsTr("Terms for opt-in")
                 Accessible.description: qsTr("Describes what will happen when you opt-in")
-                background: Rectangle {
-                    color: theme.backgroundLight
-                    radius: 10
-                }
             }
         }
 
-        TextField {
+        MyTextField {
             id: attribution
-            color: theme.textColor
-            padding: 20
             width: parent.width
             text: MySettings.networkAttribution
-            font.pixelSize: theme.fontSizeLarge
             placeholderText: qsTr("Please provide a name for attribution (optional)")
-            placeholderTextColor: theme.backgroundLightest
-            background: Rectangle {
-                color: theme.backgroundLighter
-                radius: 10
-            }
             Accessible.role: Accessible.EditableText
             Accessible.name: qsTr("Attribution (optional)")
             Accessible.description: qsTr("Provide attribution")
@@ -101,12 +84,12 @@ NOTE: By turning on this feature, you will be sending your data to the GPT4All O
         padding: 20
         alignment: Qt.AlignRight
         spacing: 10
-        MyButton {
+        MySettingsButton {
             text: qsTr("Enable")
             Accessible.description: qsTr("Enable opt-in")
             DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
         }
-        MyButton {
+        MySettingsButton {
             text: qsTr("Cancel")
             Accessible.description: qsTr("Cancel opt-in")
             DialogButtonBox.buttonRole: DialogButtonBox.RejectRole

gpt4all-chat/qml/NewVersionDialog.qml

@@ -31,12 +31,13 @@ MyDialog {
             anchors.left: parent.left
             topPadding: 20
             bottomPadding: 20
-            text: qsTr("New version is available:")
-            color: theme.textColor
+            text: qsTr("New version is available")
+            color: theme.titleTextColor
             font.pixelSize: theme.fontSizeLarge
+            font.bold: true
         }
 
-        MyButton {
+        MySettingsButton {
             id: button
             anchors.left: label.right
             anchors.leftMargin: 10

gpt4all-chat/qml/PopupDialog.qml

@@ -7,7 +7,6 @@ import QtQuick.Layouts
 Dialog {
     id: popupDialog
     anchors.centerIn: parent
-    opacity: 0.9
     padding: 20
     property alias text: textField.text
     property bool shouldTimeOut: true
@@ -53,7 +52,7 @@ Dialog {
 
     background: Rectangle {
         anchors.fill: parent
-        color: theme.backgroundDarkest
+        color: theme.containerBackground
         border.width: 1
         border.color: theme.dialogBorder
         radius: 10

gpt4all-chat/qml/SettingsDialog.qml

@@ -41,46 +41,52 @@ MyDialog {
         }
     }
 
-    ScrollView {
+    Rectangle {
         id: stackList
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        width: 200
-        ScrollBar.vertical.policy: ScrollBar.AsNeeded
-        clip: true
+        width: 220
+        color: theme.controlBackground
+        radius: 10
 
-        ListView {
-            id: listView
-            anchors.fill: parent
-            anchors.rightMargin: 10
-            model: stacksModel
+        ScrollView {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 10
+            ScrollBar.vertical.policy: ScrollBar.AsNeeded
+            clip: true
 
-            delegate: Rectangle {
-                id: item
-                width: listView.width
-                height: titleLabel.height + 25
-                color: "transparent"
-                border.color: theme.backgroundLighter
-                border.width: index == listView.currentIndex ? 1 : 0
-                radius: 10
+            ListView {
+                id: listView
+                anchors.fill: parent
+                model: stacksModel
 
-                Text {
-                    id: titleLabel
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.margins: 20
-                    font.bold: index == listView.currentIndex
-                    text: title
-                    font.pixelSize: theme.fontSizeLarge
-                    elide: Text.ElideRight
-                    color: theme.textColor
-                    width: 200
-                }
+                delegate: Rectangle {
+                    id: item
+                    width: listView.width
+                    height: titleLabel.height + 10
+                    color: "transparent"
 
-                TapHandler {
-                    onTapped: {
-                        listView.currentIndex = index
+                    MyButton {
+                        id: titleLabel
+                        backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground
+                        backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground
+                        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
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.margins: 10
+                        font.bold: index === listView.currentIndex
+                        text: title
+                        font.pixelSize: theme.fontSizeLarge
+                        onClicked: {
+                            listView.currentIndex = index
+                        }
                     }
                 }
             }

gpt4all-chat/qml/StartupDialog.qml

@@ -52,27 +52,19 @@ MyDialog {
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            TextArea {
+            MyTextArea {
                 id: welcome
-                wrapMode: Text.Wrap
                 width: 1024 - 40
-                padding: 20
                 textFormat: TextEdit.MarkdownText
                 text: qsTr("### Release notes\n")
                     + Download.releaseInfo.notes
                     + qsTr("### Contributors\n")
                     + Download.releaseInfo.contributors
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
                 focus: false
                 readOnly: true
                 Accessible.role: Accessible.Paragraph
                 Accessible.name: qsTr("Release notes")
                 Accessible.description: qsTr("Release notes for this version")
-                background: Rectangle {
-                    color: theme.backgroundLight
-                    radius: 10
-                }
             }
         }
 
@@ -83,11 +75,9 @@ MyDialog {
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            TextArea {
+            MyTextArea {
                 id: optInTerms
-                wrapMode: Text.Wrap
                 width: 1024 - 40
-                padding: 20
                 textFormat: TextEdit.MarkdownText
                 text: qsTr(
 "### Opt-ins for anonymous usage analytics and datalake
@@ -105,17 +95,11 @@ to download and will be used by Nomic AI to improve future GPT4All models. Nomic
 attribution information attached to your data and you will be credited as a contributor to any GPT4All
 model release that uses your data!")
 
-                color: theme.textColor
-                font.pixelSize: theme.fontSizeLarge
                 focus: false
                 readOnly: true
                 Accessible.role: Accessible.Paragraph
                 Accessible.name: qsTr("Terms for opt-in")
                 Accessible.description: qsTr("Describes what will happen when you opt-in")
-                background: Rectangle {
-                    color: theme.backgroundLight
-                    radius: 10
-                }
             }
         }
 

gpt4all-chat/qml/Theme.qml

@@ -4,24 +4,554 @@ import QtQuick.Controls.Basic
 import mysettings
 
 QtObject {
-    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 textErrorColor: "red"
-    property real  fontSizeLarge: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 5 : Qt.application.font.pixelSize + 10
-    property real  fontSizeLarger: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize + 2 : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 7 : Qt.application.font.pixelSize + 12
-}
 
+    // black and white
+    property color black: Qt.hsla(231/360, 0.15, 0.19)
+    property color white: Qt.hsla(0, 0, 1)
+
+    // dark mode black and white
+    property color darkwhite: Qt.hsla(0, 0, 0.85)
+
+    // 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)
+    property color gray200: Qt.hsla(25/360, 0.05, 0.89)
+    property color gray300: Qt.hsla(25/360, 0.05, 0.82)
+    property color gray400: Qt.hsla(25/360, 0.05, 0.71)
+    property color gray500: Qt.hsla(25/360, 0.05, 0.60)
+    property color gray600: Qt.hsla(25/360, 0.05, 0.51)
+    property color gray700: Qt.hsla(25/360, 0.05, 0.42)
+    property color gray800: Qt.hsla(25/360, 0.05, 0.35)
+    property color gray900: Qt.hsla(25/360, 0.05, 0.31)
+    property color gray950: Qt.hsla(25/360, 0.05, 0.15)
+
+    // darkmode
+    property color darkgray0: Qt.hsla(25/360, 0.05, 0.23)
+    property color darkgray50: Qt.hsla(25/360, 0.05, 0.21)
+    property color darkgray100: Qt.hsla(25/360, 0.05, 0.19)
+    property color darkgray200: Qt.hsla(25/360, 0.05, 0.17)
+    property color darkgray300: Qt.hsla(25/360, 0.05, 0.15)
+    property color darkgray400: Qt.hsla(25/360, 0.05, 0.13)
+    property color darkgray500: Qt.hsla(25/360, 0.05, 0.11)
+    property color darkgray600: Qt.hsla(25/360, 0.05, 0.09)
+    property color darkgray700: Qt.hsla(25/360, 0.05, 0.07)
+    property color darkgray800: Qt.hsla(25/360, 0.05, 0.05)
+    property color darkgray900: Qt.hsla(25/360, 0.05, 0.03)
+    property color darkgray950: Qt.hsla(25/360, 0.05, 0.01)
+
+    // green
+    property color green50: Qt.hsla(120/360, 0.18, 0.97)
+    property color green100: Qt.hsla(120/360, 0.21, 0.93)
+    property color green200: Qt.hsla(124/360, 0.21, 0.85)
+    property color green300: Qt.hsla(122/360, 0.20, 0.73)
+    property color green400: Qt.hsla(122/360, 0.19, 0.58)
+    property color green500: Qt.hsla(121/360, 0.19, 0.45)
+    property color green600: Qt.hsla(122/360, 0.20, 0.33)
+    property color green700: Qt.hsla(122/360, 0.19, 0.29)
+    property color green800: Qt.hsla(123/360, 0.17, 0.24)
+    property color green900: Qt.hsla(124/360, 0.17, 0.20)
+    property color green950: Qt.hsla(125/360, 0.22, 0.10)
+
+    // yellow
+    property color yellow50: Qt.hsla(47/360, 0.90, 0.96)
+    property color yellow100: Qt.hsla(46/360, 0.89, 0.89)
+    property color yellow200: Qt.hsla(45/360, 0.90, 0.77)
+    property color yellow300: Qt.hsla(44/360, 0.90, 0.66)
+    property color yellow400: Qt.hsla(41/360, 0.89, 0.56)
+    property color yellow500: Qt.hsla(36/360, 0.85, 0.50)
+    property color yellow600: Qt.hsla(30/360, 0.87, 0.44)
+    property color yellow700: Qt.hsla(24/360, 0.84, 0.37)
+    property color yellow800: Qt.hsla(21/360, 0.76, 0.31)
+    property color yellow900: Qt.hsla(20/360, 0.72, 0.26)
+    property color yellow950: Qt.hsla(19/360, 0.86, 0.14)
+
+    // red
+    property color red50: Qt.hsla(0, 0.71, 0.97)
+    property color red100: Qt.hsla(0, 0.87, 0.94)
+    property color red200: Qt.hsla(0, 0.89, 0.89)
+    property color red300: Qt.hsla(0, 0.85, 0.77)
+    property color red400: Qt.hsla(0, 0.83, 0.71)
+    property color red500: Qt.hsla(0, 0.76, 0.60)
+    property color red600: Qt.hsla(0, 0.65, 0.51)
+    property color red700: Qt.hsla(0, 0.67, 0.42)
+    property color red800: Qt.hsla(0, 0.63, 0.35)
+    property color red900: Qt.hsla(0, 0.56, 0.31)
+    property color red950: Qt.hsla(0, 0.67, 0.15)
+
+    // 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 blue0: "#d0d5db"
+    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 accentColor: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue200;
+            case "Dark":
+                return yellow300;
+            default:
+                return yellow300;
+        }
+    }
+
+    property color darkContrast: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue500;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray100;
+        }
+    }
+
+    property color lightContrast: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue400;
+            case "Dark":
+                return darkgray0;
+            default:
+                return gray0;
+        }
+    }
+
+    property color controlBorder: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue800;
+            case "Dark":
+                return darkgray0;
+            default:
+                return gray300;
+        }
+    }
+
+    property color controlBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray100;
+            default:
+                return gray100;
+        }
+    }
+
+    property color disabledControlBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray200;
+            default:
+                return gray200;
+        }
+    }
+
+    property color conversationBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue500;
+            default:
+                return containerBackground;
+        }
+    }
+
+    property color containerForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue950;
+            case "Dark":
+                return darkgray300;
+            default:
+                return gray300;
+        }
+    }
+
+    property color containerBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return darkgray200;
+            default:
+                return gray200;
+        }
+    }
+
+    property color progressForeground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return accentColor;
+            case "Dark":
+                return accentColor;
+            default:
+                return accentColor;
+        }
+    }
+
+    property color progressBackground: {
+        switch (MySettings.chatTheme) {
+            case "LegacyDark":
+                return blue900;
+            case "Dark":
+                return green600;
+            default:
+                return green600;
+        }
+    }
+
+    property color checkboxBorder: {
+        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 blue800;
+            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
+    property real fontSize: Qt.application.font.pixelSize
+
+    property real fontSizeSmall: fontSizeLarge - 2
+    property real  fontSizeLarge: MySettings.fontSize === "Small" ?
+        fontSize : MySettings.fontSize === "Medium" ?
+            fontSize + 5 : fontSize + 10
+    property real  fontSizeLarger: MySettings.fontSize === "Small" ?
+        fontSize + 2 : MySettings.fontSize === "Medium" ?
+            fontSize + 7 : fontSize + 12
+    property real  fontSizeLargest: MySettings.fontSize === "Small" ?
+        fontSize + 7 : MySettings.fontSize === "Medium" ?
+            fontSize + 12 : fontSize + 14
+}

gpt4all-chat/qml/ThumbsDownDialog.qml

@@ -10,7 +10,6 @@ import llm
 MyDialog {
     id: thumbsDownDialog
     modal: true
-    opacity: 0.9
     padding: 20
 
     Theme {
@@ -50,18 +49,9 @@ MyDialog {
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            TextArea {
+            MyTextArea {
                 id: thumbsDownNewResponse
-                color: theme.textColor
-                padding: 20
-                wrapMode: Text.Wrap
-                font.pixelSize: theme.fontSizeLarge
                 placeholderText: qsTr("Please provide a better response...")
-                placeholderTextColor: theme.backgroundLightest
-                background: Rectangle {
-                    color: theme.backgroundLighter
-                    radius: 10
-                }
             }
         }
     }
@@ -70,15 +60,13 @@ MyDialog {
         padding: 20
         alignment: Qt.AlignRight
         spacing: 10
-        MyButton {
+        MySettingsButton {
             text: qsTr("Submit")
-            font.pixelSize: theme.fontSizeLarge
             Accessible.description: qsTr("Submits the user's response")
             DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
         }
-        MyButton {
+        MySettingsButton {
             text: qsTr("Cancel")
-            font.pixelSize: theme.fontSizeLarge
             Accessible.description: qsTr("Closes the response dialog")
             DialogButtonBox.buttonRole: DialogButtonBox.RejectRole
         }