Archives
/
gpt4all
mirror of https://github.com/nomic-ai/gpt4all
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add a legacy dark mode.

Browse Source 
Signed-off-by: Adam Treat <treat.adam@gmail.com>
pull/1890/head
Adam Treat 4 months ago committed by AT
parent c1fce502f7
commit 34de19ebf6
13 changed files with 491 additions and 78 deletions
Show Stats Download Patch File Download Diff File

36
gpt4all-chat/main.qml
Unescape Escape View File

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

8
gpt4all-chat/qml/ApplicationSettings.qml
Unescape Escape View File

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

4
gpt4all-chat/qml/LocalDocsSettings.qml
Unescape Escape View File

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

7
gpt4all-chat/qml/ModelDownloaderDialog.qml
Unescape Escape View File

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

2
gpt4all-chat/qml/ModelSettings.qml
Unescape Escape View File

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

2
gpt4all-chat/qml/MyBusyIndicator.qml
Unescape Escape View File

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

9
gpt4all-chat/qml/MyButton.qml
Unescape Escape View File

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

6
gpt4all-chat/qml/MyCheckBox.qml
Unescape Escape View File

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

2
gpt4all-chat/qml/MySettingsLabel.qml
Unescape Escape View File

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

4
gpt4all-chat/qml/MySettingsStack.qml
Unescape Escape View File

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

2
gpt4all-chat/qml/MyToolButton.qml
Unescape Escape View File

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

2
gpt4all-chat/qml/SettingsDialog.qml
Unescape Escape View File

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

485
gpt4all-chat/qml/Theme.qml
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save