From 5e2271b2373c39928f9d5d762bd394ad3f7d3356 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Fri, 6 May 2022 14:04:39 +0800
Subject: [PATCH] feat: adjust theme
---
src/assets/styles/index.scss | 3 ++-
src/assets/styles/layout.scss | 10 +++++-----
src/components/layout/use-custom-theme.ts | 19 ++++++++++++-------
src/components/profile/profile-item.tsx | 4 ++--
src/components/setting/setting-theme.tsx | 16 ++++++++++++----
src/pages/_layout.tsx | 4 ++--
src/pages/_theme.tsx | 7 +++++++
7 files changed, 42 insertions(+), 21 deletions(-)
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 10c6c25..599dd24 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -11,6 +11,7 @@ body {
--primary-main: #5b5c9d;
--text-primary: #637381;
--selection-color: #f5f5f5;
+ --scroller-color: #90939980;
}
::selection {
@@ -25,7 +26,7 @@ body {
}
*::-webkit-scrollbar-thumb {
border-radius: 6px;
- background-color: rgba(#909399, 0.5);
+ background-color: var(--scroller-color);
}
@import "./layout.scss";
diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index 25cb110..6257412 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -10,7 +10,7 @@
height: 100%;
max-width: 225px;
min-width: 125px;
- padding: 8px 0;
+ padding: 16px 0 8px;
flex-direction: column;
box-sizing: border-box;
user-select: none;
@@ -23,14 +23,14 @@
max-width: 168px;
max-height: 168px;
margin: 0 auto;
- padding: 0 8px;
+ padding: 0 16px;
text-align: center;
box-sizing: border-box;
img,
svg {
- width: 100%;
- height: 100%;
+ width: 96%;
+ height: 96%;
pointer-events: none;
}
@@ -43,7 +43,7 @@
}
.the-menu {
- flex: 1 1 75%;
+ flex: 1 1 80%;
overflow-y: auto;
margin-bottom: 8px;
}
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index 89a79b5..7ddd7d3 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -2,7 +2,7 @@ import useSWR from "swr";
import { useMemo } from "react";
import { createTheme } from "@mui/material";
import { getVergeConfig } from "../../services/cmds";
-import { defaultTheme as dt } from "../../pages/_theme";
+import { defaultTheme, defaultDarkTheme } from "../../pages/_theme";
/**
* custome theme
@@ -13,14 +13,9 @@ export default function useCustomTheme() {
const theme = useMemo(() => {
const mode = theme_mode ?? "light";
- // const background = mode === "light" ? "#f5f5f5" : "#000";
- const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
-
- const rootEle = document.documentElement;
- rootEle.style.background = "transparent";
- rootEle.style.setProperty("--selection-color", selectColor);
const setting = theme_setting || {};
+ const dt = mode === "light" ? defaultTheme : defaultDarkTheme;
const theme = createTheme({
breakpoints: {
@@ -47,6 +42,16 @@ export default function useCustomTheme() {
},
});
+ // css
+ const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
+ const scrollColor = mode === "light" ? "#90939980" : "#54545480";
+
+ const rootEle = document.documentElement;
+ rootEle.style.background = "transparent";
+ rootEle.style.setProperty("--selection-color", selectColor);
+ rootEle.style.setProperty("--scroller-color", scrollColor);
+ rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+
// inject css
let style = document.querySelector("style#verge-theme");
if (!style) {
diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx
index 6d46f74..dcb5673 100644
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -165,8 +165,8 @@ const ProfileItem = (props: Props) => {
const color = {
"light-true": text.secondary,
"light-false": text.secondary,
- "dark-true": alpha(text.secondary, 0.6),
- "dark-false": alpha(text.secondary, 0.6),
+ "dark-true": alpha(text.secondary, 0.75),
+ "dark-false": alpha(text.secondary, 0.75),
}[key]!;
const h2color = {
diff --git a/src/components/setting/setting-theme.tsx b/src/components/setting/setting-theme.tsx
index 1743602..b00579b 100644
--- a/src/components/setting/setting-theme.tsx
+++ b/src/components/setting/setting-theme.tsx
@@ -13,9 +13,10 @@ import {
ListItemText,
styled,
TextField,
+ useTheme,
} from "@mui/material";
import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
-import { defaultTheme } from "../../pages/_theme";
+import { defaultTheme, defaultDarkTheme } from "../../pages/_theme";
interface Props {
open: boolean;
@@ -71,15 +72,22 @@ const SettingTheme = (props: Props) => {
}
});
- const renderItem = (label: string, key: keyof typeof defaultTheme) => {
+ // default theme
+ const { palette } = useTheme();
+
+ const dt = palette.mode === "light" ? defaultTheme : defaultDarkTheme;
+
+ type ThemeKey = keyof typeof theme & keyof typeof defaultTheme;
+
+ const renderItem = (label: string, key: ThemeKey) => {
return (
<Item>
<ListItemText primary={label} />
- <Round sx={{ background: theme[key] || defaultTheme[key] }} />
+ <Round sx={{ background: theme[key] || dt[key] }} />
<TextField
{...textProps}
value={theme[key] ?? ""}
- placeholder={defaultTheme[key]}
+ placeholder={dt[key]}
onChange={handleChange(key)}
onKeyDown={(e) => e.key === "Enter" && onSave()}
/>
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 98cf4d7..6fa1498 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -72,7 +72,7 @@ const Layout = () => {
}}
sx={[
({ palette }) => ({
- bgcolor: alpha(palette.background.paper, theme_blur ? 0.85 : 1),
+ bgcolor: alpha(palette.background.paper, theme_blur ? 0.8 : 1),
}),
]}
>
@@ -83,7 +83,7 @@ const Layout = () => {
<UpdateButton className="the-newbtn" />
</div>
- <List className="the-menu" data-windrag>
+ <List className="the-menu">
{routers.map((router) => (
<LayoutItem key={router.label} to={router.link}>
{t(router.label)}
diff --git a/src/pages/_theme.tsx b/src/pages/_theme.tsx
index 4b92a03..37ce63e 100644
--- a/src/pages/_theme.tsx
+++ b/src/pages/_theme.tsx
@@ -10,3 +10,10 @@ export const defaultTheme = {
success_color: "#2e7d32",
font_family: `"Roboto", "Helvetica", "Arial", sans-serif`,
};
+
+// dark mode
+export const defaultDarkTheme = {
+ ...defaultTheme,
+ primary_text: "#757575",
+ secondary_text: "#637381",
+};
--
GitLab