From 789d7000cf28840494a40a7a23c436ff2bc5d3ca Mon Sep 17 00:00:00 2001
From: WhizPanda <whizpanda@proton.me>
Date: Sat, 2 Dec 2023 16:23:53 +0800
Subject: [PATCH] style: Improve Style

---
 src/assets/styles/page.scss               |  1 -
 src/components/base/base-page.tsx         | 19 ++++++++++++++++---
 src/components/layout/use-custom-theme.ts |  3 +++
 src/pages/_theme.tsx                      |  2 ++
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss
index a779e8c2..fdf3a66c 100644
--- a/src/assets/styles/page.scss
+++ b/src/assets/styles/page.scss
@@ -30,7 +30,6 @@
       padding: 5px 5px;
       box-sizing: border-box;
       scrollbar-gutter: stable;
-      background-color: var(--background-color);
 
       .base-content {
         width: 100%;
diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx
index 2de528e9..e859c871 100644
--- a/src/components/base/base-page.tsx
+++ b/src/components/base/base-page.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
-import { Typography } from "@mui/material";
+import { Typography, alpha } from "@mui/material";
 import { BaseErrorBoundary } from "./base-error-boundary";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 interface Props {
   title?: React.ReactNode; // the page title
@@ -11,6 +12,9 @@ interface Props {
 
 export const BasePage: React.FC<Props> = (props) => {
   const { title, header, contentStyle, children } = props;
+  const { theme } = useCustomTheme();
+
+  const isDark = theme.palette.mode === "dark";
 
   return (
     <BaseErrorBoundary>
@@ -23,8 +27,17 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
-        <div className="base-container">
-          <section>
+        <div
+          className="base-container"
+          style={{ backgroundColor: isDark ? "#090909" : "#ffffff" }}
+        >
+          <section
+            style={{
+              backgroundColor: isDark
+                ? alpha(theme.palette.primary.main, 0.1)
+                : "",
+            }}
+          >
             <div className="base-content" style={contentStyle} data-windrag>
               {children}
             </div>
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index 0e0d69e1..3a3b8ee6 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -55,6 +55,9 @@ export const useCustomTheme = () => {
             primary: setting.primary_text || dt.primary_text,
             secondary: setting.secondary_text || dt.secondary_text,
           },
+          background: {
+            paper: dt.background_color,
+          },
         },
         typography: {
           // todo
diff --git a/src/pages/_theme.tsx b/src/pages/_theme.tsx
index 3e6b29c9..ef7376d3 100644
--- a/src/pages/_theme.tsx
+++ b/src/pages/_theme.tsx
@@ -8,6 +8,7 @@ export const defaultTheme = {
   error_color: "#d32f2f",
   warning_color: "#ed6c02",
   success_color: "#2e7d32",
+  background_color: "#ffffff",
   font_family: `"Roboto", "Helvetica", "Arial", sans-serif, "twemoji mozilla"`,
 };
 
@@ -15,5 +16,6 @@ export const defaultTheme = {
 export const defaultDarkTheme = {
   ...defaultTheme,
   primary_text: "#E8E8ED",
+  background_color: "#181818",
   secondary_text: "#bbbbbb",
 };