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
    }  
  }
}
目录
相关文章
|
6月前
|
移动开发 前端开发 JavaScript
uView LoadingIcon 加载动画
uView LoadingIcon 加载动画
102 1
|
资源调度 前端开发 容器
react插件推荐-瀑布流-macy
macy,一款react开发用的瀑布流插件,亲测体验很好
1896 0
|
2月前
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
51 3
前端项目一键换肤vue+element(ColorPicker)
|
4月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
155 0
|
4月前
|
前端开发 JavaScript
vue 一键换肤(切换主题样式)
vue 一键换肤(切换主题样式)
301 0
|
6月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
404 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
前端开发
react如何使用echars图标
react如何使用echars图标
|
6月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
211 0
|
6月前
|
JavaScript 前端开发
(详解)vue中实现主题切换的三种方式
(详解)vue中实现主题切换的三种方式
336 1
|
6月前
|
前端开发 JavaScript
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
46 0