init
This commit is contained in:
52
src/theme/preset/azir.json
Normal file
52
src/theme/preset/azir.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "Azir's Preset",
|
||||
"desc": "It is a cold and elegant preset that Azir likes",
|
||||
"i18nkey": "theme.appearance.preset.azir",
|
||||
"version": "1.0.1",
|
||||
"themeScheme": "light",
|
||||
"recommendColor": true,
|
||||
"themeColor": "#78a878",
|
||||
"otherColor": {
|
||||
"info": "#89b989",
|
||||
"success": "#99c299",
|
||||
"warning": "#d4bb9d",
|
||||
"error": "#c49a9a"
|
||||
},
|
||||
"isInfoFollowPrimary": true,
|
||||
"tokens": {
|
||||
"light": {
|
||||
"colors": {
|
||||
"container": "rgb(255, 255, 255)",
|
||||
"layout": "rgb(247, 250, 252)",
|
||||
"inverted": "rgb(0, 20, 40)",
|
||||
"base-text": "rgb(31, 31, 31)"
|
||||
},
|
||||
"boxShadow": {
|
||||
"header": "0 1px 2px rgb(0, 21, 41, 0.08)",
|
||||
"sider": "2px 0 8px 0 rgb(29, 35, 41, 0.05)",
|
||||
"tab": "0 1px 2px rgb(0, 21, 41, 0.08)"
|
||||
}
|
||||
},
|
||||
"dark": {
|
||||
"colors": {
|
||||
"container": "rgb(28, 28, 28)",
|
||||
"layout": "rgb(18, 18, 18)",
|
||||
"base-text": "rgb(224, 224, 224)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"naiveui": {
|
||||
"Alert": {
|
||||
"borderRadiusMedium": "12px",
|
||||
"fontWeightStrong": "600",
|
||||
"paddingMedium": "0 20px"
|
||||
},
|
||||
"Card": {
|
||||
"borderRadius": "16px",
|
||||
"paddingMedium": "24px"
|
||||
},
|
||||
"Input": {
|
||||
"borderRadius": "10px"
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/theme/preset/compact.json
Normal file
37
src/theme/preset/compact.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "Compact Preset",
|
||||
"desc": "Compact layout preset for small screens",
|
||||
"i18nkey": "theme.appearance.preset.compact",
|
||||
"version": "1.0.1",
|
||||
"themeRadius": 6,
|
||||
"header": {
|
||||
"height": 48,
|
||||
"breadcrumb": {
|
||||
"visible": false
|
||||
},
|
||||
"multilingual": {
|
||||
"visible": false
|
||||
},
|
||||
"globalSearch": {
|
||||
"visible": false
|
||||
}
|
||||
},
|
||||
"tab": {
|
||||
"visible": true,
|
||||
"cache": true,
|
||||
"height": 36,
|
||||
"mode": "button",
|
||||
"closeTabByMiddleClick": false
|
||||
},
|
||||
"sider": {
|
||||
"inverted": false,
|
||||
"width": 180,
|
||||
"collapsedWidth": 48,
|
||||
"mixWidth": 80,
|
||||
"mixCollapsedWidth": 48,
|
||||
"mixChildMenuWidth": 180
|
||||
},
|
||||
"footer": {
|
||||
"visible": false
|
||||
}
|
||||
}
|
||||
91
src/theme/preset/dark.json
Normal file
91
src/theme/preset/dark.json
Normal file
@@ -0,0 +1,91 @@
|
||||
{
|
||||
"name": "Dark Preset",
|
||||
"desc": "Dark theme preset for night time usage",
|
||||
"i18nkey": "theme.appearance.preset.dark",
|
||||
"version": "1.0.1",
|
||||
"themeScheme": "dark",
|
||||
"grayscale": false,
|
||||
"colourWeakness": false,
|
||||
"recommendColor": false,
|
||||
"themeColor": "#646cff",
|
||||
"otherColor": {
|
||||
"info": "#2080f0",
|
||||
"success": "#52c41a",
|
||||
"warning": "#faad14",
|
||||
"error": "#f5222d"
|
||||
},
|
||||
"themeRadius": 6,
|
||||
"isInfoFollowPrimary": true,
|
||||
"layout": {
|
||||
"mode": "vertical",
|
||||
"scrollMode": "content"
|
||||
},
|
||||
"page": {
|
||||
"animate": true,
|
||||
"animateMode": "fade-slide"
|
||||
},
|
||||
"header": {
|
||||
"height": 56,
|
||||
"breadcrumb": {
|
||||
"visible": true,
|
||||
"showIcon": true
|
||||
},
|
||||
"multilingual": {
|
||||
"visible": true
|
||||
},
|
||||
"globalSearch": {
|
||||
"visible": true
|
||||
}
|
||||
},
|
||||
"tab": {
|
||||
"visible": true,
|
||||
"cache": true,
|
||||
"height": 44,
|
||||
"mode": "chrome",
|
||||
"closeTabByMiddleClick": false
|
||||
},
|
||||
"fixedHeaderAndTab": true,
|
||||
"sider": {
|
||||
"inverted": false,
|
||||
"width": 220,
|
||||
"collapsedWidth": 64,
|
||||
"mixWidth": 90,
|
||||
"mixCollapsedWidth": 64,
|
||||
"mixChildMenuWidth": 200
|
||||
},
|
||||
"footer": {
|
||||
"visible": true,
|
||||
"fixed": false,
|
||||
"height": 48,
|
||||
"right": true
|
||||
},
|
||||
"watermark": {
|
||||
"visible": false,
|
||||
"text": "SoybeanAdmin",
|
||||
"enableUserName": false,
|
||||
"enableTime": false,
|
||||
"timeFormat": "YYYY-MM-DD HH:mm"
|
||||
},
|
||||
"tokens": {
|
||||
"light": {
|
||||
"colors": {
|
||||
"container": "rgb(255, 255, 255)",
|
||||
"layout": "rgb(247, 250, 252)",
|
||||
"inverted": "rgb(0, 20, 40)",
|
||||
"base-text": "rgb(31, 31, 31)"
|
||||
},
|
||||
"boxShadow": {
|
||||
"header": "0 1px 2px rgb(0, 21, 41, 0.08)",
|
||||
"sider": "2px 0 8px 0 rgb(29, 35, 41, 0.05)",
|
||||
"tab": "0 1px 2px rgb(0, 21, 41, 0.08)"
|
||||
}
|
||||
},
|
||||
"dark": {
|
||||
"colors": {
|
||||
"container": "rgb(28, 28, 28)",
|
||||
"layout": "rgb(18, 18, 18)",
|
||||
"base-text": "rgb(224, 224, 224)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
src/theme/preset/default.json
Normal file
91
src/theme/preset/default.json
Normal file
@@ -0,0 +1,91 @@
|
||||
{
|
||||
"name": "default",
|
||||
"desc": "Default theme preset with balanced settings",
|
||||
"i18nkey": "theme.appearance.preset.default",
|
||||
"version": "1.0.0",
|
||||
"themeScheme": "light",
|
||||
"grayscale": false,
|
||||
"colourWeakness": false,
|
||||
"recommendColor": false,
|
||||
"themeColor": "#646cff",
|
||||
"otherColor": {
|
||||
"info": "#2080f0",
|
||||
"success": "#52c41a",
|
||||
"warning": "#faad14",
|
||||
"error": "#f5222d"
|
||||
},
|
||||
"themeRadius": 6,
|
||||
"isInfoFollowPrimary": true,
|
||||
"layout": {
|
||||
"mode": "vertical",
|
||||
"scrollMode": "content"
|
||||
},
|
||||
"page": {
|
||||
"animate": true,
|
||||
"animateMode": "fade-slide"
|
||||
},
|
||||
"header": {
|
||||
"height": 56,
|
||||
"breadcrumb": {
|
||||
"visible": true,
|
||||
"showIcon": true
|
||||
},
|
||||
"multilingual": {
|
||||
"visible": true
|
||||
},
|
||||
"globalSearch": {
|
||||
"visible": true
|
||||
}
|
||||
},
|
||||
"tab": {
|
||||
"visible": true,
|
||||
"cache": true,
|
||||
"height": 44,
|
||||
"mode": "chrome",
|
||||
"closeTabByMiddleClick": false
|
||||
},
|
||||
"fixedHeaderAndTab": true,
|
||||
"sider": {
|
||||
"inverted": false,
|
||||
"width": 220,
|
||||
"collapsedWidth": 64,
|
||||
"mixWidth": 90,
|
||||
"mixCollapsedWidth": 64,
|
||||
"mixChildMenuWidth": 200
|
||||
},
|
||||
"footer": {
|
||||
"visible": true,
|
||||
"fixed": false,
|
||||
"height": 48,
|
||||
"right": true
|
||||
},
|
||||
"watermark": {
|
||||
"visible": false,
|
||||
"text": "SoybeanAdmin",
|
||||
"enableUserName": false,
|
||||
"enableTime": false,
|
||||
"timeFormat": "YYYY-MM-DD HH:mm"
|
||||
},
|
||||
"tokens": {
|
||||
"light": {
|
||||
"colors": {
|
||||
"container": "rgb(255, 255, 255)",
|
||||
"layout": "rgb(247, 250, 252)",
|
||||
"inverted": "rgb(0, 20, 40)",
|
||||
"base-text": "rgb(31, 31, 31)"
|
||||
},
|
||||
"boxShadow": {
|
||||
"header": "0 1px 2px rgb(0, 21, 41, 0.08)",
|
||||
"sider": "2px 0 8px 0 rgb(29, 35, 41, 0.05)",
|
||||
"tab": "0 1px 2px rgb(0, 21, 41, 0.08)"
|
||||
}
|
||||
},
|
||||
"dark": {
|
||||
"colors": {
|
||||
"container": "rgb(28, 28, 28)",
|
||||
"layout": "rgb(18, 18, 18)",
|
||||
"base-text": "rgb(224, 224, 224)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
96
src/theme/settings.ts
Normal file
96
src/theme/settings.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
/** Default theme settings */
|
||||
export const themeSettings: App.Theme.ThemeSetting = {
|
||||
themeScheme: 'light',
|
||||
grayscale: false,
|
||||
colourWeakness: false,
|
||||
recommendColor: false,
|
||||
themeColor: '#646cff',
|
||||
themeRadius: 6,
|
||||
otherColor: {
|
||||
info: '#2080f0',
|
||||
success: '#52c41a',
|
||||
warning: '#faad14',
|
||||
error: '#f5222d'
|
||||
},
|
||||
isInfoFollowPrimary: true,
|
||||
layout: {
|
||||
mode: 'vertical',
|
||||
scrollMode: 'content'
|
||||
},
|
||||
page: {
|
||||
animate: true,
|
||||
animateMode: 'fade-slide'
|
||||
},
|
||||
header: {
|
||||
height: 56,
|
||||
breadcrumb: {
|
||||
visible: true,
|
||||
showIcon: true
|
||||
},
|
||||
multilingual: {
|
||||
visible: true
|
||||
},
|
||||
globalSearch: {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
tab: {
|
||||
visible: true,
|
||||
cache: true,
|
||||
height: 44,
|
||||
mode: 'chrome',
|
||||
closeTabByMiddleClick: false
|
||||
},
|
||||
fixedHeaderAndTab: true,
|
||||
sider: {
|
||||
inverted: false,
|
||||
width: 220,
|
||||
collapsedWidth: 64,
|
||||
mixWidth: 90,
|
||||
mixCollapsedWidth: 64,
|
||||
mixChildMenuWidth: 200,
|
||||
autoSelectFirstMenu: false
|
||||
},
|
||||
footer: {
|
||||
visible: true,
|
||||
fixed: false,
|
||||
height: 48,
|
||||
right: true
|
||||
},
|
||||
watermark: {
|
||||
visible: false,
|
||||
text: 'SoybeanAdmin',
|
||||
enableUserName: false,
|
||||
enableTime: false,
|
||||
timeFormat: 'YYYY-MM-DD HH:mm'
|
||||
},
|
||||
tokens: {
|
||||
light: {
|
||||
colors: {
|
||||
container: 'rgb(255, 255, 255)',
|
||||
layout: 'rgb(247, 250, 252)',
|
||||
inverted: 'rgb(0, 20, 40)',
|
||||
'base-text': 'rgb(31, 31, 31)'
|
||||
},
|
||||
boxShadow: {
|
||||
header: '0 1px 2px rgb(0, 21, 41, 0.08)',
|
||||
sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
|
||||
tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
colors: {
|
||||
container: 'rgb(28, 28, 28)',
|
||||
layout: 'rgb(18, 18, 18)',
|
||||
'base-text': 'rgb(224, 224, 224)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Override theme settings
|
||||
*
|
||||
* If publish new version, use `overrideThemeSettings` to override certain theme settings
|
||||
*/
|
||||
export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {};
|
||||
35
src/theme/vars.ts
Normal file
35
src/theme/vars.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
/** Create color palette vars */
|
||||
function createColorPaletteVars() {
|
||||
const colors: App.Theme.ThemeColorKey[] = ['primary', 'info', 'success', 'warning', 'error'];
|
||||
const colorPaletteNumbers: App.Theme.ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
||||
|
||||
const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
|
||||
|
||||
colors.forEach(color => {
|
||||
colorPaletteVar[color] = `rgb(var(--${color}-color))`;
|
||||
colorPaletteNumbers.forEach(number => {
|
||||
colorPaletteVar[`${color}-${number}`] = `rgb(var(--${color}-${number}-color))`;
|
||||
});
|
||||
});
|
||||
|
||||
return colorPaletteVar;
|
||||
}
|
||||
|
||||
const colorPaletteVars = createColorPaletteVars();
|
||||
|
||||
/** Theme vars */
|
||||
export const themeVars: App.Theme.ThemeTokenCSSVars = {
|
||||
colors: {
|
||||
...colorPaletteVars,
|
||||
nprogress: 'rgb(var(--nprogress-color))',
|
||||
container: 'rgb(var(--container-bg-color))',
|
||||
layout: 'rgb(var(--layout-bg-color))',
|
||||
inverted: 'rgb(var(--inverted-bg-color))',
|
||||
'base-text': 'rgb(var(--base-text-color))'
|
||||
},
|
||||
boxShadow: {
|
||||
header: 'var(--header-box-shadow)',
|
||||
sider: 'var(--sider-box-shadow)',
|
||||
tab: 'var(--tab-box-shadow)'
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user