feat: can change theme color by config

object/init.go

@@ -52,6 +52,7 @@ func initBuiltInStore() {
  LimitMinutes: 10,
  Welcome: "Hello",
  Prompt: defaultPrompt,
+ ThemeColor: "#5734d3",
  PropertiesMap: map[string]*Properties{},
  }
  _, err = AddStore(store)

object/store.go

@@ -67,6 +67,7 @@ type Store struct {
  LimitMinutes int `json:"limitMinutes"`
  Welcome string `xorm:"varchar(100)" json:"welcome"`
  Prompt string `xorm:"mediumtext" json:"prompt"`
+ ThemeColor string `xorm:"varchar(100)" json:"themeColor"`
 
  FileTree *File `xorm:"mediumtext" json:"fileTree"`
  PropertiesMap map[string]*Properties `xorm:"mediumtext" json:"propertiesMap"`

web/src/App.js

@@ -54,6 +54,7 @@ import ChatPage from "./ChatPage";
 import CustomGithubCorner from "./CustomGithubCorner";
 import ShortcutsPage from "./basic/ShortcutsPage";
 import UsagePage from "./UsagePage";
+import * as StoreBackend from "./backend/StoreBackend";
 
 const {Header, Footer, Content} = Layout;
 
@@ -76,6 +77,19 @@ class App extends Component {
  UNSAFE_componentWillMount() {
  this.updateMenuKey();
  this.getAccount();
+ this.setTheme();
+ }
+
+ setTheme() {
+ StoreBackend.getStore("admin", "store-built-in").then((res) => {
+ if (res.status === "ok") {
+ const store = res.data;
+ Setting.setThemeColor(store.themeColor);
+ } else {
+ Setting.setThemeColor(Conf.ThemeDefault.colorPrimary);
+ Setting.showMessage("error", `Failed to get theme: ${res.msg}`);
+ }
+ });
  }
 
  componentDidUpdate() {

web/src/App.less

@@ -102,27 +102,32 @@ img {
 }
 
 .cs-conversation-header__content .cs-conversation-header__user-name {
- background-color: rgb(246 240 255) !important;
+ background-color: var(--theme-background) !important;
 }
 
 .cs-message--incoming .cs-message__content {
- background-color: rgb(246 240 255) !important;
+ background-color: var(--theme-background) !important;
 }
 
 .cs-message-input__content-editor-wrapper {
- background-color: rgb(242 242 242) !important;
+ background-color: var(--theme-background-secondary) !important;
 }
 
 .cs-message-input__content-editor {
- background-color: rgb(242 242 242) !important;
+ background-color: var(--theme-background-secondary) !important;
 }
 
-.cs-button--send {
- color: #614d99;
+.cs-button--send,
+.cs-button--attachment {
+ color: var(--theme-button) !important;
 }
 
 .cs-message--outgoing .cs-message__content {
- background-color: rgb(242 242 242) !important;
+ background-color: var(--theme-background-secondary) !important;
+}
+
+.ps__thumb-y {
+ background-color: var(--theme-background) !important;
 }
 
 .menu-item-container {

web/src/ChatBox.js

@@ -19,6 +19,7 @@ import * as Conf from "./Conf";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import moment from "moment";
+import {ThemeDefault} from "./Conf";
 
 class ChatBox extends React.Component {
  constructor(props) {
@@ -127,11 +128,11 @@ class ChatBox extends React.Component {
  }
  return (
  <React.Fragment>
- <MainContainer style={{display: "flex", width: "100%", height: "100%", border: "1px solid rgb(242,242,242)", borderRadius: "6px"}} >
+ <MainContainer style={{display: "flex", width: "100%", height: "100%", border: "1px solid " + ThemeDefault.colorBackground, borderRadius: "6px"}} >
  <ChatContainer style={{display: "flex", width: "100%", height: "100%"}}>
  {
  (title === "") ? null : (
- <ConversationHeader style={{backgroundColor: "rgb(246,240,255)", height: "42px"}}>
+ <ConversationHeader style={{backgroundColor: ThemeDefault.colorBackground, height: "42px"}}>
  <ConversationHeader.Content userName={title} />
  </ConversationHeader>
  )

web/src/ChatMenu.js

@@ -16,6 +16,7 @@ import React from "react";
 import {Button, Input, Menu, Popconfirm} from "antd";
 import {DeleteOutlined, EditOutlined, LayoutOutlined, PlusOutlined, SaveOutlined} from "@ant-design/icons";
 import i18next from "i18next";
+import {ThemeDefault} from "./Conf";
 
 class ChatMenu extends React.Component {
  constructor(props) {
@@ -51,19 +52,23 @@ class ChatMenu extends React.Component {
  const globalChatIndex = chats.indexOf(chat);
  const isSelected = selectedKeys.includes(`${index}-${chatIndex}`);
  const handleIconMouseEnter = (e) => {
- e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+ e.currentTarget.style.color = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.6;
  };
 
  const handleIconMouseLeave = (e) => {
  e.currentTarget.style.color = "inherit";
+ e.currentTarget.style.opacity = 1;
  };
 
  const handleIconMouseDown = (e) => {
- e.currentTarget.style.color = "rgba(89,54,213,0.4)";
+ e.currentTarget.style.color = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.4;
  };
 
  const handleIconMouseUp = (e) => {
- e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+ e.currentTarget.style.color = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.6;
  };
 
  const onSave = (e) => {
@@ -189,16 +194,19 @@ class ChatMenu extends React.Component {
  }}
  disabled={hasEmptyChat}
  onMouseEnter={(e) => {
- e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+ e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.6;
  }}
  onMouseLeave={(e) => {
  e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
  }}
  onMouseDown={(e) => {
- e.currentTarget.style.borderColor = "rgba(89,54,213,0.4)";
+ e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.4;
  }}
  onMouseUp={(e) => {
- e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+ e.currentTarget.style.borderColor = ThemeDefault.colorPrimary;
+ e.currentTarget.style.opacity = 0.6;
  }}
  onClick={this.props.onAddChat}
  >

web/src/Setting.js

@@ -21,6 +21,7 @@ import FileSaver from "file-saver";
 import XLSX from "xlsx";
 import moment from "moment/moment";
 import * as StoreBackend from "./backend/StoreBackend";
+import {ThemeDefault} from "./Conf";
 
 export let ServerUrl = "";
 export let CasdoorSdk;
@@ -244,6 +245,15 @@ export function setLanguage(language) {
  i18next.changeLanguage(language);
 }
 
+export function setThemeColor(color) {
+ localStorage.setItem("themeColor", color);
+ updateTheme(color);
+}
+
+export function getThemeColor() {
+ return localStorage.getItem("themeColor") ?? "#5734d3";
+}
+
 export function getAcceptLanguage() {
  if (i18next.language === null || i18next.language === "") {
  return "en;q=0.9,en;q=0.8";
@@ -1042,3 +1052,96 @@ export function getRefinedErrorText(errorText) {
 
  return errorText;
 }
+
+export function lighten(hexColor, amount) {
+ amount = amount === 0 ? 0 : amount || 10;
+ const rgbColor = hexToRgb(hexColor.slice(1));
+
+ const hsl = rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
+
+ hsl.l += amount;
+
+ return hslToRgb(hsl.h, hsl.s, hsl.l);
+}
+
+function hexToRgb(hex) {
+ const r = parseInt(hex.slice(0, 2), 16);
+ const g = parseInt(hex.slice(2, 4), 16);
+ const b = parseInt(hex.slice(4, 6), 16);
+ return {
+ r: r,
+ g: g,
+ b: b,
+ };
+}
+
+function rgbToHsl(r, g, b) {
+ r %= 256;
+ g %= 256;
+ b %= 256;
+
+ const max = Math.max(r, g, b);
+ const min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2 / 255;
+
+ if (max === min) {
+ h = s = 0; // achromatic
+ } else {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ if (s < 0) {s = -s;}
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+
+ h = Math.floor(h * 360);
+ s = Math.floor(s * 100);
+ l = Math.floor(l * 100);
+ return {h, s, l};
+}
+
+function hslToRgb(h, s, l) {
+ h /= 360;
+ s /= 100;
+ l /= 100;
+
+ let r, g, b;
+ if (s === 0) {
+ r = g = b = l;
+ } else {
+ const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ const p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ r = Math.round(r * 255);
+ g = Math.round(g * 255);
+ b = Math.round(b * 255);
+ return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+}
+
+function hueToRgb(p, q, t) {
+ if (t < 0) {t += 1;}
+ if (t > 1) {t -= 1;}
+ if (t < 1 / 6) {return p + (q - p) * 6 * t;}
+ if (t < 1 / 2) {return q;}
+ if (t < 2 / 3) {return p + (q - p) * (2 / 3 - t) * 6;}
+ return p;
+}
+
+export function updateTheme(color) {
+ ThemeDefault.colorPrimary = color ? color : getThemeColor();
+ ThemeDefault.colorBackground = lighten(ThemeDefault.colorPrimary, 45).toString();
+ ThemeDefault.colorButton = lighten(ThemeDefault.colorPrimary, 20).toString();
+ ThemeDefault.colorBackgroundSecondary = "rgb(242 242 242)";
+ document.documentElement.style.setProperty("--theme-color", ThemeDefault.colorPrimary);
+ document.documentElement.style.setProperty("--theme-background", ThemeDefault.colorBackground);
+ document.documentElement.style.setProperty("--theme-button", ThemeDefault.colorButton);
+ document.documentElement.style.setProperty("--theme-background-secondary", ThemeDefault.colorBackgroundSecondary);
+}

web/src/StoreEditPage.js

@@ -20,6 +20,7 @@ import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import FileTree from "./FileTree";
+import {ThemeDefault} from "./Conf";
 
 const {TextArea} = Input;
 
@@ -35,6 +36,7 @@ class StoreEditPage extends React.Component {
  modelProviders: [],
  embeddingProviders: [],
  store: null,
+ themeColor: ThemeDefault.colorPrimary,
  };
  }
 
@@ -271,6 +273,20 @@ class StoreEditPage extends React.Component {
  }} />
  </Col>
  </Row>
+ {
+ this.state.store.name !== "store-built-in" ? null : (
+ <Row style={{marginTop: "20px"}} >
+ <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+ {i18next.t("store:Theme color")}:
+ </Col>
+ <Col span={22} >
+ <input type="color" value={this.state.store.themeColor} onChange={(e) => {
+ this.updateStoreField("themeColor", e.target.value);
+ }} />
+ </Col>
+ </Row>
+ )
+ }
  <Row style={{marginTop: "20px"}} >
  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
  {i18next.t("store:File tree")}:
@@ -299,6 +315,7 @@ class StoreEditPage extends React.Component {
  .then((res) => {
  if (res.status === "ok") {
  if (res.data) {
+ Setting.setThemeColor(this.state.store.themeColor);
  Setting.showMessage("success", "Successfully saved");
  this.setState({
  storeName: this.state.store.name,

web/src/StoreListPage.js

@@ -19,6 +19,7 @@ import moment from "moment";
 import * as Setting from "./Setting";
 import * as StoreBackend from "./backend/StoreBackend";
 import i18next from "i18next";
+import {ThemeDefault} from "./Conf";
 
 const defaultPrompt = "You are an expert in your field and you specialize in using your knowledge to answer or solve people's problems.";
 
@@ -66,6 +67,7 @@ class StoreListPage extends React.Component {
  limitMinutes: 10,
  welcome: "Hello",
  prompt: defaultPrompt,
+ themeColor: ThemeDefault.colorPrimary,
  propertiesMap: {},
  };
  }