style: Improve Style

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