Vuetify 设置主题

简介: Vuetify 设置主题

main.js 中添加 theme注意 new Vue({}) 中的 vuetify

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
import './mock.js'
Vue.use(Vuetify, {
  icons: {
    iconfont: 'mdi'
  }
})
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
const opts = {
  theme: {
    themes: {
      light: {
        primary: '#03a9f4',
        secondary: '#009688',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      }
    }
  }
}
new Vue({
  router,
  store,
  vuetify: new Vuetify(opts),
  render: h => h(App)
}).$mount('#app')

这个仓库里面有主题设置的具体实现: github.com/gywgithub/v…

相关文章
|
8月前
|
JavaScript 前端开发
Vue antdv 定制主题配置(高低版本配置问题)
Vue antdv 定制主题配置(高低版本配置问题)
334 0
|
JavaScript 前端开发
umi + antd 动态主题色
这篇文章讲解的是动态主题色的变化,也就是,页面可能会有10种,或者20种颜色需要切换,不知道到底有多少种颜色;同时,文档也考虑到多人协助开发,开发人员只需要按照约定方式去编写样式、主题文件名、目录等命名规范即可。
1532 0
umi + antd 动态主题色
|
4月前
|
前端开发 JavaScript
Ant-design-vue定制主题色
Ant-design-vue定制主题色
|
9月前
|
JavaScript
ElementUI: 自定义主题
ElementUI: 自定义主题
67 0
|
4月前
|
前端开发
自定义elementUI皮肤、色系、主题、主色调
自定义elementUI皮肤、色系、主题、主色调
|
7月前
|
JavaScript
解决vue项目中使用ivew定制主题报 .bezierEasingMixin();错误
解决vue项目中使用ivew定制主题报 .bezierEasingMixin();错误
36 0
|
9月前
|
JavaScript
33-Vue之ECharts高级-设置主题
33-Vue之ECharts高级-设置主题
|
11月前
Vue3+Vuetify3 多主题配置
上一篇文章只配置了两个主题,现在我们来配置多主题。 前面步骤参:Vue3+TypeScript+Vuetify+Vite 实现动态主题切换 - TeHub
|
JavaScript 前端开发
【Vue 开发实战】实战篇 # 42:如何定制主题及动态切换主题
【Vue 开发实战】实战篇 # 42:如何定制主题及动态切换主题
106 0
【Vue 开发实战】实战篇 # 42:如何定制主题及动态切换主题
|
缓存 容器
uniapp 中实现主题色配置切换
uniapp 中实现主题色配置切换
uniapp 中实现主题色配置切换

热门文章

最新文章