英文:
Vuetify: Switch logo image based on theme
问题
我在我的项目上有一个暗色和一个浅色主题，在暗色主题下有一个白色的标志图像，当我切换到浅色主题时，我想切换到一个彩色的标志图像。
这是我的主题代码：
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
txtWhite: '#FFFFFF',
back1: '#141627',
back2: '#181B31',
back3: '#292B3D',
logo: ['~/assets/logo_white.png'],
},
light: {
txtWhite: '000000',
back1: '#B0BEC5',
back2: '#CFD8DC',
back3: '#ECEFF1',
logo: ['~/assets/logo_color.png'],
},
},
},
}
这是我的导航栏，其中包含标志：
<v-app-bar clipped-left app color="back2">
<NuxtLink
@click="$router.push('/')"
v-if="$auth.loggedIn"
tag="img"
:src="require('~/assets/logo_white.png')"
to="/"
>
我尝试将$vuetify.theme.currentTheme.logo放在src中，或者只是logo，但似乎不起作用，我一定做错了什么。
有谁知道如何做到这一点？
英文:
I have a dark and a light theme on my project, in the dark theme I have a white logo image and I want to switch to a colored logo image when I switch to the light theme.
Here's my code for the theme :
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
txtWhite: '#FFFFFF',
back1: '#141627',
back2: '#181B31',
back3: '#292B3D',
logo: ['~/assets/logo_white.png'],
},
light: {
txtWhite: '000000',
back1: '#B0BEC5',
back2: '#CFD8DC',
back3: '#ECEFF1',
logo: ['~/assets/logo_color.png'],
},
},
},
},
And here's my navbar where the logo is :
<v-app-bar clipped-left app color="back2">
<NuxtLink
@click="$router.push('/')"
v-if="$auth.loggedIn"
tag="img"
:src="require('~/assets/logo_white.png')"
to="/"
>
I tried putting $vuetify.theme.currentTheme.logo in the src or just logo but it doesn't seem to work, I must be doing something wrong.
Does anybody know how to do this ?
答案1
得分: 0
从主题设置中删除 logo 并尝试以下代码：
<NuxtLink
@click="$router.push('/')"
v-if="$auth.loggedIn"
tag="img"
:src="$vuetify.theme.dark ? require('~/assets/logo_white.png') : require('~/assets/logo_color.png')"
to="/"
>
英文:
Remove logo from theme settings and try this:
<NuxtLink
@click="$router.push('/')"
v-if="$auth.loggedIn"
tag="img"
:src="$vuetify.theme.dark?require('~/assets/logo_white.png'):require('~/assets/logo_color.png')"
to="/"
>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论