110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
import { useThemeStore } from 'stepin/es/theme-provider';
|
|
import { useSettingStore } from '@/store';
|
|
|
|
import GreenImg from '@/assets/theme/green.png';
|
|
import VscodeImg from '@/assets/theme/vscode.png';
|
|
import PinkImg from '@/assets/theme/pink.png';
|
|
import SideDarkImg from '@/assets/theme/side-dark.png';
|
|
import HeaderDarkImg from '@/assets/theme/header-dark.png';
|
|
import PurpleImg from '@/assets/theme/purple.png';
|
|
import ChinaRedImg from '@/assets/theme/china-red.png';
|
|
import OrangeImg from '@/assets/theme/orange.png';
|
|
import IdeaImg from '@/assets/theme/idea.png';
|
|
import LightImg from '@/assets/theme/light.png';
|
|
|
|
export function configTheme(key: string) {
|
|
const { setBgSeriesColors } = useThemeStore();
|
|
const { setNavigation, setTheme } = useSettingStore();
|
|
switch (key) {
|
|
case 'night':
|
|
setBgSeriesColors({ 'bg-base': '#1D1D1F' });
|
|
break;
|
|
case 'header-dark':
|
|
setNavigation('head');
|
|
break;
|
|
default:
|
|
setNavigation('side');
|
|
}
|
|
if (key.indexOf('header') !== -1) {
|
|
setNavigation('head');
|
|
setTheme(key.split('-')[1])
|
|
}
|
|
}
|
|
|
|
export const themeList: Theme.ThemeConfig[] = [
|
|
{
|
|
title: '亮色模式',
|
|
key: 'light',
|
|
imgUrl: LightImg,
|
|
config: { color: { middle: { 'bg-base': '#fff' } } },
|
|
},
|
|
{
|
|
title: '侧边暗色菜单',
|
|
key: 'side-dark',
|
|
imgUrl: SideDarkImg,
|
|
config: { color: { middle: { 'bg-base': '#fff', 'bg-side': '#001129' } }, size: { 'width-side': '220px' } },
|
|
},
|
|
{
|
|
title: '顶部暗色菜单',
|
|
key: 'header-dark',
|
|
imgUrl: HeaderDarkImg,
|
|
config: { color: { middle: { 'bg-base': '#fff', 'bg-header': '#001129' } } },
|
|
},
|
|
{
|
|
title: 'VSCode风',
|
|
key: 'vscode',
|
|
imgUrl: VscodeImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#23272E' } },
|
|
},
|
|
},
|
|
{
|
|
title: 'IDEA风',
|
|
key: 'idea',
|
|
imgUrl: IdeaImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#2B2B2B' } },
|
|
},
|
|
},
|
|
{
|
|
title: '墨绿风',
|
|
key: 'green',
|
|
imgUrl: GreenImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#013a54' } },
|
|
},
|
|
},
|
|
{
|
|
title: '芭比粉',
|
|
key: 'pink',
|
|
imgUrl: PinkImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#B6266D' } },
|
|
},
|
|
},
|
|
{
|
|
title: '暗夜紫',
|
|
key: 'purple',
|
|
imgUrl: PurpleImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#361F68' } },
|
|
},
|
|
},
|
|
{
|
|
title: '中国红',
|
|
key: 'china',
|
|
imgUrl: ChinaRedImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': 'rgb(230, 0, 0)' } },
|
|
},
|
|
},
|
|
{
|
|
title: '活力橙',
|
|
key: 'orange',
|
|
imgUrl: OrangeImg,
|
|
config: {
|
|
color: { middle: { 'bg-base': '#B1740D' } },
|
|
},
|
|
},
|
|
];
|