vue3 antd 自定义切换主题色

vue3 antd 自定义切换主题色

切换颜色hook文件 统一管理

import { onBeforeMount } from 'vue'
import { ConfigProvider } from 'ant-design-vue'const LOCAL_THEME = 'local_theme'
const LOCAL_PAGE = 'local_page'
// export const colors: string[] = [
//   '#f5222d',
//   '#fa541c',
//   '#fa8c16',
//   '#a0d911',
//   '#13c2c2',
//   '#1890ff',
//   '#722ed1',
//   '#eb2f96',
//   '#faad14',
//   '#52c41a',
// ];export const useUserTheme = () => {onBeforeMount(() => {apply(load())createPageColor()})
}export const randomTheme = (color: string) => {return color
}export const createPageColor = () => {const themePage = localStorage.getItem(LOCAL_PAGE) || 'dark'localStorage.setItem(LOCAL_PAGE, themePage)
}export const load = () => {const color = localStorage.getItem(LOCAL_THEME) || '#1890ff'return color
}export const save = (color: string) => {localStorage.setItem(LOCAL_THEME, color)
}export const apply = (color: string) => {ConfigProvider.config({theme: {primaryColor: color}})save(color)
}

主题切换组件 theme.vue 在layout组件里使用

 -->

在appvue里使用

maints引入antd css

import 'ant-design-vue/dist/antd.variable.min.css'

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！