feat: Material You!

src/assets/styles/index.scss

@@ -17,6 +17,8 @@ body {
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
   --background-color: #ffffff;
+  --background-color-alpha: rgba(24, 103, 192, 0.1);
+  --border-radius: 12px;
 }
 
 ::selection {

src/assets/styles/layout.scss

@@ -18,6 +18,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
+    background-color: var(--background-color-alpha);
 
     $maxLogo: 100px;
 
@@ -71,6 +72,7 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
+    background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
@@ -87,8 +89,8 @@
       position: absolute;
       top: 0;
       left: 0;
-      right: 2px;
-      bottom: 10px;
+      right: 28px;
+      bottom: 28px;
     }
   }
 }

src/assets/styles/page.scss

@@ -6,7 +6,7 @@
 
   > header {
     flex: 0 0 58px;
-    width: 90%;
+    width: 100%;
     // max-width: 850px;
     margin: 0 auto;
     padding-right: 4px;
@@ -16,15 +16,21 @@
     justify-content: space-between;
   }
 
+  .base-container {
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+
     > section {
       position: relative;
       flex: 1 1 100%;
       width: 100%;
       height: 100%;
       overflow: auto;
-    padding: 8px 0;
+      padding: 28px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
+      background-color: var(--background-color);
 
       .base-content {
         width: 90%;
@@ -32,4 +38,5 @@
         margin: 0 auto;
       }
     }
+  }
 }

src/components/base/base-page.tsx

@@ -23,12 +23,14 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
+        <div className="base-container">
           <section>
             <div className="base-content" style={contentStyle} data-windrag>
               {children}
             </div>
           </section>
         </div>
+      </div>
     </BaseErrorBoundary>
   );
 };

src/components/layout/layout-item.tsx

@@ -15,7 +15,7 @@ export const LayoutItem = (props: LinkProps) => {
         selected={!!match}
         sx={[
           {
-            borderRadius: 2,
+            borderRadius: 8,
             textAlign: "center",
             "& .MuiListItemText-primary": { color: "text.secondary" },
           },

src/components/layout/use-custom-theme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
-import { createTheme, Theme } from "@mui/material";
+import { alpha, createTheme, Theme } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import { atomThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@@ -93,6 +93,10 @@ export const useCustomTheme = () => {
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+    rootEle.style.setProperty(
+      "--background-color-alpha",
+      alpha(theme.palette.primary.main, 0.1)
+    );
 
     // inject css
     let style = document.querySelector("style#verge-theme");