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
    }  
  }
}
目录
相关文章
|
8月前
|
移动开发 前端开发 JavaScript
uView LoadingIcon 加载动画
uView LoadingIcon 加载动画
129 1
|
JavaScript 前端开发 容器
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
1326 0
|
3月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
143 0
|
5月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
82 0
|
5月前
|
移动开发 JavaScript 前端开发
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
199 0
|
8月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
468 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
8月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
252 0
|
8月前
|
前端开发 JavaScript
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
vue组件制作专题 - (mpvue专用)在mpvue中手写css实现简单左右轮播
63 0
|
8月前
|
前端开发 API
uniapp中uview组件库丰富的LoadingIcon 加载动画
uniapp中uview组件库丰富的LoadingIcon 加载动画
274 0
|
JavaScript 前端开发 开发者
10行代码!实现vue导航条动态效果
每天一个知识点:【scroll事件】 在网页中滚动页面时触发的事件
259 0