feat: 实现多主题系统，支持6套主题切换和设置页面
重构 ThemeContext 为多主题模型（themeId + followSystem + systemIsDark）， 新增设置页面（主题下拉栏 + 跟随系统开关），移除旧 ThemeToggle 按钮， 引入 antd-style 和 clsx 依赖支持 MUI/shadcn/Bootstrap/玻璃主题。
This commit is contained in:
180
frontend/src/themes/bootstrap.ts
Normal file
180
frontend/src/themes/bootstrap.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
import { useMemo } from 'react';
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const useStyles = createStyles(({ css, cssVar }) => {
|
||||
return {
|
||||
boxBorder: css({
|
||||
border: `${cssVar.lineWidth} ${cssVar.lineType} color-mix(in srgb,${cssVar.colorBorder} 80%, #000)`,
|
||||
}),
|
||||
alertRoot: css({
|
||||
color: cssVar.colorInfoText,
|
||||
textShadow: `0 1px 0 rgba(255, 255, 255, 0.8)`,
|
||||
}),
|
||||
modalContainer: css({
|
||||
padding: 0,
|
||||
borderRadius: cssVar.borderRadiusLG,
|
||||
}),
|
||||
modalHeader: css({
|
||||
borderBottom: `${cssVar.lineWidth} ${cssVar.lineType} ${cssVar.colorSplit}`,
|
||||
padding: `${cssVar.padding} ${cssVar.paddingLG}`,
|
||||
}),
|
||||
modalBody: css({
|
||||
padding: `${cssVar.padding} ${cssVar.paddingLG}`,
|
||||
}),
|
||||
modalFooter: css({
|
||||
borderTop: `${cssVar.lineWidth} ${cssVar.lineType} ${cssVar.colorSplit}`,
|
||||
padding: `${cssVar.padding} ${cssVar.paddingLG}`,
|
||||
backgroundColor: cssVar.colorBgContainerDisabled,
|
||||
boxShadow: `inset 0 1px 0 ${cssVar.colorBgContainer}`,
|
||||
}),
|
||||
buttonRoot: css({
|
||||
backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2))`,
|
||||
boxShadow: `inset 0 1px 0 rgba(255, 255, 255, 0.15)`,
|
||||
transition: 'none',
|
||||
borderColor: `rgba(0, 0, 0, 0.3)`,
|
||||
textShadow: `0 -1px 0 rgba(0, 0, 0, 0.2)`,
|
||||
'&:hover, &:active': {
|
||||
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.15) 100%)`,
|
||||
},
|
||||
'&:active': {
|
||||
boxShadow: `inset 0 1px 3px rgba(0, 0, 0, 0.15)`,
|
||||
},
|
||||
}),
|
||||
buttonColorDefault: css({
|
||||
textShadow: 'none',
|
||||
color: cssVar.colorText,
|
||||
borderBottomColor: 'rgba(0, 0, 0, 0.5)',
|
||||
}),
|
||||
popupBox: css({
|
||||
borderRadius: cssVar.borderRadiusLG,
|
||||
backgroundColor: cssVar.colorBgContainer,
|
||||
ul: {
|
||||
paddingInline: 0,
|
||||
},
|
||||
}),
|
||||
dropdownItem: css({
|
||||
borderRadius: 0,
|
||||
transition: 'none',
|
||||
paddingBlock: cssVar.paddingXXS,
|
||||
paddingInline: cssVar.padding,
|
||||
'&:hover, &:active, &:focus': {
|
||||
backgroundImage: `linear-gradient(to bottom, ${cssVar.colorPrimaryHover}, ${cssVar.colorPrimary})`,
|
||||
color: cssVar.colorTextLightSolid,
|
||||
},
|
||||
}),
|
||||
selectPopupRoot: css({
|
||||
paddingInline: 0,
|
||||
}),
|
||||
switchRoot: css({
|
||||
boxShadow: `inset 0 1px 3px rgba(0, 0, 0, 0.4)`,
|
||||
}),
|
||||
progressTrack: css({
|
||||
backgroundImage: `linear-gradient(to bottom, ${cssVar.colorPrimaryHover}, ${cssVar.colorPrimary})`,
|
||||
borderRadius: cssVar.borderRadiusSM,
|
||||
}),
|
||||
progressRail: css({
|
||||
borderRadius: cssVar.borderRadiusSM,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const useBootstrapTheme = () => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
return useMemo<ConfigProviderProps>(
|
||||
() => ({
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
token: {
|
||||
borderRadius: 4,
|
||||
borderRadiusLG: 6,
|
||||
colorInfo: '#3a87ad',
|
||||
},
|
||||
components: {
|
||||
Tooltip: {
|
||||
fontSize: 12,
|
||||
},
|
||||
Checkbox: {
|
||||
colorBorder: '#666',
|
||||
borderRadius: 2,
|
||||
algorithm: true,
|
||||
},
|
||||
Radio: {
|
||||
colorBorder: '#666',
|
||||
borderRadius: 2,
|
||||
algorithm: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
wave: {
|
||||
showEffect: () => {},
|
||||
},
|
||||
modal: {
|
||||
classNames: {
|
||||
container: clsx(styles.boxBorder, styles.modalContainer),
|
||||
header: styles.modalHeader,
|
||||
body: styles.modalBody,
|
||||
footer: styles.modalFooter,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(styles.buttonRoot, props.color === 'default' && styles.buttonColorDefault),
|
||||
}),
|
||||
},
|
||||
alert: {
|
||||
className: styles.alertRoot,
|
||||
},
|
||||
colorPicker: {
|
||||
classNames: {
|
||||
root: styles.boxBorder,
|
||||
popup: {
|
||||
root: clsx(styles.boxBorder, styles.popupBox),
|
||||
},
|
||||
},
|
||||
arrow: false,
|
||||
},
|
||||
checkbox: {
|
||||
classNames: {},
|
||||
},
|
||||
dropdown: {
|
||||
classNames: {
|
||||
root: clsx(styles.boxBorder, styles.popupBox),
|
||||
item: styles.dropdownItem,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
classNames: {
|
||||
root: styles.boxBorder,
|
||||
popup: {
|
||||
root: clsx(styles.boxBorder, styles.selectPopupRoot),
|
||||
listItem: styles.dropdownItem,
|
||||
},
|
||||
},
|
||||
},
|
||||
switch: {
|
||||
classNames: {
|
||||
root: styles.switchRoot,
|
||||
},
|
||||
},
|
||||
progress: {
|
||||
classNames: {
|
||||
track: styles.progressTrack,
|
||||
rail: styles.progressRail,
|
||||
},
|
||||
styles: {
|
||||
rail: {
|
||||
height: 20,
|
||||
},
|
||||
track: { height: 20 },
|
||||
},
|
||||
},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
};
|
||||
|
||||
export default useBootstrapTheme;
|
||||
10
frontend/src/themes/dark.ts
Normal file
10
frontend/src/themes/dark.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
|
||||
const useDarkTheme = (): ConfigProviderProps => ({
|
||||
theme: {
|
||||
algorithm: theme.darkAlgorithm,
|
||||
},
|
||||
});
|
||||
|
||||
export default useDarkTheme;
|
||||
10
frontend/src/themes/default.ts
Normal file
10
frontend/src/themes/default.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
|
||||
const useDefaultTheme = (): ConfigProviderProps => ({
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
},
|
||||
});
|
||||
|
||||
export default useDefaultTheme;
|
||||
214
frontend/src/themes/glass.ts
Normal file
214
frontend/src/themes/glass.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { useMemo } from 'react';
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const useStyles = createStyles(({ css, cssVar }) => {
|
||||
const glassBorder = {
|
||||
boxShadow: [
|
||||
`${cssVar.boxShadowSecondary}`,
|
||||
`inset 0 0 5px 2px rgba(255, 255, 255, 0.3)`,
|
||||
`inset 0 5px 2px rgba(255, 255, 255, 0.2)`,
|
||||
].join(','),
|
||||
};
|
||||
|
||||
const glassBox = {
|
||||
...glassBorder,
|
||||
background: `color-mix(in srgb, ${cssVar.colorBgContainer} 15%, transparent)`,
|
||||
backdropFilter: 'blur(12px)',
|
||||
};
|
||||
|
||||
return {
|
||||
glassBorder,
|
||||
glassBox,
|
||||
notBackdropFilter: css({
|
||||
backdropFilter: 'none',
|
||||
}),
|
||||
app: css({
|
||||
textShadow: '0 1px rgba(0,0,0,0.1)',
|
||||
}),
|
||||
cardRoot: css({
|
||||
...glassBox,
|
||||
backgroundColor: `color-mix(in srgb, ${cssVar.colorBgContainer} 40%, transparent)`,
|
||||
}),
|
||||
modalContainer: css({
|
||||
...glassBox,
|
||||
backdropFilter: 'none',
|
||||
}),
|
||||
buttonRoot: css({
|
||||
...glassBorder,
|
||||
}),
|
||||
buttonRootDefaultColor: css({
|
||||
background: 'transparent',
|
||||
color: cssVar.colorText,
|
||||
'&:hover': {
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
color: `color-mix(in srgb, ${cssVar.colorText} 90%, transparent)`,
|
||||
},
|
||||
'&:active': {
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
color: `color-mix(in srgb, ${cssVar.colorText} 80%, transparent)`,
|
||||
},
|
||||
}),
|
||||
dropdownRoot: css({
|
||||
...glassBox,
|
||||
borderRadius: cssVar.borderRadiusLG,
|
||||
ul: {
|
||||
background: 'transparent',
|
||||
},
|
||||
}),
|
||||
switchRoot: css({ ...glassBorder, border: 'none' }),
|
||||
segmentedRoot: css({
|
||||
...glassBorder,
|
||||
background: 'transparent',
|
||||
backdropFilter: 'none',
|
||||
'& .ant-segmented-thumb': {
|
||||
...glassBox,
|
||||
},
|
||||
'& .ant-segmented-item-selected': {
|
||||
...glassBox,
|
||||
},
|
||||
}),
|
||||
radioButtonRoot: css({
|
||||
'&.ant-radio-button-wrapper': {
|
||||
...glassBorder,
|
||||
background: 'transparent',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
color: cssVar.colorText,
|
||||
'&:hover': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.24)',
|
||||
color: cssVar.colorText,
|
||||
},
|
||||
'&.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)': {
|
||||
...glassBox,
|
||||
borderColor: 'rgba(255, 255, 255, 0.28)',
|
||||
color: cssVar.colorText,
|
||||
'&::before': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.18)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: cssVar.colorText,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const useGlassTheme = () => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
return useMemo<ConfigProviderProps>(
|
||||
() => ({
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
token: {
|
||||
borderRadius: 12,
|
||||
borderRadiusLG: 12,
|
||||
borderRadiusSM: 12,
|
||||
borderRadiusXS: 12,
|
||||
motionDurationSlow: '0.2s',
|
||||
motionDurationMid: '0.1s',
|
||||
motionDurationFast: '0.05s',
|
||||
},
|
||||
},
|
||||
app: {
|
||||
className: styles.app,
|
||||
},
|
||||
card: {
|
||||
classNames: {
|
||||
root: styles.cardRoot,
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
classNames: {
|
||||
container: styles.modalContainer,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(
|
||||
styles.buttonRoot,
|
||||
(props.variant !== 'solid' || props.color === 'default' || props.type === 'default') &&
|
||||
styles.buttonRootDefaultColor,
|
||||
),
|
||||
}),
|
||||
},
|
||||
alert: {
|
||||
className: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
},
|
||||
colorPicker: {
|
||||
classNames: {
|
||||
root: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
},
|
||||
arrow: false,
|
||||
},
|
||||
dropdown: {
|
||||
classNames: {
|
||||
root: styles.dropdownRoot,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
classNames: {
|
||||
root: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
popup: {
|
||||
root: styles.glassBox,
|
||||
},
|
||||
},
|
||||
},
|
||||
datePicker: {
|
||||
classNames: {
|
||||
root: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
popup: {
|
||||
container: styles.glassBox,
|
||||
},
|
||||
},
|
||||
},
|
||||
input: {
|
||||
classNames: {
|
||||
root: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
},
|
||||
},
|
||||
inputNumber: {
|
||||
classNames: {
|
||||
root: clsx(styles.glassBox, styles.notBackdropFilter),
|
||||
},
|
||||
},
|
||||
popover: {
|
||||
classNames: {
|
||||
container: styles.glassBox,
|
||||
},
|
||||
},
|
||||
switch: {
|
||||
classNames: {
|
||||
root: styles.switchRoot,
|
||||
},
|
||||
},
|
||||
radio: {
|
||||
classNames: {
|
||||
root: styles.radioButtonRoot,
|
||||
},
|
||||
},
|
||||
segmented: {
|
||||
className: styles.segmentedRoot,
|
||||
},
|
||||
progress: {
|
||||
classNames: {
|
||||
track: styles.glassBorder,
|
||||
},
|
||||
styles: {
|
||||
track: {
|
||||
height: 12,
|
||||
},
|
||||
rail: {
|
||||
height: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
};
|
||||
|
||||
export default useGlassTheme;
|
||||
49
frontend/src/themes/index.ts
Normal file
49
frontend/src/themes/index.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
import useDefaultTheme from './default';
|
||||
import useDarkTheme from './dark';
|
||||
import useMuiTheme from './mui';
|
||||
import useShadcnTheme from './shadcn';
|
||||
import useBootstrapTheme from './bootstrap';
|
||||
import useGlassTheme from './glass';
|
||||
|
||||
export type ThemeId = 'default' | 'dark' | 'mui' | 'shadcn' | 'bootstrap' | 'glass';
|
||||
|
||||
export interface ThemeOption {
|
||||
id: ThemeId;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const themeOptions: ThemeOption[] = [
|
||||
{ id: 'default', label: '默认' },
|
||||
{ id: 'dark', label: '暗黑' },
|
||||
{ id: 'mui', label: 'MUI' },
|
||||
{ id: 'shadcn', label: 'shadcn' },
|
||||
{ id: 'bootstrap', label: 'Bootstrap' },
|
||||
{ id: 'glass', label: '玻璃' },
|
||||
];
|
||||
|
||||
const themeIdSet = new Set<ThemeId>(themeOptions.map((opt) => opt.id));
|
||||
|
||||
export function useThemeConfig(themeId: ThemeId): ConfigProviderProps {
|
||||
const defaultConfig = useDefaultTheme();
|
||||
const darkConfig = useDarkTheme();
|
||||
const muiConfig = useMuiTheme();
|
||||
const shadcnConfig = useShadcnTheme();
|
||||
const bootstrapConfig = useBootstrapTheme();
|
||||
const glassConfig = useGlassTheme();
|
||||
|
||||
const configs: Record<ThemeId, ConfigProviderProps> = {
|
||||
default: defaultConfig,
|
||||
dark: darkConfig,
|
||||
mui: muiConfig,
|
||||
shadcn: shadcnConfig,
|
||||
bootstrap: bootstrapConfig,
|
||||
glass: glassConfig,
|
||||
};
|
||||
|
||||
return configs[themeId] ?? configs.default;
|
||||
}
|
||||
|
||||
export function isValidThemeId(value: string): value is ThemeId {
|
||||
return themeIdSet.has(value as ThemeId);
|
||||
}
|
||||
281
frontend/src/themes/mui.ts
Normal file
281
frontend/src/themes/mui.ts
Normal file
@@ -0,0 +1,281 @@
|
||||
import { useMemo } from 'react';
|
||||
import raf from '@rc-component/util/lib/raf';
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps, GetProp } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import clsx from 'clsx';
|
||||
|
||||
type WaveConfig = GetProp<ConfigProviderProps, 'wave'>;
|
||||
|
||||
const createHolder = (node: HTMLElement) => {
|
||||
const { borderWidth } = getComputedStyle(node);
|
||||
const borderWidthNum = Number.parseInt(borderWidth, 10);
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.style.position = 'absolute';
|
||||
div.style.inset = `-${borderWidthNum}px`;
|
||||
div.style.borderRadius = 'inherit';
|
||||
div.style.background = 'transparent';
|
||||
div.style.zIndex = '999';
|
||||
div.style.pointerEvents = 'none';
|
||||
div.style.overflow = 'hidden';
|
||||
node.appendChild(div);
|
||||
|
||||
return div;
|
||||
};
|
||||
|
||||
const createDot = (holder: HTMLElement, color: string, left: number, top: number, size = 0) => {
|
||||
const dot = document.createElement('div');
|
||||
dot.style.position = 'absolute';
|
||||
dot.style.left = `${left}px`;
|
||||
dot.style.top = `${top}px`;
|
||||
dot.style.width = `${size}px`;
|
||||
dot.style.height = `${size}px`;
|
||||
dot.style.borderRadius = '50%';
|
||||
dot.style.background = color;
|
||||
dot.style.transform = 'translate3d(-50%, -50%, 0)';
|
||||
dot.style.transition = 'all 1s ease-out';
|
||||
holder.appendChild(dot);
|
||||
return dot;
|
||||
};
|
||||
|
||||
const showInsetEffect: WaveConfig['showEffect'] = (node, { event, component }) => {
|
||||
if (component !== 'Button') {
|
||||
return;
|
||||
}
|
||||
|
||||
const holder = createHolder(node);
|
||||
const rect = holder.getBoundingClientRect();
|
||||
const left = event.clientX - rect.left;
|
||||
const top = event.clientY - rect.top;
|
||||
const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top);
|
||||
|
||||
raf(() => {
|
||||
dot.ontransitionend = () => {
|
||||
holder.remove();
|
||||
};
|
||||
|
||||
dot.style.width = '200px';
|
||||
dot.style.height = '200px';
|
||||
dot.style.opacity = '0';
|
||||
});
|
||||
};
|
||||
|
||||
const useStyles = createStyles(({ css }) => {
|
||||
return {
|
||||
buttonPrimary: css({
|
||||
backgroundColor: '#1976d2',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.02857em',
|
||||
boxShadow:
|
||||
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
buttonDefault: css({
|
||||
backgroundColor: '#ffffff',
|
||||
color: 'rgba(0, 0, 0, 0.87)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.23)',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.02857em',
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
buttonDanger: css({
|
||||
backgroundColor: '#d32f2f',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
fontWeight: 500,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.02857em',
|
||||
boxShadow:
|
||||
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
|
||||
}),
|
||||
inputRoot: css({
|
||||
borderColor: 'rgba(0, 0, 0, 0.23)',
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
inputElement: css({
|
||||
color: 'rgba(0, 0, 0, 0.87)',
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
||||
}),
|
||||
inputError: css({
|
||||
borderColor: '#d32f2f',
|
||||
}),
|
||||
selectRoot: css({
|
||||
borderColor: 'rgba(0, 0, 0, 0.23)',
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
||||
}),
|
||||
selectPopup: css({
|
||||
borderRadius: '4px',
|
||||
boxShadow:
|
||||
'0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const useMuiTheme = () => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
return useMemo<ConfigProviderProps>(
|
||||
() => ({
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
token: {
|
||||
colorPrimary: '#1976d2',
|
||||
colorSuccess: '#2e7d32',
|
||||
colorWarning: '#ed6c02',
|
||||
colorError: '#d32f2f',
|
||||
colorInfo: '#0288d1',
|
||||
colorTextBase: '#212121',
|
||||
colorBgBase: '#fafafa',
|
||||
colorPrimaryBg: '#e3f2fd',
|
||||
colorPrimaryBgHover: '#bbdefb',
|
||||
colorPrimaryBorder: '#90caf9',
|
||||
colorPrimaryBorderHover: '#64b5f6',
|
||||
colorPrimaryHover: '#42a5f5',
|
||||
colorPrimaryActive: '#1565c0',
|
||||
colorPrimaryText: '#1976d2',
|
||||
colorPrimaryTextHover: '#42a5f5',
|
||||
colorPrimaryTextActive: '#1565c0',
|
||||
colorSuccessBg: '#e8f5e9',
|
||||
colorSuccessBgHover: '#c8e6c9',
|
||||
colorSuccessBorder: '#a5d6a7',
|
||||
colorSuccessBorderHover: '#81c784',
|
||||
colorSuccessHover: '#4caf50',
|
||||
colorSuccessActive: '#1b5e20',
|
||||
colorSuccessText: '#2e7d32',
|
||||
colorSuccessTextHover: '#4caf50',
|
||||
colorSuccessTextActive: '#1b5e20',
|
||||
colorWarningBg: '#fff3e0',
|
||||
colorWarningBgHover: '#ffe0b2',
|
||||
colorWarningBorder: '#ffcc02',
|
||||
colorWarningBorderHover: '#ffb74d',
|
||||
colorWarningHover: '#ff9800',
|
||||
colorWarningActive: '#e65100',
|
||||
colorWarningText: '#ed6c02',
|
||||
colorWarningTextHover: '#ff9800',
|
||||
colorWarningTextActive: '#e65100',
|
||||
colorErrorBg: '#ffebee',
|
||||
colorErrorBgHover: '#ffcdd2',
|
||||
colorErrorBorder: '#ef9a9a',
|
||||
colorErrorBorderHover: '#e57373',
|
||||
colorErrorHover: '#ef5350',
|
||||
colorErrorActive: '#c62828',
|
||||
colorErrorText: '#d32f2f',
|
||||
colorErrorTextHover: '#ef5350',
|
||||
colorErrorTextActive: '#c62828',
|
||||
colorInfoBg: '#e1f5fe',
|
||||
colorInfoBgHover: '#b3e5fc',
|
||||
colorInfoBorder: '#81d4fa',
|
||||
colorInfoBorderHover: '#4fc3f7',
|
||||
colorInfoHover: '#03a9f4',
|
||||
colorInfoActive: '#01579b',
|
||||
colorInfoText: '#0288d1',
|
||||
colorInfoTextHover: '#03a9f4',
|
||||
colorInfoTextActive: '#01579b',
|
||||
colorText: 'rgba(33, 33, 33, 0.87)',
|
||||
colorTextSecondary: 'rgba(33, 33, 33, 0.6)',
|
||||
colorTextTertiary: 'rgba(33, 33, 33, 0.38)',
|
||||
colorTextQuaternary: 'rgba(33, 33, 33, 0.26)',
|
||||
colorTextDisabled: 'rgba(33, 33, 33, 0.38)',
|
||||
colorBgContainer: '#ffffff',
|
||||
colorBgElevated: '#ffffff',
|
||||
colorBgLayout: '#f5f5f5',
|
||||
colorBgSpotlight: 'rgba(33, 33, 33, 0.85)',
|
||||
colorBgMask: 'rgba(33, 33, 33, 0.5)',
|
||||
colorBorder: '#e0e0e0',
|
||||
colorBorderSecondary: '#eeeeee',
|
||||
borderRadius: 4,
|
||||
borderRadiusXS: 1,
|
||||
borderRadiusSM: 2,
|
||||
borderRadiusLG: 6,
|
||||
padding: 16,
|
||||
paddingSM: 8,
|
||||
paddingLG: 24,
|
||||
margin: 16,
|
||||
marginSM: 8,
|
||||
marginLG: 24,
|
||||
boxShadow:
|
||||
'0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
|
||||
boxShadowSecondary:
|
||||
'0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
primaryShadow:
|
||||
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
|
||||
defaultShadow:
|
||||
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
|
||||
dangerShadow:
|
||||
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
|
||||
fontWeight: 500,
|
||||
defaultBorderColor: 'rgba(0, 0, 0, 0.23)',
|
||||
defaultColor: 'rgba(0, 0, 0, 0.87)',
|
||||
defaultBg: '#ffffff',
|
||||
defaultHoverBg: 'rgba(25, 118, 210, 0.04)',
|
||||
defaultHoverBorderColor: 'rgba(0, 0, 0, 0.23)',
|
||||
paddingInline: 16,
|
||||
paddingBlock: 6,
|
||||
contentFontSize: 14,
|
||||
borderRadius: 4,
|
||||
},
|
||||
Alert: {
|
||||
borderRadiusLG: 4,
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 4,
|
||||
},
|
||||
Progress: {
|
||||
defaultColor: '#1976d2',
|
||||
remainingColor: 'rgba(25, 118, 210, 0.12)',
|
||||
},
|
||||
Steps: {
|
||||
iconSize: 24,
|
||||
},
|
||||
Checkbox: {
|
||||
borderRadiusSM: 2,
|
||||
},
|
||||
Slider: {
|
||||
trackBg: 'rgba(25, 118, 210, 0.26)',
|
||||
trackHoverBg: 'rgba(25, 118, 210, 0.38)',
|
||||
handleSize: 20,
|
||||
handleSizeHover: 20,
|
||||
railSize: 4,
|
||||
},
|
||||
ColorPicker: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
wave: {
|
||||
showEffect: showInsetEffect,
|
||||
},
|
||||
button: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(
|
||||
props.type === 'primary' && styles.buttonPrimary,
|
||||
props.type === 'default' && styles.buttonDefault,
|
||||
props.danger && styles.buttonDanger,
|
||||
),
|
||||
}),
|
||||
},
|
||||
input: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(styles.inputRoot, props.status === 'error' && styles.inputError),
|
||||
input: styles.inputElement,
|
||||
}),
|
||||
},
|
||||
select: {
|
||||
classNames: {
|
||||
root: styles.selectRoot,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[styles],
|
||||
);
|
||||
};
|
||||
|
||||
export default useMuiTheme;
|
||||
221
frontend/src/themes/shadcn.ts
Normal file
221
frontend/src/themes/shadcn.ts
Normal file
@@ -0,0 +1,221 @@
|
||||
import { useMemo } from 'react';
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const useStyles = createStyles(({ css }) => {
|
||||
return {
|
||||
buttonPrimary: css({
|
||||
backgroundColor: '#18181b',
|
||||
color: '#ffffff',
|
||||
border: '1px solid #18181b',
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
buttonDefault: css({
|
||||
backgroundColor: '#ffffff',
|
||||
color: '#18181b',
|
||||
border: '1px solid #e4e4e7',
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
buttonDanger: css({
|
||||
backgroundColor: '#dc2626',
|
||||
color: '#ffffff',
|
||||
border: '1px solid #dc2626',
|
||||
fontWeight: 500,
|
||||
}),
|
||||
inputRoot: css({
|
||||
borderColor: '#e4e4e7',
|
||||
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}),
|
||||
inputElement: css({
|
||||
color: '#18181b',
|
||||
}),
|
||||
inputError: css({
|
||||
borderColor: '#dc2626',
|
||||
}),
|
||||
selectRoot: css({
|
||||
borderColor: '#e4e4e7',
|
||||
}),
|
||||
selectPopup: css({
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const useShadcnTheme = () => {
|
||||
const { styles } = useStyles();
|
||||
|
||||
return useMemo<ConfigProviderProps>(
|
||||
() => ({
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
token: {
|
||||
colorPrimary: '#262626',
|
||||
colorSuccess: '#22c55e',
|
||||
colorWarning: '#f97316',
|
||||
colorError: '#ef4444',
|
||||
colorInfo: '#262626',
|
||||
colorTextBase: '#262626',
|
||||
colorBgBase: '#ffffff',
|
||||
colorPrimaryBg: '#f5f5f5',
|
||||
colorPrimaryBgHover: '#e5e5e5',
|
||||
colorPrimaryBorder: '#d4d4d4',
|
||||
colorPrimaryBorderHover: '#a3a3a3',
|
||||
colorPrimaryHover: '#404040',
|
||||
colorPrimaryActive: '#171717',
|
||||
colorPrimaryText: '#262626',
|
||||
colorPrimaryTextHover: '#404040',
|
||||
colorPrimaryTextActive: '#171717',
|
||||
colorSuccessBg: '#f0fdf4',
|
||||
colorSuccessBgHover: '#dcfce7',
|
||||
colorSuccessBorder: '#bbf7d0',
|
||||
colorSuccessBorderHover: '#86efac',
|
||||
colorSuccessHover: '#16a34a',
|
||||
colorSuccessActive: '#15803d',
|
||||
colorSuccessText: '#16a34a',
|
||||
colorSuccessTextHover: '#16a34a',
|
||||
colorSuccessTextActive: '#15803d',
|
||||
colorWarningBg: '#fff7ed',
|
||||
colorWarningBgHover: '#fed7aa',
|
||||
colorWarningBorder: '#fdba74',
|
||||
colorWarningBorderHover: '#fb923c',
|
||||
colorWarningHover: '#ea580c',
|
||||
colorWarningActive: '#c2410c',
|
||||
colorWarningText: '#ea580c',
|
||||
colorWarningTextHover: '#ea580c',
|
||||
colorWarningTextActive: '#c2410c',
|
||||
colorErrorBg: '#fef2f2',
|
||||
colorErrorBgHover: '#fecaca',
|
||||
colorErrorBorder: '#fca5a5',
|
||||
colorErrorBorderHover: '#f87171',
|
||||
colorErrorHover: '#dc2626',
|
||||
colorErrorActive: '#b91c1c',
|
||||
colorErrorText: '#dc2626',
|
||||
colorErrorTextHover: '#dc2626',
|
||||
colorErrorTextActive: '#b91c1c',
|
||||
colorInfoBg: '#f5f5f5',
|
||||
colorInfoBgHover: '#e5e5e5',
|
||||
colorInfoBorder: '#d4d4d4',
|
||||
colorInfoBorderHover: '#a3a3a3',
|
||||
colorInfoHover: '#404040',
|
||||
colorInfoActive: '#171717',
|
||||
colorInfoText: '#262626',
|
||||
colorInfoTextHover: '#404040',
|
||||
colorInfoTextActive: '#171717',
|
||||
colorText: '#262626',
|
||||
colorTextSecondary: '#525252',
|
||||
colorTextTertiary: '#737373',
|
||||
colorTextQuaternary: '#a3a3a3',
|
||||
colorTextDisabled: '#a3a3a3',
|
||||
colorBgContainer: '#ffffff',
|
||||
colorBgElevated: '#ffffff',
|
||||
colorBgLayout: '#fafafa',
|
||||
colorBgSpotlight: 'rgba(38, 38, 38, 0.85)',
|
||||
colorBgMask: 'rgba(38, 38, 38, 0.45)',
|
||||
colorBorder: '#e5e5e5',
|
||||
colorBorderSecondary: '#f5f5f5',
|
||||
borderRadius: 10,
|
||||
borderRadiusXS: 2,
|
||||
borderRadiusSM: 6,
|
||||
borderRadiusLG: 14,
|
||||
padding: 16,
|
||||
paddingSM: 12,
|
||||
paddingLG: 24,
|
||||
margin: 16,
|
||||
marginSM: 12,
|
||||
marginLG: 24,
|
||||
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
|
||||
boxShadowSecondary:
|
||||
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
primaryShadow: 'none',
|
||||
defaultShadow: 'none',
|
||||
dangerShadow: 'none',
|
||||
defaultBorderColor: '#e4e4e7',
|
||||
defaultColor: '#18181b',
|
||||
defaultBg: '#ffffff',
|
||||
defaultHoverBg: '#f4f4f5',
|
||||
defaultHoverBorderColor: '#d4d4d8',
|
||||
defaultHoverColor: '#18181b',
|
||||
defaultActiveBg: '#e4e4e7',
|
||||
defaultActiveBorderColor: '#d4d4d8',
|
||||
borderRadius: 6,
|
||||
},
|
||||
Input: {
|
||||
activeShadow: 'none',
|
||||
hoverBorderColor: '#a1a1aa',
|
||||
activeBorderColor: '#18181b',
|
||||
borderRadius: 6,
|
||||
},
|
||||
Select: {
|
||||
optionSelectedBg: '#f4f4f5',
|
||||
optionActiveBg: '#fafafa',
|
||||
optionSelectedFontWeight: 500,
|
||||
borderRadius: 6,
|
||||
},
|
||||
Alert: {
|
||||
borderRadiusLG: 8,
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 12,
|
||||
},
|
||||
Progress: {
|
||||
defaultColor: '#18181b',
|
||||
remainingColor: '#f4f4f5',
|
||||
},
|
||||
Steps: {
|
||||
iconSize: 32,
|
||||
},
|
||||
Switch: {
|
||||
trackHeight: 24,
|
||||
trackMinWidth: 44,
|
||||
innerMinMargin: 4,
|
||||
innerMaxMargin: 24,
|
||||
},
|
||||
Checkbox: {
|
||||
borderRadiusSM: 4,
|
||||
},
|
||||
Slider: {
|
||||
trackBg: '#f4f4f5',
|
||||
trackHoverBg: '#e4e4e7',
|
||||
handleSize: 18,
|
||||
handleSizeHover: 20,
|
||||
railSize: 6,
|
||||
},
|
||||
ColorPicker: {
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
button: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(
|
||||
props.type === 'primary' && styles.buttonPrimary,
|
||||
props.type === 'default' && styles.buttonDefault,
|
||||
props.danger && styles.buttonDanger,
|
||||
),
|
||||
}),
|
||||
},
|
||||
input: {
|
||||
classNames: ({ props }) => ({
|
||||
root: clsx(styles.inputRoot, props.status === 'error' && styles.inputError),
|
||||
input: styles.inputElement,
|
||||
}),
|
||||
},
|
||||
select: {
|
||||
classNames: {
|
||||
root: styles.selectRoot,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[styles],
|
||||
);
|
||||
};
|
||||
|
||||
export default useShadcnTheme;
|
||||
Reference in New Issue
Block a user