github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Vben
2021-04-07 23:14:51 +08:00
parent f05cc6d34e
commit 5b8eb4a49a
109 changed files with 871 additions and 2873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
build/config/themeConfig.ts
View File

@@ -2,11 +2,7 @@ import { generate } from '@ant-design/colors';
export const primaryColor = '#0960bd';
export const borderColorBase = '#d9d9d9';
export const themeMode = 'light';
export type ThemeMode = 'dark' | 'light';
export const darkMode = 'light';
type Fn = (...arg: any) => any;
@@ -17,18 +13,17 @@ export interface GenerateColorsParams {
color?: string;
}
export function generateAntColors(color: string, mode: ThemeMode) {
export function generateAntColors(color: string) {
return generate(color, {
theme: mode == 'dark' ? 'dark' : 'default',
theme: 'default',
});
}
export function getThemeColors(color?: string, theme?: ThemeMode) {
export function getThemeColors(color?: string) {
const tc = color || primaryColor;
const tm = theme || themeMode;
const colors = generateAntColors(tc, tm);
const colors = generateAntColors(tc);
const primary = colors[5];
const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
const modeColors = generateAntColors(primary);
return [...colors, ...modeColors];
}
@@ -71,36 +66,3 @@ export function generateColors({
.filter((item) => item !== '#000000');
return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
}
/**
* less global variable
*/
export function generateModifyVars() {
const palettes = generateAntColors(primaryColor, themeMode);
const primary = palettes[5];
const primaryColorObj: Record<string, string> = {};
for (let index = 0; index < 10; index++) {
primaryColorObj[`primary-${index + 1}`] = palettes[index];
}
return {
'primary-color': primary,
...primaryColorObj,
'info-color': primary,
'processing-color': primary,
'success-color': '#55D187', // Success color
'error-color': '#ED6F6F', // False color
'warning-color': '#EFBD47', // Warning color
'disabled-color': 'rgba(0, 0, 0, 0.25)', // Failure color
'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
'font-size-base': '14px', // Main font size
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
'border-color-base': borderColorBase, // Border color,
'border-radius-base': '2px', // Component/float fillet
'link-color': primary, // Link color
};
}