gpt4 book ai didi

vuejs2 - 如何修改Vuetify默认主题?

转载 作者:行者123 更新时间:2023-12-02 03:24:13 25 4
gpt4 key购买 nike

换句话说,我的问题是 <v-toolbar light> 是什么?的light实际上意味着什么?

改变之后

Vue.use(Vuetify, {
theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})

<v-toolbar> 没有任何反应我必须申请color属性到每个元素,例如<v-btn color="primary">primary</v-btn> .

在我指定颜色后,关键字dark只会影响字体颜色。例如<v-toolbar color="primary" dark>将显示原色和白色字体。

这不是我想要的,如何替换默认的darklight具有完全自定义的主题颜色。 example theme

最佳答案

您可以通过进入 vuetify 代码并编辑其样式文件来编辑深色和浅色主题 css。他们使用手写笔,任何编辑都应立即反射(reflect)出来。要查找样式代码,请访问:

yourproject/node_modules/vuetify/src/stylus/settings/_theme.styl

在那里你会发现

$material-light := {
...
}

$material-dark := {
...
}

具有背景、字体、卡片等样式。

您应该能够根据需要对其进行编辑。

否则要保存编辑节点模块文件夹,您可以执行以下操作:

  1. 在 src 文件夹中创建一个名为 stylus 的文件夹

  2. 创建一个名为 main.styl 的文件

  3. 将其添加到该文件中:@import '~vuetify/src/stylus/main'

  4. 然后在 main.js 中添加此 import './stylus/main.styl

  5. 如果您随后重新启动应用,样式现在应该可以在导入后正常工作。

  6. 在导入语句之前编辑 src/main.styl 文件,任何更改都将覆盖默认值

例如:

//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'

您不更改的任何内容都将保留默认值。

关于vuejs2 - 如何修改Vuetify默认主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53861807/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com