feat: support Theme button(casibase#1356)

Author: Working On It

conf/app.conf

@@ -37,6 +37,7 @@ staticBaseUrl = "https://cdn.casibase.org"
 htmlTitle = "Casibase"
 faviconUrl = "https://cdn.casibase.com/static/favicon.png"
 logoUrl = "https://cdn.casibase.org/img/casibase-logo_1200x256.png"
+logoWhiteUrl = "https://cdn.casibase.org/img/casibase-logo_1200x256_white.png"
 navbarHtml = ""
 footerHtml = "Powered by <a target="_blank" href="https://github.com/casibase/casibase" rel="noreferrer"><img style="padding-bottom: 3px;" height="20" alt="Casibase" src="https://cdn.casibase.org/img/casibase-logo_1200x256.png" /></a>"
 appUrl = ""

conf/conf.go

@@ -42,6 +42,7 @@ type WebConfig struct {
 	HtmlTitle          string   `json:"htmlTitle"`
 	FaviconUrl         string   `json:"faviconUrl"`
 	LogoUrl            string   `json:"logoUrl"`
+	LogoWhiteUrl       string   `json:"logoWhiteUrl"`
 	NavbarHtml         string   `json:"navbarHtml"`
 	FooterHtml         string   `json:"footerHtml"`
 	AppUrl             string   `json:"appUrl"`
@@ -219,6 +220,7 @@ func GetWebConfig() *WebConfig {
 	config.HtmlTitle = GetConfigString("htmlTitle")
 	config.FaviconUrl = GetConfigString("faviconUrl")
 	config.LogoUrl = GetConfigString("logoUrl")
+	config.LogoWhiteUrl = GetConfigString("logoWhiteUrl")
 	config.NavbarHtml = GetConfigString("navbarHtml")
 	config.FooterHtml = GetConfigString("footerHtml")
 	config.AppUrl = GetConfigString("appUrl")

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();
@@ -713,7 +748,7 @@ class App extends Component {
   renderContent() {
     if (Setting.getUrlParam("isRaw") !== null) {
       return (
-        <HomePage account={this.state.account} />
+        <HomePage account={this.state.account} themeAlgorithm={this.state.themeAlgorithm} />
       );
     } else if (Setting.getSubdomain() === "portal") {
       return (
@@ -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.themeAlgorithm.includes("dark") ? Conf.LogoWhiteUrl : Conf.LogoUrl} 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/Conf.js

@@ -24,6 +24,7 @@ export let StaticBaseUrl = "";
 export let HtmlTitle = "";
 export let FaviconUrl = "";
 export let LogoUrl = "";
+export let LogoWhiteUrl = "";
 export let NavbarHtml = "";
 export let FooterHtml = "";
 export let AppUrl = "";
@@ -53,6 +54,7 @@ export function setConfig(config) {
   if (config.htmlTitle !== undefined) {HtmlTitle = config.htmlTitle;}
   if (config.faviconUrl !== undefined) {FaviconUrl = config.faviconUrl;}
   if (config.logoUrl !== undefined) {LogoUrl = config.logoUrl;}
+  if (config.logoWhiteUrl !== undefined) {LogoWhiteUrl = config.logoWhiteUrl;}
   if (config.navbarHtml !== undefined) {NavbarHtml = config.navbarHtml;}
   if (config.footerHtml !== undefined) {FooterHtml = config.footerHtml;}
   if (config.appUrl !== undefined) {AppUrl = config.appUrl;}

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 `${StaticBaseUrl}/img/casdoor-logo_1185x256_dark.png`;
+  } else {
+    return `${StaticBaseUrl}/img/casdoor-logo_1185x256.png`;
+  }
+}