by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update theme

Browse Source
This commit is contained in:
vben
2024-07-28 17:01:19 +08:00
parent 376fd17a61
commit 5590cc8fa1
15 changed files with 124 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/@core/shared/design/src/design-tokens/default/index.css
View File

@@ -1,8 +1,7 @@
:root {
--font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;
--font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* Default background color of <body />...etc */
--background: 0 0% 100%;

1
packages/effects/hooks/src/index.ts
View File

@@ -1,6 +1,7 @@
export * from './unmount-global-loading';
export * from './use-app-config';
export * from './use-content-maximize';
export * from './use-design-tokens';
export * from './use-refresh';
export * from './use-tabs';
export * from './use-watermark';

78
packages/effects/hooks/src/use-design-tokens.ts Normal file
View File

@@ -0,0 +1,78 @@
import { computed, ref, watch } from 'vue';
import { preferences } from '@vben/preferences';
export function useDesignTokens() {
const rootStyles = getComputedStyle(document.documentElement);
const colorPrimary = ref('');
const colorError = ref('');
const colorSuccess = ref('');
const colorWarning = ref('');
const colorInfo = ref('');
const colorBgBase = ref('');
const colorTextBase = ref('');
const colorBgContainer = ref('');
const colorBgElevated = ref('');
const colorBgLayout = ref('');
const colorBgMask = ref('');
const colorBorder = ref('');
const borderRadius = ref<any>('');
const getCssVariableValue = (variable: string, isColor: boolean = true) => {
const value = rootStyles.getPropertyValue(variable);
return isColor ? `hsl(${value})` : value;
};
watch(
() => preferences.theme,
() => {
colorInfo.value = colorPrimary.value = getCssVariableValue('--primary');
colorError.value = getCssVariableValue('--destructive');
colorWarning.value = getCssVariableValue('--warning');
colorSuccess.value = getCssVariableValue('--success');
colorBgBase.value = getCssVariableValue('--background');
colorBgLayout.value = getCssVariableValue('--background-deep');
colorBgMask.value = getCssVariableValue('--overlay');
colorBorder.value = getCssVariableValue('--border');
colorTextBase.value = getCssVariableValue('--foreground');
colorBgElevated.value = getCssVariableValue('--popover');
colorBgContainer.value = getCssVariableValue('--card');
borderRadius.value = getCssVariableValue('--radius', false);
},
{ immediate: true },
);
const antDesignTokens = computed(() => {
return {
borderRadius: borderRadius.value,
colorBgBase: colorBgBase.value,
colorBgContainer: colorBgContainer.value,
colorBgElevated: colorBgElevated.value,
colorBgLayout: colorBgLayout.value,
colorBgMask: colorBgMask.value,
colorBorder: colorBorder.value,
colorError: colorError.value,
colorInfo: colorInfo.value,
colorPrimary: colorPrimary.value,
colorSuccess: colorSuccess.value,
colorTextBase: colorTextBase.value,
colorWarning: colorWarning.value,
};
});
return {
antDesignTokens,
borderRadius,
colorBgBase,
colorBgContainer,
colorBgElevated,
colorBorder,
colorError,
colorInfo,
colorPrimary,
colorSuccess,
colorTextBase,
colorWarning,
};
}

7
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
View File

@@ -8,7 +8,6 @@ import { $t } from '@vben/locales';
import {
BUILT_IN_THEME_PRESETS,
type BuiltinThemePreset,
preferences,
} from '@vben/preferences';
import { convertToHsl, TinyColor } from '@vben/utils';
@@ -29,9 +28,13 @@ const inputValue = computed(() => {
const builtinThemePresets = computed(() => {
return [
{
color: preferences.theme.colorPrimary,
color: 'hsl(231 98% 65%)',
type: 'default',
},
// {
// color: 'hsl(231 98% 65%)',
// type: 'default',
// },
...BUILT_IN_THEME_PRESETS,
];
});