开发者问题收集

Vuetify3 如何定义主题设置

2021-06-15
6902
vue.js vuetify.js vuejs3

我在使用新版 vuetify 3 定义主题设置时遇到了一些麻烦。

文档示例（针对 Vuetify3）： 

// src/plugins/vuetify.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          ..., // We have omitted the standard color properties here to emphasize the custom one that we've added
          green: '#00ff00'
        }
      }
    }
  }
})

我做了完全相同的操作（当然删除了颜色中的 ..., ），但在 chrome 控制台中收到错误：

Uncaught TypeError: Cannot convert undefined or null to object

有人知道为什么会这样吗？（我知道这是一个新版本，文档仍在开发中）。

谢谢！

2个回答

这很可能是 Vuetify 中的一个错误（毕竟它是 alpha 版本）。我已在 vuetifyjs/vuetify 问题 #13822 中报告了此问题。

版本 3.0.0-alpha.6 需要定义 theme.variables 对象属性以避免崩溃： 

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        variables: {}, // ✅ this property is required to avoid Vuetify crash
      }
    }
  }
}

还请注意 colors 的几个问题：

  1. colors 中的主要颜色名称似乎被忽略，因此您不能使用 green 。选择类似 greenish 的选项。

  2. 设置 colors 似乎会消除未指定的默认颜色（这可能是不受欢迎的），因此应将它们包含在自定义设置中。 

myCustomTheme: {
  colors: {
    // green: '#xxx', 1️⃣
    greenish: '#xxx',

    // 2️⃣
    background: '#ccc',
    surface: '#212121',
    primary: '#00ff00',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC5',
    'secondary-darken-1': '#03DAC5',
    error: '#CF6679',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00'
  }
}

demo

tony19
2021-06-18

Vue3 和 Vuetify 3 中对我有用的方法

[已解决]

我转到 SRC 文件夹和 Plugins 文件夹，编辑 vuetify.js 中默认的文件

文件：src/plugins/vuetify.js 

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        variables: {}, // ✅ this property is required to avoid Vuetify crash

        colors: {
          //green: '#00ff00' // cannot use primary color names here, so use a custom color name (such as 'greenish')
          greenish: '#03DAC5',

          // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
          background: '#fbfbfb',
          surface: '#212121',
          primary: '#00ff00',
          'primary-darken-1': '#3700B3',
          secondary: '#03DAC5',
          'secondary-darken-1': '#03DAC5',
          error: '#CF6679',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        },
      },
      darkBlue: {
        dark: true,
        variables: {}, // ✅ this property is required to avoid Vuetify crash

        colors: {
          //green: '#00ff00' // cannot use primary color names here, so use a custom color name (such as 'greenish')
          greenish: '#03DAC5',

          // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
          background: '#111928',
          surface: '#212121',
          primary: '#00ff00',
          'primary-darken-1': '#3700B3',
          secondary: '#03DAC5',
          'secondary-darken-1': '#03DAC5',
          error: '#CF6679',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        },
      }
    }
  }
})

然后在我的 v-toolbar 文件中创建官方 vue 文档中的内容 https://vuetifyjs.com/en/features/theme/

这是我的组件导航栏，位于文件中：src/components 

<template>
  <v-app>
    <v-btn @click="toggleTheme">toggle theme</v-btn>
    ...
  </v-app>
</template>

<script>
import { useTheme } from 'vuetify'

export default {
  setup () {
    const theme = useTheme()

    return {
      theme,
      toggleTheme: () => theme.global.name.value = theme.global.current.value.dark ? 'light' : 'darkBlue'
    }
  }
}
</script>

希望我有所帮助，因为我觉得没有尽可能多的关于实施的信息。

Isaac
2023-03-30