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…

目录
相关文章
|
JavaScript 前端开发
umi + antd 动态主题色
这篇文章讲解的是动态主题色的变化,也就是,页面可能会有10种,或者20种颜色需要切换,不知道到底有多少种颜色;同时,文档也考虑到多人协助开发,开发人员只需要按照约定方式去编写样式、主题文件名、目录等命名规范即可。
1710 0
|
14天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
4月前
|
JavaScript 前端开发 Shell
实现在vue中自定义主题色彩切换
实现在vue中自定义主题色彩切换
64 0
|
6月前
Nuxt3 实战 (八):优雅的实现暗黑主题模式
这篇文章介绍了在Nuxt3中实现暗黑模式的过程。首先推荐使用color-mode库来轻易实现暗黑模式切换,并通过pnpm命令安装@nuxtjs/color-mode依赖。然后在nuxt.config.ts配置文件中注入依赖,并根据项目实际情况自定义配置。接着通过toggleDark函数实现切换动画,并在需要的地方加载组件<ColorMode/>,从而达到最终效果。
183 3
|
5月前
|
前端开发 JavaScript
vue 一键换肤(切换主题样式)
vue 一键换肤(切换主题样式)
326 0
|
前端开发 JavaScript
Ant-design-vue定制主题色
Ant-design-vue定制主题色
|
JavaScript
ElementUI: 自定义主题
ElementUI: 自定义主题
136 0
|
7月前
|
前端开发
自定义elementUI皮肤、色系、主题、主色调
自定义elementUI皮肤、色系、主题、主色调
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之主题设置
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之主题设置
64 0
33-Vue之ECharts高级-设置主题
33-Vue之ECharts高级-设置主题