Vuetify 明暗主题切换

简介: Vuetify 明暗主题切换

image.png

思路

通过修改 Vuetify 中的 theme.dark 属性实现, 官方介绍 vuetifyjs.com/en/customiz…

实现

项目 vuetify 设置如下(vuetify.js), 默认 dark 属性值为 false (默认浅色主题)

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#409eff',
        secondary: '#54a8ff',
        accent: '#9c27b0',
        error: '#f44336',
        warning: '#ff5722',
        info: '#607d8b',
        success: '#4caf50'
      },
      dark: {
        primary: colors.blue.darken1
      }
    }
  }
}

在按钮点击事件中进行主题切换, template 中按钮点击主题切换, 按钮 icon 也切换

<v-btn icon @click="changeTheme">
  <v-icon v-if="!dark">mdi-brightness-7</v-icon>
  <v-icon v-else>mdi-brightness-4</v-icon>
</v-btn>

script

export default {
  data: () => ({
    dark: false
  }),
  methods: {
    changeTheme () {
      this.dark = !this.dark
      this.$vuetify.theme.dark = this.dark
    }  
  }
}
相关文章
|
11月前
|
缓存 小程序
微信小程序使用vant组件样式不生效的问题
微信小程序使用vant组件样式不生效的问题
562 0
|
资源调度 前端开发 容器
react插件推荐-瀑布流-macy
macy,一款react开发用的瀑布流插件,亲测体验很好
1769 0
|
20小时前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
33 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
20小时前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
31 0
|
20小时前
|
前端开发 JavaScript
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
21 0
|
20小时前
|
前端开发 API
uniapp中uview组件库丰富的LoadingIcon 加载动画
uniapp中uview组件库丰富的LoadingIcon 加载动画
71 0
|
20小时前
|
JavaScript 前端开发
(详解)vue中实现主题切换的三种方式
(详解)vue中实现主题切换的三种方式
121 1
|
7月前
|
JavaScript 前端开发 搜索推荐
为Vue.js应用添加令人惊叹的动画效果
为Vue.js应用添加令人惊叹的动画效果
32 0
|
9月前
|
JavaScript
教你两分钟在Vue中使用富文本编辑器quill-editor
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
1359 0
|
10月前
|
JavaScript 前端开发 定位技术
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)