style: Improve Style

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%;

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>

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

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",
 };