App.vue:
<style lang="stylus">
@css {
html {
--primary: blue;
--bg-image: url(https://i.loli.net/2020/10/14/gQq96O4DxRVXSKP.jpg);
}
html[data-theme='green'] {
--primary: green;
--bg-image: url(https://i.loli.net/2020/10/14/KdraGmYFC8Wpsz5.jpg);
}
html[data-theme='pink'] {
--primary: pink;
--bg-image: url(https://i.loli.net/2020/10/14/O4wUuGvM3Cdjl16.jpg);
}
}
</style>
組件中使用主題和切換主題:
<template>
<view class="content">
<view class="title"><text>hello world</text></view>
<button type="default" @click="changeTheme(1)">theme blue</button>
<button type="default" @click="changeTheme(2)">theme green</button>
<button type="default" @click="changeTheme(3)">theme pink</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
changeTheme(id) {
if (id == 1) {
document.documentElement.removeAttribute('data-theme');
} else if (id == 2) {
document.documentElement.setAttribute('data-theme', 'green');
} else if (id == 3) {
document.documentElement.setAttribute('data-theme', 'pink');
}
}
}
};
</script>
<style lang="stylus">
.content
min-height 100vh
background-image unquote('var(--bg-image)')
.title
color unquote('var(--primary)')
</style>
或者這樣
App.vue:
<style lang="stylus">
@css {
.theme {
--primary: red;
}
.theme[data-theme='green'] {
--primary: green;
}
.theme[data-theme='pink'] {
--primary: pink;
}
}
</style>
組件中使用
<template>
<view class="theme content" :data-theme="theme">
<view class="title"><text>hello world</text></view>
<button type="default" @click="changeTheme(1)">theme blue</button>
<button type="default" @click="changeTheme(2)">theme green</button>
<button type="default" @click="changeTheme(3)">theme pink</button>
</view>
</template>
<script>
export default {
data() {
return {
theme: ''
};
},
methods: {
changeTheme(id) {
if (id == 1) {
this.theme = '';
} else if (id == 2) {
this.theme = 'green';
} else if (id == 3) {
this.theme = 'pink';
}
}
}
};
</script>
<style lang="stylus" scoped>
.title
color unquote('var(--primary)')
</style>
See also: