feat: support Theme button(casibase#1356)

Author: Working On It

web/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/cssinjs": "^1.12.0",
-    "@ant-design/icons": "4.6.2",
+    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/icons": "^5.6.1",
     "@ant-design/x": "^1.0.5",
     "@bpmn-io/cm-theme": "0.1.0-alpha.2",
     "@bpmn-io/properties-panel": "^3.26.4",
@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.3.1",
     "aliplayer-react": "^0.7.0",
     "antd": "5.24.0",
+    "antd-token-previewer": "^2.0.8",
     "bpmn-font": "^0.12.1",
     "bpmn-js": "^18.4.0",
     "bpmn-js-properties-panel": "^5.35.0",

web/src/App.js

@@ -39,6 +39,7 @@ import SigninPage from "./SigninPage";
 import i18next from "i18next";
 import {withTranslation} from "react-i18next";
 import LanguageSelect from "./LanguageSelect";
+import ThemeSelect from "./ThemeSelect";
 import ChatEditPage from "./ChatEditPage";
 import ChatListPage from "./ChatListPage";
 import MessageListPage from "./MessageListPage";
@@ -86,12 +87,21 @@ const {Header, Footer, Content} = Layout;
 class App extends Component {
   constructor(props) {
     super(props);
+    this.setThemeAlgorithm();
+    let storageThemeAlgorithm = [];
+    try {
+      storageThemeAlgorithm = localStorage.getItem("themeAlgorithm") ? JSON.parse(localStorage.getItem("themeAlgorithm")) : ["default"];
+    } catch {
+      storageThemeAlgorithm = ["default"];
+    }
     this.state = {
       classes: props,
       selectedMenuKey: 0,
       account: undefined,
       uri: null,
+      themeAlgorithm: storageThemeAlgorithm,
       themeData: Conf.ThemeDefault,
+      logo: this.getLogo(storageThemeAlgorithm),
       menuVisible: false,
       forms: [],
     };
@@ -304,6 +314,27 @@ class App extends Component {
     });
   };
 
+  setThemeAlgorithm() {
+    const currentUrl = window.location.href;
+    const url = new URL(currentUrl);
+    const themeType = url.searchParams.get("theme");
+    if (themeType === "dark" || themeType === "default") {
+      localStorage.setItem("themeAlgorithm", JSON.stringify([themeType]));
+    }
+  }
+
+  setLogoAndThemeAlgorithm = (nextThemeAlgorithm) => {
+    this.setState({
+      themeAlgorithm: nextThemeAlgorithm,
+      logo: this.getLogo(nextThemeAlgorithm),
+    });
+    localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
+  };
+
+  getLogo(themes) {
+    return Setting.getLogo(themes);
+  }
+
   renderAvatar() {
     if (this.state.account.avatar === "") {
       return (
@@ -399,6 +430,9 @@ class App extends Component {
               {i18next.t("account:Sign In")}
             </a>
           </div>
+          <div style={{float: "right", margin: "0px", padding: "0px"}}>
+            <ThemeSelect themeAlgorithm={this.state.themeAlgorithm} onChange={this.setLogoAndThemeAlgorithm} />
+          </div>
           <div style={{float: "right", margin: "0px", padding: "0px"}}>
             <LanguageSelect />
           </div>
@@ -408,6 +442,7 @@ class App extends Component {
       return (
         <React.Fragment>
           {this.renderRightDropdown()}
+          <ThemeSelect themeAlgorithm={this.state.themeAlgorithm} onChange={this.setLogoAndThemeAlgorithm} />
           <LanguageSelect />
           <div style={{float: "right", marginRight: "20px", padding: "0px"}}>
             <div dangerouslySetInnerHTML={{__html: Conf.NavbarHtml}} />
@@ -515,7 +550,7 @@ class App extends Component {
         Setting.goToLinkSoft(this, "/videos");
       }
     } else {
-      const textColor = "black";
+      const textColor = this.state.themeAlgorithm.includes("dark") ? "white" : "black";
       const twoToneColor = this.state.themeData.colorPrimary;
 
       res.pop();
@@ -762,11 +797,11 @@ class App extends Component {
     };
 
     return (
-      <Header style={{padding: "0", marginBottom: "3px", backgroundColor: "white", display: "flex", justifyContent: "space-between"}}>
+      <Header style={{padding: "0", marginBottom: "3px", backgroundColor: this.state.themeAlgorithm.includes("dark") ? "black" : "white", display: "flex", justifyContent: "space-between"}}>
         <div style={{display: "flex", alignItems: "center", flex: 1, overflow: "hidden"}}>
           {Setting.isMobile() ? null : (
             <Link to={"/"}>
-              <img className="logo" src={Conf.LogoUrl} alt="logo" />
+              <img className="logo" src={this.state.logo} alt="logo" />
             </Link>
           )}
           {Setting.isMobile() ? (
@@ -809,8 +844,6 @@ class App extends Component {
       <React.Fragment>
         <Footer id="footer" style={
           {
-            borderTop: "1px solid #e8e8e8",
-            backgroundColor: "white",
             textAlign: "center",
             height: "67px",
           }
@@ -849,7 +882,7 @@ class App extends Component {
             colorInfo: this.state.themeData.colorPrimary,
             borderRadius: this.state.themeData.borderRadius,
           },
-          // algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
+          algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
         }}>
           <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
             {

web/src/App.less

@@ -33,7 +33,6 @@ img {
   flex-direction: column;
   height: 100%;
   min-height: 100vh;
-  background-color: white;
 }
 
 .content-warp-card {
@@ -66,10 +65,6 @@ img {
   height: 65px;
   float: right;
   cursor: pointer;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
 }
 
 .select-box {
@@ -81,10 +76,6 @@ img {
   height: 64px;
   float: right;
   cursor: pointer;
-
-  &:hover {
-    background-color: #f5f5f5 !important;
-  }
 }
 
 .rightDropDown {
@@ -95,11 +86,6 @@ img {
   float: right;
   cursor: pointer;
   margin-right: 3px;
-
-  &:hover {
-    background-color: #f5f5f5;
-    color: black;
-  }
 }
 
 .cs-conversation-header__content .cs-conversation-header__user-name {

web/src/ArticleEditPage.js

@@ -407,7 +407,7 @@ class ArticleEditPage extends React.Component {
           {/* </Col>*/}
           <Col span={5} >
             <Affix offsetTop={0} style={{marginRight: "10px"}}>
-              <div style={{backgroundColor: "white", height: "100vh", overflowY: "auto", borderRight: 0}}>
+              <div style={{height: "100vh", overflowY: "auto", borderRight: 0}}>
                 <ArticleMenu table={blocks} onGoToRow={(table, i) => {
                   if (this.articleTableRef.current) {
                     this.articleTableRef.current.goToRow(table, i);

web/src/ChatPage.js

@@ -702,7 +702,7 @@ class ChatPage extends BaseListPage {
     }
 
     return (
-      <div style={{display: "flex", backgroundColor: "white", height: (Setting.getUrlParam("isRaw") !== null) ? "calc(100vh)" : (window.location.pathname.startsWith("/chat")) ? "calc(100vh - 135px)" : Setting.isMobile() ? "calc(100vh - 136px)" : "calc(100vh - 186px)"}}>
+      <div style={{display: "flex", height: (Setting.getUrlParam("isRaw") !== null) ? "calc(100vh)" : (window.location.pathname.startsWith("/chat")) ? "calc(100vh - 135px)" : Setting.isMobile() ? "calc(100vh - 136px)" : "calc(100vh - 186px)"}}>
         {
           this.renderModal()
         }
@@ -711,7 +711,7 @@ class ChatPage extends BaseListPage {
         }
         {
           !(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && !this.state.chatMenuCollapsed && (
-            <div style={{width: "250px", height: "100%", backgroundColor: "white", marginRight: "2px"}}>
+            <div style={{width: "250px", height: "100%", marginRight: "2px"}}>
               <ChatMenu ref={this.menu} chats={chats} chatName={this.getChat()} onSelectChat={onSelectChat} onAddChat={onAddChat} onDeleteChat={onDeleteChat} onUpdateChatName={onUpdateChatName} stores={this.state.stores} currentStoreName={currentStoreName} />
             </div>
           )
@@ -724,7 +724,7 @@ class ChatPage extends BaseListPage {
           </Drawer>
         )}
 
-        <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative", display: "flex", flexDirection: "column"}}>
+        <div style={{flex: 1, height: "100%", position: "relative", display: "flex", flexDirection: "column"}}>
           {this.state.chat && this.state.paneCount === 1 && (
             <div style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
               {Setting.isMobile() && (

web/src/MultiPaneManager.js

@@ -425,7 +425,7 @@ const MultiPaneManager = ({
   );
 
   return (
-    <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative", display: "flex", flexDirection: "column"}}>
+    <div style={{flex: 1, height: "100%", position: "relative", display: "flex", flexDirection: "column"}}>
       <div style={{flex: 1, display: "grid", gridTemplateColumns: `repeat(${paneCount}, 1fr)`, gap: "2px", overflow: "hidden"}}>
         {Array.from({length: paneCount}, (_, index) => {
           const pane = panes[index] || {};

web/src/Setting.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Tag, Tooltip, message} from "antd";
+import {Tag, Tooltip, message, theme} from "antd";
 import {QuestionCircleTwoTone, SyncOutlined} from "@ant-design/icons";
 import {isMobile as isMobileDevice} from "react-device-detect";
 import i18next from "i18next";
@@ -2036,3 +2036,23 @@ export function getThinkingModelMaxTokens(subType) {
   }
   return 0;
 }
+
+export function getAlgorithm(themeAlgorithmNames) {
+  return themeAlgorithmNames.sort().reverse().map((algorithmName) => {
+    if (algorithmName === "dark") {
+      return theme.darkAlgorithm;
+    }
+    if (algorithmName === "compact") {
+      return theme.compactAlgorithm;
+    }
+    return theme.defaultAlgorithm;
+  });
+}
+
+export function getLogo(themes) {
+  if (themes.includes("dark")) {
+    return Conf.LogoUrl.replace(/\.png$/, "_white.png");
+  } else {
+    return Conf.LogoUrl;
+  }
+}

web/src/ThemeSelect.js

@@ -0,0 +1,94 @@
+// Copyright 2025 The Casibase Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import * as Setting from "./Setting";
+import {Dropdown, Space} from "antd";
+import "./App.less";
+import i18next from "i18next";
+import {CheckOutlined, ShrinkOutlined} from "@ant-design/icons";
+import {MoonOutlined, SunOutlined} from "@ant-design/icons";
+
+export const Themes = [
+  {label: "Default", key: "default", icon: <SunOutlined style={{fontSize: "24px"}} />},        // i18next.t("theme:Default")
+  {label: "Dark", key: "dark", icon: <MoonOutlined style={{fontSize: "24px"}} />},          // i18next.t("theme:Dark")
+  {label: "Compact", key: "compact", icon: <ShrinkOutlined style={{fontSize: "24px"}} />}, // i18next.t("theme:Compact")
+];
+
+function getIcon(themeKey) {
+  if (themeKey?.includes("dark")) {
+    return Themes.find(t => t.key === "dark").icon;
+  } else if (themeKey?.includes("default")) {
+    return Themes.find(t => t.key === "default").icon;
+  }
+}
+
+class ThemeSelect extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  icon = getIcon(this.props.themeAlgorithm);
+
+  getThemeItems() {
+    return Themes.map((theme) => Setting.getItem(
+      <Space>
+        {i18next.t(`theme:${theme.label}`)}
+        {this.props.themeAlgorithm.includes(theme.key) ? <CheckOutlined style={{marginLeft: "5px"}} /> : null}
+      </Space>,
+      theme.key, theme.icon));
+  }
+
+  render() {
+    const onClick = (e) => {
+      let nextTheme;
+      if (e.key === "compact") {
+        if (this.props.themeAlgorithm.includes("compact")) {
+          nextTheme = this.props.themeAlgorithm.filter((theme) => theme !== "compact");
+        } else {
+          nextTheme = [...this.props.themeAlgorithm, "compact"];
+        }
+      } else {
+        if (!this.props.themeAlgorithm.includes(e.key)) {
+          if (e.key === "dark") {
+            nextTheme = [...this.props.themeAlgorithm.filter((theme) => theme !== "default"), e.key];
+          } else {
+            nextTheme = [...this.props.themeAlgorithm.filter((theme) => theme !== "dark"), e.key];
+          }
+        } else {
+          nextTheme = [...this.props.themeAlgorithm];
+        }
+      }
+
+      this.icon = getIcon(nextTheme);
+      this.props.onChange(nextTheme);
+    };
+
+    return (
+      <Dropdown menu={{
+        items: this.getThemeItems(),
+        onClick,
+        selectable: true,
+        multiple: true,
+        selectedKeys: [...this.props.themeAlgorithm],
+      }}>
+        <div className="select-box">
+          {this.icon}
+        </div>
+      </Dropdown>
+    );
+  }
+}
+
+export default ThemeSelect;

web/src/chat/ChatInput.js

@@ -36,6 +36,13 @@ const ChatInput = ({
   isVoiceInput,
 }) => {
 
+  let storageThemeAlgorithm = [];
+  try {
+    storageThemeAlgorithm = localStorage.getItem("themeAlgorithm") ? JSON.parse(localStorage.getItem("themeAlgorithm")) : ["default"];
+  } catch {
+    storageThemeAlgorithm = ["default"];
+  }
+
   const sendButtonDisabled = messageError || (value === "" && files.length === 0) || disableInput;
 
   async function handleInputChange(file) {
@@ -129,7 +136,7 @@ const ChatInput = ({
           }
           loading={loading}
           disabled={disableInput}
-          style={{flex: 1, borderRadius: "8px", background: "#f5f5f5"}}
+          style={{flex: 1, borderRadius: "8px", background: storageThemeAlgorithm.includes("dark") ? "black" : "white"}}
           placeholder={messageError ? "" : i18next.t("chat:Type message here")}
           // if we have some files uploaded but no text was input (value === ""), Sender wont invoke onSubmit.
           value={(files.length > 0 && value === "") ? " " + value : value}