fix: improve dark mode

Author: Working On It

web/src/ActivityPage.js

@@ -350,8 +350,6 @@ class ActivityPage extends BaseListPage {
                     showLoading={this.state["activities" + dataName] === undefined}
                     loadingOption={{
                       color: localStorage.getItem("themeColor"),
-                      textColor: "#000",
-                      maskColor: "rgba(255, 255, 255, 0.8)",
                       fontSize: "16px",
                       spinnerRadius: 6,
                       lineWidth: 3,
@@ -386,8 +384,6 @@ class ActivityPage extends BaseListPage {
               showLoading={activitiesAction === undefined}
               loadingOption={{
                 color: localStorage.getItem("themeColor"),
-                textColor: "#000",
-                maskColor: "rgba(255, 255, 255, 0.8)",
                 fontSize: "16px",
                 spinnerRadius: 6,
                 lineWidth: 3,
@@ -408,8 +404,6 @@ class ActivityPage extends BaseListPage {
               showLoading={activitiesAction === undefined}
               loadingOption={{
                 color: localStorage.getItem("themeColor"),
-                textColor: "#000",
-                maskColor: "rgba(255, 255, 255, 0.8)",
                 fontSize: "16px",
                 spinnerRadius: 6,
                 lineWidth: 3,

web/src/App.js

@@ -345,6 +345,10 @@ class App extends Component {
     return Setting.getLogo(themes);
   }
 
+  getFooterHtml(themes) {
+    return Setting.getFooterHtml(themes);
+  }
+
   renderAvatar() {
     if (this.state.account.avatar === "") {
       return (
@@ -868,7 +872,7 @@ class App extends Component {
             height: "67px",
           }
         }>
-          <div dangerouslySetInnerHTML={{__html: Conf.FooterHtml}} />
+          <div dangerouslySetInnerHTML={{__html: this.getFooterHtml(this.state.themeAlgorithm)}} />
         </Footer>
       </React.Fragment>
     );

web/src/Setting.js

@@ -2058,3 +2058,13 @@ export function getLogo(themes) {
     return defaultLogoUrl;
   }
 }
+
+export function getFooterHtml(themes) {
+  let FooterHtml = Conf.FooterHtml;
+  FooterHtml = FooterHtml.replace("https://cdn.casibase.org", Conf.StaticBaseUrl);
+  if (themes.includes("dark")) {
+    return FooterHtml.replace(/(\.png)/g, "_white$1");
+  } else {
+    return FooterHtml;
+  }
+}

web/src/UsagePage.js

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