diff --git a/src/assets/image/itemicon/connections.svg b/src/assets/image/itemicon/connections.svg new file mode 100644 index 00000000..27647b70 --- /dev/null +++ b/src/assets/image/itemicon/connections.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/image/itemicon/logs.svg b/src/assets/image/itemicon/logs.svg new file mode 100644 index 00000000..a736051b --- /dev/null +++ b/src/assets/image/itemicon/logs.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/image/itemicon/profiles.svg b/src/assets/image/itemicon/profiles.svg new file mode 100644 index 00000000..3dbf8e1c --- /dev/null +++ b/src/assets/image/itemicon/profiles.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/image/itemicon/proxies.svg b/src/assets/image/itemicon/proxies.svg new file mode 100644 index 00000000..993820f5 --- /dev/null +++ b/src/assets/image/itemicon/proxies.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/image/itemicon/rules.svg b/src/assets/image/itemicon/rules.svg new file mode 100644 index 00000000..403cee18 --- /dev/null +++ b/src/assets/image/itemicon/rules.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/image/itemicon/settings.svg b/src/assets/image/itemicon/settings.svg new file mode 100644 index 00000000..7489aeb3 --- /dev/null +++ b/src/assets/image/itemicon/settings.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/image/itemicon/test.svg b/src/assets/image/itemicon/test.svg new file mode 100644 index 00000000..ae34bdda --- /dev/null +++ b/src/assets/image/itemicon/test.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/image/logo.bak.svg b/src/assets/image/logo.bak.svg new file mode 100644 index 00000000..750fb40f --- /dev/null +++ b/src/assets/image/logo.bak.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + diff --git a/src/assets/image/logo.svg b/src/assets/image/logo.svg index 750fb40f..b1850dde 100644 --- a/src/assets/image/logo.svg +++ b/src/assets/image/logo.svg @@ -1,18 +1,25 @@ - - - - - - - - - - - - + + + + + + + diff --git a/src/assets/image/logo_dark.svg b/src/assets/image/logo_dark.svg new file mode 100644 index 00000000..b4b43712 --- /dev/null +++ b/src/assets/image/logo_dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 71e5cb0c..e4f5bf73 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -13,10 +13,10 @@ body { :root { --primary-main: #5b5c9d; - --text-primary: #637381; + --text-primary: #1f1f1f; --selection-color: #f5f5f5; - --scroller-color: #90939980; - --background-color: #ffffff; + --scroller-color: #8c8c8c; + --background-color: #f5f5f5; --background-color-alpha: rgba(24, 103, 192, 0.1); --border-radius: 8px; } diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss index 897b88cb..33deee01 100644 --- a/src/assets/styles/layout.scss +++ b/src/assets/styles/layout.scss @@ -5,33 +5,44 @@ overflow: hidden; &__left { - flex: 1 0 15%; + flex: 1 0 228px; display: flex; height: 100%; - max-width: 225px; - min-width: 125px; + width: 100%; + // max-width: 225px; + // min-width: 225px; padding: 16px 0 8px; - position: relative; + // position: relative; flex-direction: column; + align-self: stretch; box-sizing: border-box; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; overflow: hidden; - background-color: var(--background-color-alpha); + border-right: 1px solid var(--divider-color); + // background-color: var(--background-color-alpha); - $maxLogo: 100px; + // $maxLogo: 100px; .the-logo { - position: relative; - flex: 0 1 $maxLogo; - width: 100%; - max-width: $maxLogo + 32px; - max-height: $maxLogo; - margin: 0 auto; - padding: 0 16px; - text-align: center; + // position: relative; + flex: 1 0 58px; + // width: 100%; + display: flex; + height: 100%; + padding: 0px 20px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + align-self: stretch; + border-bottom: 1px solid var(--divider-color); + // max-width: $maxLogo + 32px; + // max-height: $maxLogo; + // margin: 0 auto; + // padding: 0 auto; + // text-align: center; box-sizing: border-box; img, @@ -39,11 +50,11 @@ width: 100%; height: 100%; pointer-events: none; - fill: var(--primary-main); + // fill: var(--primary-main); - #bg { - fill: var(--background-color); - } + // #bg { + // fill: var(--background-color); + // } } .the-newbtn { @@ -65,21 +76,22 @@ > div { margin: 0 auto; + // padding: 0 20px; } } } &__right { position: relative; - flex: 1 1 75%; + flex: 1 1 100%; height: 100%; - background-color: var(--background-color-alpha); + // background-color: var(--background-color-alpha); .the-bar { position: absolute; top: 0px; right: 0px; - height: 36px; + height: 24px; display: flex; align-items: center; box-sizing: border-box; @@ -100,15 +112,16 @@ .windows, .unknown { &.layout { - $maxLogo: 115px; + .layout__left { + padding-top: 24px; + } + .layout__left .the-logo { - flex: 0 1 $maxLogo; - max-width: $maxLogo + 32px; - max-height: $maxLogo; + flex: 1 0 58px; } .layout__right .the-content { - top: 30px; + top: 24px; } } } @@ -119,7 +132,7 @@ padding-top: 24px; } .layout__right .the-content { - top: 20px; + top: 24px; } } } diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss index 7002175f..87bc6fc8 100644 --- a/src/assets/styles/page.scss +++ b/src/assets/styles/page.scss @@ -3,23 +3,23 @@ height: 100%; display: flex; flex-direction: column; - > header { flex: 0 0 58px; width: 100%; // max-width: 850px; margin: 0 auto; - padding-right: 8px; + padding: 0 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + border-bottom: 1px solid var(--divider-color); } .base-container { height: 100%; overflow: hidden; - border-top-left-radius: var(--border-radius); + // border-top-left-radius: var(--border-radius); > section { position: relative; @@ -27,12 +27,11 @@ width: 100%; height: 100%; overflow: auto; - padding: 10px 0; + padding: 16px 0; box-sizing: border-box; scrollbar-gutter: stable; - .base-content { - width: calc(100% - 10px * 2); + width: calc(100% - 16px * 2); margin: 0 auto; } } @@ -41,7 +40,6 @@ > section { padding: 0; overflow: visible; - .base-content { width: 100%; } diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx index 4a7defa0..b8b072c4 100644 --- a/src/components/base/base-page.tsx +++ b/src/components/base/base-page.tsx @@ -21,7 +21,10 @@ export const BasePage: React.FC = (props) => {
- + {title} @@ -30,13 +33,11 @@ export const BasePage: React.FC = (props) => {
diff --git a/src/components/base/base-switch.tsx b/src/components/base/base-switch.tsx new file mode 100644 index 00000000..c05c0915 --- /dev/null +++ b/src/components/base/base-switch.tsx @@ -0,0 +1,57 @@ +import { styled } from "@mui/material/styles"; +import { default as MuiSwitch, SwitchProps } from "@mui/material/Switch"; + +export const Switch = styled((props: SwitchProps) => ( + +))(({ theme }) => ({ + width: 42, + height: 26, + padding: 0, + "& .MuiSwitch-switchBase": { + padding: 0, + margin: 2, + transitionDuration: "300ms", + "&.Mui-checked": { + transform: "translateX(16px)", + color: "#fff", + "& + .MuiSwitch-track": { + backgroundColor: theme.palette.primary.main, + opacity: 1, + border: 0, + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: 0.5, + }, + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + color: "#33cf4d", + border: "6px solid #fff", + }, + "&.Mui-disabled .MuiSwitch-thumb": { + color: + theme.palette.mode === "light" + ? theme.palette.grey[100] + : theme.palette.grey[600], + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: theme.palette.mode === "light" ? 0.7 : 0.3, + }, + }, + "& .MuiSwitch-thumb": { + boxSizing: "border-box", + width: 22, + height: 22, + }, + "& .MuiSwitch-track": { + borderRadius: 26 / 2, + backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D", + opacity: 1, + transition: theme.transitions.create(["background-color"], { + duration: 500, + }), + }, +})); diff --git a/src/components/base/index.ts b/src/components/base/index.ts index 3e0e3240..57303ed6 100644 --- a/src/components/base/index.ts +++ b/src/components/base/index.ts @@ -4,3 +4,4 @@ export { BaseEmpty } from "./base-empty"; export { BaseLoading } from "./base-loading"; export { BaseErrorBoundary } from "./base-error-boundary"; export { Notice } from "./base-notice"; +export { Switch } from "./base-switch"; diff --git a/src/components/layout/layout-item.tsx b/src/components/layout/layout-item.tsx index c479f6f9..71980bab 100644 --- a/src/components/layout/layout-item.tsx +++ b/src/components/layout/layout-item.tsx @@ -1,32 +1,49 @@ -import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material"; +import { + alpha, + ListItem, + ListItemButton, + ListItemText, + ListItemAvatar, + Avatar, +} from "@mui/material"; import { useMatch, useResolvedPath, useNavigate } from "react-router-dom"; import type { LinkProps } from "react-router-dom"; -export const LayoutItem = (props: LinkProps) => { - const { to, children } = props; +interface Props { + to: string; + children: string; + img: string; +} +export const LayoutItem = (props: Props) => { + const { to, children, img } = props; const resolved = useResolvedPath(to); const match = useMatch({ path: resolved.pathname, end: true }); const navigate = useNavigate(); return ( - + { const bgcolor = mode === "light" ? alpha(primary.main, 0.15) : alpha(primary.main, 0.35); - const color = mode === "light" ? primary.main : primary.light; + const color = mode === "light" ? "#1f1f1f" : "#ffffff"; return { "&.Mui-selected": { bgcolor }, @@ -37,6 +54,9 @@ export const LayoutItem = (props: LinkProps) => { ]} onClick={() => navigate(to)} > + + + diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx index 1aa3d5e3..5f522081 100644 --- a/src/components/layout/layout-traffic.tsx +++ b/src/components/layout/layout-traffic.tsx @@ -89,7 +89,7 @@ export const LayoutTraffic = () => { return ( diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts index d426df1b..aa8ef942 100644 --- a/src/components/layout/use-custom-theme.ts +++ b/src/components/layout/use-custom-theme.ts @@ -1,6 +1,6 @@ import { useEffect, useMemo } from "react"; import { useRecoilState } from "recoil"; -import { alpha, createTheme, Theme } from "@mui/material"; +import { alpha, createTheme, Shadows, Theme } from "@mui/material"; import { appWindow } from "@tauri-apps/api/window"; import { atomThemeMode } from "@/services/states"; import { defaultTheme, defaultDarkTheme } from "@/pages/_theme"; @@ -59,6 +59,7 @@ export const useCustomTheme = () => { paper: dt.background_color, }, }, + shadows: Array(25).fill("none") as Shadows, typography: { // todo fontFamily: setting.font_family @@ -87,11 +88,14 @@ export const useCustomTheme = () => { } // css - const backgroundColor = mode === "light" ? "#ffffff" : "#0B121C"; + const backgroundColor = mode === "light" ? "#f0f0f0" : "#2e303d"; const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5"; const scrollColor = mode === "light" ? "#90939980" : "#54545480"; + const dividerColor = + mode === "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.06)"; const rootEle = document.documentElement; + rootEle.style.setProperty("--divider-color", dividerColor); rootEle.style.setProperty("--background-color", backgroundColor); rootEle.style.setProperty("--selection-color", selectColor); rootEle.style.setProperty("--scroller-color", scrollColor); diff --git a/src/components/profile/profile-box.tsx b/src/components/profile/profile-box.tsx index 6e15a879..97736636 100644 --- a/src/components/profile/profile-box.tsx +++ b/src/components/profile/profile-box.tsx @@ -2,41 +2,43 @@ import { alpha, Box, styled } from "@mui/material"; export const ProfileBox = styled(Box)( ({ theme, "aria-selected": selected }) => { - const { mode, primary, text, grey, background } = theme.palette; + const { mode, primary, text } = theme.palette; const key = `${mode}-${!!selected}`; - const backgroundColor = { - "light-true": alpha(primary.main, 0.2), - "light-false": alpha(background.paper, 0.75), - "dark-true": alpha(primary.main, 0.45), - "dark-false": alpha(grey[700], 0.45), - }[key]!; + const backgroundColor = mode === "light" ? "#ffffff" : "#282A36"; const color = { "light-true": text.secondary, "light-false": text.secondary, - "dark-true": alpha(text.secondary, 0.85), + "dark-true": alpha(text.secondary, 0.65), "dark-false": alpha(text.secondary, 0.65), }[key]!; const h2color = { "light-true": primary.main, "light-false": text.primary, - "dark-true": primary.light, + "dark-true": primary.main, "dark-false": text.primary, }[key]!; + const borderLeft = { + "light-true": `3px solid ${primary.main}`, + "light-false": "none", + "dark-true": `3px solid ${primary.main}`, + "dark-false": "none", + }[key]; + return { position: "relative", width: "100%", display: "block", cursor: "pointer", textAlign: "left", - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[2], padding: "8px 16px", boxSizing: "border-box", backgroundColor, + borderLeft, + borderRadius: "8px", color, "& h2": { color: h2color }, }; diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx index 5554717e..c619e8da 100644 --- a/src/components/profile/profile-item.tsx +++ b/src/components/profile/profile-item.tsx @@ -230,7 +230,14 @@ export const ProfileItem = (props: Props) => { {...attributes} {...listeners} > - + { + return { color: text.primary }; + }, + ]} + /> { {parseExpire(updated)} )} - + { return ( <> ({ + sx={{ p: 0, borderRadius: "10px", - boxShadow: theme.shadows[2], + border: "solid 2px var(--divider-color)", mb: 1, - })} + }} key={key} > { )} diff --git a/src/components/proxy/proxy-item-mini.tsx b/src/components/proxy/proxy-item-mini.tsx index 3ff40138..c4bba35c 100644 --- a/src/components/proxy/proxy-item-mini.tsx +++ b/src/components/proxy/proxy-item-mini.tsx @@ -50,30 +50,36 @@ export const ProxyItemMini = (props: Props) => { sx={[ { height: 56, - borderRadius: 1, + borderRadius: 1.5, pl: 1.5, pr: 1, justifyContent: "space-between", alignItems: "center", }, ({ palette: { mode, primary } }) => { - const bgcolor = - mode === "light" - ? alpha(primary.main, 0.15) - : alpha(primary.main, 0.35); + const bgcolor = mode === "light" ? "#ffffff" : "#24252f"; const color = mode === "light" ? primary.main : primary.light; const showDelay = delay > 0; - - const shadowColor = - mode === "light" ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.08)"; + const selectColor = mode === "light" ? primary.main : primary.light; return { "&:hover .the-check": { display: !showDelay ? "block" : "none" }, "&:hover .the-delay": { display: showDelay ? "block" : "none" }, "&:hover .the-icon": { display: "none" }, - "&.Mui-selected": { bgcolor, boxShadow: `0 0 0 1px ${bgcolor}` }, - "&.Mui-selected .MuiListItemText-secondary": { color }, - boxShadow: `0 0 0 1px ${shadowColor}`, + "&:hover ": { + bgcolor: + mode === "light" + ? alpha(primary.main, 0.15) + : alpha(primary.main, 0.35), + }, + "&.Mui-selected": { + width: `calc(100% + 3px)`, + marginLeft: `-3px`, + borderLeft: `3px solid ${selectColor}`, + bgcolor, + }, + // "&.Mui-selected .MuiListItemText-secondary": { color }, + backgroundColor: bgcolor, }; }, ]} @@ -82,13 +88,15 @@ export const ProxyItemMini = (props: Props) => { {proxy.name} @@ -114,7 +122,8 @@ export const ProxyItemMini = (props: Props) => { wordBreak: "break-all", overflow: "hidden", whiteSpace: "nowrap", - fontSize: "0.75rem", + fontSize: "11px", + fontWeight: "700", marginRight: "8px", }} > @@ -191,8 +200,8 @@ export const ProxyItemMini = (props: Props) => { }; const Widget = styled(Box)(({ theme: { typography } }) => ({ - padding: "3px 6px", - fontSize: 14, + padding: "2px 4px", + fontSize: 12, fontFamily: typography.fontFamily, borderRadius: "4px", })); @@ -200,15 +209,15 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({ const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({ display: "inline-block", border: "1px solid #ccc", - borderColor: alpha(palette.text.secondary, 0.36), - color: alpha(palette.text.secondary, 0.42), + borderColor: palette.mode === "light" ? "#d9d9d9" : "#424242", + color: palette.mode === "light" ? "#8c8c8c" : "#ffffff", borderRadius: 4, fontSize: 10, fontFamily: typography.fontFamily, marginRight: "4px", marginTop: "auto", - padding: "0 2px", - lineHeight: 1.25, + padding: "0 4px", + lineHeight: 1.5, })); const TypeTypo = styled(Box)(({ theme: { palette, typography } }) => ({ diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx index 079f245a..ff73f72e 100644 --- a/src/components/proxy/proxy-item.tsx +++ b/src/components/proxy/proxy-item.tsx @@ -11,6 +11,7 @@ import { styled, SxProps, Theme, + Typography, } from "@mui/material"; import { BaseLoading } from "@/components/base"; import delayManager from "@/services/delay"; @@ -78,19 +79,28 @@ export const ProxyItem = (props: Props) => { sx={[ { borderRadius: 1 }, ({ palette: { mode, primary } }) => { - const bgcolor = - mode === "light" - ? alpha(primary.main, 0.15) - : alpha(primary.main, 0.35); - const color = mode === "light" ? primary.main : primary.light; + const bgcolor = mode === "light" ? "#ffffff" : "#24252f"; + const selectColor = mode === "light" ? primary.main : primary.light; const showDelay = delay > 0; return { "&:hover .the-check": { display: !showDelay ? "block" : "none" }, "&:hover .the-delay": { display: showDelay ? "block" : "none" }, "&:hover .the-icon": { display: "none" }, - "&.Mui-selected": { bgcolor }, - "&.Mui-selected .MuiListItemText-secondary": { color }, + "&:hover ": { + bgcolor: + mode === "light" + ? alpha(primary.main, 0.15) + : alpha(primary.main, 0.35), + }, + "&.Mui-selected": { + borderLeft: `3px solid ${selectColor}`, + bgcolor, + }, + // "&.Mui-selected .MuiListItemText-secondary": { bgcolor }, + backgroundColor: bgcolor, + marginBottom: "8px", + height: "40px", }; }, ]} @@ -99,7 +109,14 @@ export const ProxyItem = (props: Props) => { title={proxy.name} secondary={ <> - + {proxy.name} {showType && proxy.now && ` - ${proxy.now}`} diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx index 45e8d999..288bfbdf 100644 --- a/src/components/proxy/proxy-render.tsx +++ b/src/components/proxy/proxy-render.tsx @@ -17,6 +17,8 @@ import { ProxyItem } from "./proxy-item"; import { ProxyItemMini } from "./proxy-item-mini"; import type { IRenderItem } from "./use-render-list"; import { useVerge } from "@/hooks/use-verge"; +import { useRecoilState } from "recoil"; +import { atomThemeMode } from "@/services/states"; interface RenderProps { item: IRenderItem; @@ -33,11 +35,21 @@ export const ProxyRender = (props: RenderProps) => { const { type, group, headState, proxy, proxyCol } = item; const { verge } = useVerge(); const enable_group_icon = verge?.enable_group_icon ?? true; + const [mode] = useRecoilState(atomThemeMode); + console.log(mode); + const isDark = mode === "light" ? false : true; + const itembackgroundcolor = isDark ? "#282A36" : "#ffffff"; if (type === 0 && !group.hidden) { return ( onHeadState(group.name, { open: !headState?.open })} > {enable_group_icon && @@ -45,8 +57,8 @@ export const ProxyRender = (props: RenderProps) => { group.icon.trim().startsWith("http") && ( )} {enable_group_icon && @@ -54,8 +66,8 @@ export const ProxyRender = (props: RenderProps) => { group.icon.trim().startsWith("data") && ( )} {enable_group_icon && @@ -63,13 +75,14 @@ export const ProxyRender = (props: RenderProps) => { group.icon.trim().startsWith(" )} {group.name}} secondary={ { }} > {group.type} - {group.now} + + {group.now} + } secondaryTypographyProps={{ - sx: { display: "flex", alignItems: "center" }, + sx: { display: "flex", alignItems: "center", color: "#ccc" }, }} /> {headState?.open ? : } @@ -164,8 +184,16 @@ export const ProxyRender = (props: RenderProps) => { return null; }; +const StyledPrimary = styled("span")` + font-size: 14px; + font-weight: 700; + line-height: 1.5; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; const StyledSubtitle = styled("span")` - font-size: 0.8rem; + font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -182,7 +210,7 @@ const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({ color: alpha(theme.palette.primary.main, 0.8), borderRadius: 4, fontSize: 10, - padding: "0 2px", - lineHeight: 1.25, - marginRight: "4px", + padding: "0 4px", + lineHeight: 1.5, + marginRight: "8px", })); diff --git a/src/components/rule/provider-button.tsx b/src/components/rule/provider-button.tsx index 97e87369..a8f7f773 100644 --- a/src/components/rule/provider-button.tsx +++ b/src/components/rule/provider-button.tsx @@ -102,12 +102,12 @@ export const ProviderButton = () => { return ( <> ({ + sx={{ p: 0, borderRadius: "10px", - boxShadow: theme.shadows[2], + border: "solid 2px var(--divider-color)", mb: 1, - })} + }} key={key} > ((props, ref) => { const { t } = useTranslation(); diff --git a/src/components/setting/mods/setting-comp.tsx b/src/components/setting/mods/setting-comp.tsx index e0cd181e..167b5a3b 100644 --- a/src/components/setting/mods/setting-comp.tsx +++ b/src/components/setting/mods/setting-comp.tsx @@ -18,9 +18,11 @@ export const SettingItem: React.FC = (props) => { const { label, extra, children, secondary } = props; const primary = !extra ? ( - label + + {label} + ) : ( - + {label} {extra} @@ -39,7 +41,17 @@ export const SettingList: React.FC<{ children: ReactNode; }> = (props) => ( - + { + return { + color: palette.text.primary, + }; + }, + ]} + disableSticky + > {props.title} diff --git a/src/components/setting/mods/sysproxy-viewer.tsx b/src/components/setting/mods/sysproxy-viewer.tsx index 8e47d005..d032fa90 100644 --- a/src/components/setting/mods/sysproxy-viewer.tsx +++ b/src/components/setting/mods/sysproxy-viewer.tsx @@ -8,13 +8,12 @@ import { ListItem, ListItemText, styled, - Switch, TextField, Typography, } from "@mui/material"; import { useVerge } from "@/hooks/use-verge"; import { getSystemProxy } from "@/services/cmds"; -import { BaseDialog, DialogRef, Notice } from "@/components/base"; +import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base"; export const SysproxyViewer = forwardRef((props, ref) => { const { t } = useTranslation(); diff --git a/src/components/setting/mods/tun-viewer.tsx b/src/components/setting/mods/tun-viewer.tsx index 46f4ec81..a5b9861e 100644 --- a/src/components/setting/mods/tun-viewer.tsx +++ b/src/components/setting/mods/tun-viewer.tsx @@ -8,11 +8,10 @@ import { Box, Typography, Button, - Switch, TextField, } from "@mui/material"; import { useClash } from "@/hooks/use-clash"; -import { BaseDialog, DialogRef, Notice } from "@/components/base"; +import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base"; import { StackModeSwitch } from "./stack-mode-switch"; export const TunViewer = forwardRef((props, ref) => { diff --git a/src/components/setting/setting-clash.tsx b/src/components/setting/setting-clash.tsx index 1b7e6c54..d75dff89 100644 --- a/src/components/setting/setting-clash.tsx +++ b/src/components/setting/setting-clash.tsx @@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next"; import { useLockFn } from "ahooks"; import { TextField, - Switch, Select, MenuItem, Typography, @@ -11,7 +10,7 @@ import { Tooltip, } from "@mui/material"; import { ArrowForward, Settings, Shuffle } from "@mui/icons-material"; -import { DialogRef, Notice } from "@/components/base"; +import { DialogRef, Notice, Switch } from "@/components/base"; import { useClash } from "@/hooks/use-clash"; import { GuardState } from "./mods/guard-state"; import { WebUIViewer } from "./mods/web-ui-viewer"; diff --git a/src/components/setting/setting-system.tsx b/src/components/setting/setting-system.tsx index 10da5a02..5782ad16 100644 --- a/src/components/setting/setting-system.tsx +++ b/src/components/setting/setting-system.tsx @@ -1,11 +1,11 @@ import useSWR from "swr"; import { useRef } from "react"; import { useTranslation } from "react-i18next"; -import { IconButton, Switch, Tooltip } from "@mui/material"; +import { IconButton, Tooltip } from "@mui/material"; import { PrivacyTipRounded, Settings, InfoRounded } from "@mui/icons-material"; import { checkService } from "@/services/cmds"; import { useVerge } from "@/hooks/use-verge"; -import { DialogRef } from "@/components/base"; +import { DialogRef, Switch } from "@/components/base"; import { SettingList, SettingItem } from "./mods/setting-comp"; import { GuardState } from "./mods/guard-state"; import { ServiceViewer } from "./mods/service-viewer"; diff --git a/src/components/test/test-box.tsx b/src/components/test/test-box.tsx index 5e161136..10f4c06c 100644 --- a/src/components/test/test-box.tsx +++ b/src/components/test/test-box.tsx @@ -1,27 +1,22 @@ import { alpha, Box, styled } from "@mui/material"; export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => { - const { mode, primary, text, grey, background } = theme.palette; + const { mode, primary, text } = theme.palette; const key = `${mode}-${!!selected}`; - const backgroundColor = { - "light-true": alpha(primary.main, 0.2), - "light-false": alpha(background.paper, 0.75), - "dark-true": alpha(primary.main, 0.45), - "dark-false": alpha(grey[700], 0.45), - }[key]!; + const backgroundColor = mode === "light" ? "#ffffff" : "#282A36"; const color = { "light-true": text.secondary, "light-false": text.secondary, - "dark-true": alpha(text.secondary, 0.85), + "dark-true": alpha(text.secondary, 0.65), "dark-false": alpha(text.secondary, 0.65), }[key]!; const h2color = { "light-true": primary.main, "light-false": text.primary, - "dark-true": primary.light, + "dark-true": primary.main, "dark-false": text.primary, }[key]!; diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx index ce99159a..814f526e 100644 --- a/src/pages/_layout.tsx +++ b/src/pages/_layout.tsx @@ -13,6 +13,9 @@ import { routers } from "./_routers"; import { getAxios } from "@/services/api"; import { useVerge } from "@/hooks/use-verge"; import LogoSvg from "@/assets/image/logo.svg?react"; +import LogoSvg_dark from "@/assets/image/logo_dark.svg?react"; +import { atomThemeMode } from "@/services/states"; +import { useRecoilState } from "recoil"; import { BaseErrorBoundary, Notice } from "@/components/base"; import { LayoutItem } from "@/components/layout/layout-item"; import { LayoutControl } from "@/components/layout/layout-control"; @@ -31,8 +34,10 @@ dayjs.extend(relativeTime); const OS = getSystem(); const Layout = () => { + const [mode] = useRecoilState(atomThemeMode); + console.log(mode); + const isDark = mode === "light" ? false : true; const { t } = useTranslation(); - const { theme } = useCustomTheme(); const { verge } = useVerge(); @@ -125,14 +130,17 @@ const Layout = () => { >
- - + {!isDark ? : } {!portableFlag && }
{routers.map((router) => ( - + {t(router.label)} ))} diff --git a/src/pages/_routers.tsx b/src/pages/_routers.tsx index 4961050f..778df1a2 100644 --- a/src/pages/_routers.tsx +++ b/src/pages/_routers.tsx @@ -10,36 +10,43 @@ export const routers = [ { label: "Label-Proxies", link: "/", + img: "../../assets/image/itemicon/proxies.svg", ele: ProxiesPage, }, { label: "Label-Profiles", link: "/profile", + img: "../../assets/image/itemicon/profiles.svg", ele: ProfilesPage, }, { label: "Label-Connections", link: "/connections", + img: "../../assets/image/itemicon/connections.svg", ele: ConnectionsPage, }, { label: "Label-Rules", link: "/rules", + img: "../../assets/image/itemicon/rules.svg", ele: RulesPage, }, { label: "Label-Logs", link: "/logs", + img: "../../assets/image/itemicon/logs.svg", ele: LogsPage, }, { label: "Label-Test", link: "/test", + img: "../../assets/image/itemicon/test.svg", ele: TestPage, }, { label: "Label-Settings", link: "/settings", + img: "../../assets/image/itemicon/settings.svg", ele: SettingsPage, }, ]; diff --git a/src/pages/_theme.tsx b/src/pages/_theme.tsx index 895b4f39..64e8275f 100644 --- a/src/pages/_theme.tsx +++ b/src/pages/_theme.tsx @@ -3,15 +3,15 @@ const OS = getSystem(); // default theme setting export const defaultTheme = { - primary_color: "#1867c0", - secondary_color: "#3a88bb", - primary_text: "#1d1d1f", - secondary_text: "#424245", - info_color: "#0288d1", - error_color: "#d32f2f", - warning_color: "#ed6c02", - success_color: "#2e7d32", - background_color: "#ffffff", + primary_color: "#007AFF", + secondary_color: "#FFCC00", + primary_text: "#000000", + secondary_text: "rgba(60, 60, 67, 0.60)", + info_color: "#007AFF", + error_color: "#FF3B30", + warning_color: "#FF9500", + success_color: "#34C759", + background_color: "#f5f5f5", font_family: `"Roboto", "Helvetica", "Arial", sans-serif, ${ OS === "windows" ? "twemoji mozilla" : "" }`, @@ -20,7 +20,13 @@ export const defaultTheme = { // dark mode export const defaultDarkTheme = { ...defaultTheme, - primary_text: "#E8E8ED", - background_color: "#181818", - secondary_text: "#bbbbbb", + primary_color: "#0A84FF", + secondary_color: "#FF9F0A", + primary_text: "#ffffff", + background_color: "#2e303d", + secondary_text: "rgba(235, 235, 245, 0.60)", + info_color: "#0A84FF", + error_color: "#FF453A", + warning_color: "#FF9F0A", + success_color: "#30D158", }; diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 12dbdde1..fd9b3687 100644 --- a/src/pages/settings.tsx +++ b/src/pages/settings.tsx @@ -7,6 +7,9 @@ import { openWebUrl } from "@/services/cmds"; import SettingVerge from "@/components/setting/setting-verge"; import SettingClash from "@/components/setting/setting-clash"; import SettingSystem from "@/components/setting/setting-system"; +import { atomThemeMode } from "@/services/states"; +import { useRecoilState } from "recoil"; +import { useCustomTheme } from "@/components/layout/use-custom-theme"; const SettingPage = () => { const { t } = useTranslation(); @@ -19,12 +22,17 @@ const SettingPage = () => { return openWebUrl("https://github.com/clash-verge-rev/clash-verge-rev"); }); + const [mode] = useRecoilState(atomThemeMode); + console.log(mode); + const isDark = mode === "light" ? false : true; + const { theme } = useCustomTheme(); + return ( { } > - + - + - + - +