fix: improve dark mode

Author: Working On It

web/src/ActivityPage.js

@@ -425,7 +425,7 @@ class ActivityPage extends BaseListPage {
 
   render() {
     return (
-      <div>
+      <div style={{backgroundColor: Setting.isDarkMode() ? "black" : "white"}}>
         <Row style={{marginTop: "20px"}} >
           <Col span={1} />
           <Col span={17} >

web/src/App.js

@@ -341,6 +341,14 @@ class App extends Component {
     localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
   };
 
+  getLogo(themes) {
+    return Setting.getLogo(themes);
+  }
+
+  getFooterHtml(themes) {
+    return Setting.getFooterHtml(themes);
+  }
+
   renderAvatar() {
     if (this.state.account.avatar === "") {
       return (
@@ -813,7 +821,7 @@ class App extends Component {
     };
 
     return (
-      <Header style={{padding: "0", marginBottom: "3px", backgroundColor: this.state.themeAlgorithm.includes("dark") ? "black" : "white", display: "flex", justifyContent: "space-between"}}>
+      <Header style={{padding: "0", marginBottom: "3px", display: "flex", justifyContent: "space-between", backgroundColor: Setting.isDarkMode() ? "#1f1f1f" : "#fff"}}>
         <div style={{display: "flex", alignItems: "center", flex: 1, overflow: "hidden"}}>
           {Setting.isMobile() ? null : (
             <Link to={"/"}>
@@ -838,7 +846,7 @@ class App extends Component {
             </React.Fragment>
           ) : (
             <div style={{display: "flex", marginLeft: "10px", flex: 1, minWidth: 0, overflow: "auto", paddingRight: "20px"}}>
-              <Menu style={{minWidth: 0, width: "100%"}} onClick={onClick} items={this.getMenuItems()} mode={"horizontal"} selectedKeys={[this.state.selectedMenuKey]} />
+              <Menu style={{minWidth: 0, width: "100%", backgroundColor: Setting.isDarkMode() ? "#1f1f1f" : "#fff"}} onClick={onClick} items={this.getMenuItems()} mode={"horizontal"} selectedKeys={[this.state.selectedMenuKey]} />
             </div>
           )}
         </div>
@@ -864,7 +872,7 @@ class App extends Component {
             height: "67px",
           }
         }>
-          <div dangerouslySetInnerHTML={{__html: Setting.getFooterHtml(this.state.themeAlgorithm)}} />
+          <div dangerouslySetInnerHTML={{__html: this.getFooterHtml(this.state.themeAlgorithm)}} />
         </Footer>
       </React.Fragment>
     );

web/src/OsDesktop.css

@@ -3,7 +3,6 @@
   height: calc(100vh - 64px);
   display: flex;
   flex-direction: column;
-  background-color: #f0f2f5;
   overflow: hidden;
 }
 
@@ -32,7 +31,6 @@
   height: 30px;
   line-height: 30px;
   margin-right: 5px;
-  background-color: #1a2d3e;
   border-radius: 3px;
   cursor: pointer;
   white-space: nowrap;
@@ -147,7 +145,6 @@
 
 .desktop-icon .icon-name {
   text-align: center;
-  color: #333;
   font-size: 14px;
   font-weight: 500;
   padding: 4px 8px;
@@ -157,7 +154,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   transition: all 0.2s ease;
-  text-shadow: 0 1px 2px rgb(255 255 255 / 80%);
   background: transparent;
 }
 
@@ -168,7 +164,6 @@
 }
 
 .desktop-window {
-  background-color: white;
   border-radius: 5px;
   box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
   overflow: hidden;
@@ -259,7 +254,6 @@
 
 .window-header {
   height: 32px;
-  background-color: #f5f5f5;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -296,7 +290,6 @@
 .window-title {
   font-size: 14px;
   font-weight: 400;
-  color: #323130;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -361,17 +354,12 @@
 
 .window-minimize .control-icon {
   font-weight: bold;
-  color: rgb(0 0 0 / 50%) !important;
 }
 
 .window-minimize:active {
   background-color: #e6a926 !important;
 }
 
-.window-maximize .control-icon {
-  color: rgb(0 0 0 / 50%) !important;
-}
-
 .window-maximize:active {
   background-color: #24b53b !important;
 }
@@ -419,7 +407,6 @@
 .window-content {
   flex-grow: 1;
   overflow: auto;
-  background-color: white;
 }
 
 .dock {
@@ -428,7 +415,6 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 2000;
-  background: rgb(255 255 255 / 90%);
   backdrop-filter: blur(10px);
   border-radius: 15px;
   padding: 8px 16px;

web/src/OsDesktop.js

@@ -23,7 +23,7 @@ import routeManager, {DynamicRouteComponent} from "./component/AppRouteManager";
 import {StaticBaseUrl} from "./Conf";
 import {Draggable} from "./component/DragDrop/Draggable";
 import {Droppable} from "./component/DragDrop/Droppable";
-import {getRandomName} from "./Setting";
+import {getRandomName, isDarkMode} from "./Setting";
 
 const getIconUrl = (appType) => {
   return `${StaticBaseUrl}/apps/${appType}.svg`;
@@ -182,7 +182,14 @@ const Window = ({title, isMaximized, onClose, onMaximize, onMinimize, onFocus, a
           </Button>
         </div>
       </div>
-      <div className="window-content">
+      <div className="window-content" style={{
+        backgroundColor: isDarkMode() ? "rgba(20, 20, 20, 0.95)" : "rgba(255, 255, 255, 0.95)",
+        height: "100%",
+        width: "100%",
+        overflow: "auto",
+        padding: "16px",
+        color: isDarkMode() ? "#fff" : "#000",
+      }}>
         <WindowContent
           appType={appType}
           account={account}

web/src/Setting.js

@@ -2068,3 +2068,13 @@ export function getFooterHtml(themes) {
     return FooterHtml;
   }
 }
+
+export function isDarkMode() {
+  let storageThemeAlgorithm = [];
+  try {
+    storageThemeAlgorithm = localStorage.getItem("themeAlgorithm") ? JSON.parse(localStorage.getItem("themeAlgorithm")) : ["default"];
+  } catch {
+    storageThemeAlgorithm = ["default"];
+  }
+  return storageThemeAlgorithm.includes("dark") ? true : false;
+}

web/src/UsagePage.js

@@ -521,6 +521,9 @@ class UsagePage extends BaseListPage {
         trigger: "axis",
         axisPointer: {
           type: "cross",
+          crossStyle: {
+            color: Setting.isDarkMode() ? "rgba(0, 0, 0, 1)" : "#999",
+          },
         },
       },
       legend: {
@@ -658,10 +661,13 @@ class UsagePage extends BaseListPage {
                   height: "400px",
                   width: "100%",
                   display: "inline-block",
+                  backgroundColor: Setting.isDarkMode() ? "#000" : "#fff",
                 }}
                 showLoading={this.state.usages === null}
                 loadingOption={{
                   color: localStorage.getItem("themeColor"),
+                  textColor: Setting.isDarkMode() ? "rgba(255, 255, 255, 1)" : "#000",
+                  maskColor: Setting.isDarkMode() ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 0.8)",
                   fontSize: "16px",
                   spinnerRadius: 6,
                   lineWidth: 3,
@@ -677,10 +683,13 @@ class UsagePage extends BaseListPage {
                   height: "400px",
                   width: "100%",
                   display: "inline-block",
+                  backgroundColor: Setting.isDarkMode() ? "#000" : "#fff",
                 }}
                 showLoading={this.state.usages === null}
                 loadingOption={{
                   color: localStorage.getItem("themeColor"),
+                  textColor: Setting.isDarkMode() ? "rgba(255, 255, 255, 1)" : "#000",
+                  maskColor: Setting.isDarkMode() ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 0.8)",
                   fontSize: "16px",
                   spinnerRadius: 6,
                   lineWidth: 3,
@@ -705,10 +714,13 @@ class UsagePage extends BaseListPage {
               height: "400px",
               width: "48%",
               display: "inline-block",
+              backgroundColor: Setting.isDarkMode() ? "#000" : "#fff",
             }}
             showLoading={rangeUsages === null}
             loadingOption={{
               color: localStorage.getItem("themeColor"),
+              textColor: Setting.isDarkMode() ? "rgba(255, 255, 255, 1)" : "#000",
+              maskColor: Setting.isDarkMode() ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 0.8)",
               fontSize: "16px",
               spinnerRadius: 6,
               lineWidth: 3,
@@ -722,10 +734,13 @@ class UsagePage extends BaseListPage {
               height: "400px",
               width: "48%",
               display: "inline-block",
+              backgroundColor: Setting.isDarkMode() ? "#000" : "#fff",
             }}
             showLoading={rangeUsages === null}
             loadingOption={{
               color: localStorage.getItem("themeColor"),
+              textColor: Setting.isDarkMode() ? "rgba(255, 255, 255, 1)" : "#000",
+              maskColor: Setting.isDarkMode() ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 0.8)",
               fontSize: "16px",
               spinnerRadius: 6,
               lineWidth: 3,
@@ -740,7 +755,7 @@ class UsagePage extends BaseListPage {
 
   render() {
     return (
-      <div>
+      <div style={{backgroundColor: Setting.isDarkMode() ? "black" : "white"}}>
         <Row style={{marginTop: "20px"}} >
           <Col span={1} />
           <Col span={17} >

web/src/chat/ChatInput.js

@@ -19,6 +19,7 @@ import {LinkOutlined} from "@ant-design/icons";
 import ChatFileInput from "./ChatFileInput";
 import UploadFileArea from "./UploadFileArea";
 import i18next from "i18next";
+import {isDarkMode} from "../Setting";
 
 const ChatInput = ({
   value,
@@ -36,13 +37,6 @@ 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) {
@@ -136,7 +130,7 @@ const ChatInput = ({
           }
           loading={loading}
           disabled={disableInput}
-          style={{flex: 1, borderRadius: "8px", background: storageThemeAlgorithm.includes("dark") ? "black" : "white"}}
+          style={{flex: 1, borderRadius: "8px", background: isDarkMode() ? "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}