使用多种颜色更改变量- scss
使用多种颜色更改变量- scss
提问于 2020-06-13 06:15:28
你好，我想改变一个页面的背景，而黑暗模式。
这是常规背景
$orangeLight:#FFA500!default;
$redLight:#FA8072!default;
$blueLight:#B0C4DE!default;
$greenLight:#90EE90!default;
$list2: $blueLight 0%,$blueLight 25%,$greenLight 25%,$greenLight 50%, $orangeLight 50%, $orangeLight 75%, $redLight 75%, $redLight 100%!default;
.three {
@include gradient(to top, $list2);
}
<ion-content [class.dark-theme]="dark" class="three">
some content
</ion-content>我想在暗模式下实现第三类。我考虑过重新定义$list2变量
.dark-theme{
$orangeLight:#FF8C00;
$redLight:#8B0000;
$blueLight:#00008B;
$greenLight:#006400;
$list2: $blueLight 0%,$blueLight 25%,$greenLight 25%,$greenLight 50%, $orangeLight 50%, $orangeLight 75%, $redLight 75%, $redLight 100%;
ion.content{
background-image: $list2;
}有什么想法吗？
Stack Overflow用户
发布于 2020-06-13 14:43:19
sass变量在编译后不会持久化，而css变量可以在javscript级别访问和操作。对于主题化，我会使用css变量(它的声明不是很漂亮，但也没问题)。有了css变量，你可以直接用普通的javascript来处理它。如果您使用的是某种SPA，则可以将主题存储为某个状态控件，并对其进行适当处理：
const themes = {
defaultTheme: [
['--orangeLight', '#FFA500'],
['--redLight', '#FA8072'],
['--blueLight', '#B0C4DE'],
['--greenLight', '#90EE90'],
],
darkTheme: [
['--orangeLight', '#FF8C00'],
['--redLight', '#8B0000'],
['--blueLight', '#00008B'],
['--greenLight', '#006400'],
]
}
let theme = 'defaultTheme'
const button = document.querySelector('#color-changer')
button.addEventListener('click', function() {
theme = theme === 'defaultTheme' ? 'darkTheme' : 'defaultTheme'
console.log(theme)
updateTheme(theme)
})
function updateTheme(theme) {
themes[theme].forEach(setCssVariable)
}
function setCssVariable ([variable, value]) { document.body.style.setProperty(variable, value) }html {
font-size:62.5%;
--orangeLight: #FFA500;
--redLight: #FA8072;
--blueLight: #B0C4DE;
--greenLight: #90EE90;
}
button {
margin: 4px;
padding: 4px;
background: yellowgreen;
}
.container {
width: 300px;
padding: 12px;
background: var(--greenLight);
}
.header {
padding: 8px;
background: var(--orangeLight);
}
.content {
padding: 8px;
margin: 2px;
color: #fff;
font-weight: 600;
background: var(--blueLight);
}<div class="container">
<div class="header">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>
<button id="color-changer">Change Theme</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62353225
复制相关文章
相似问题
腾讯云开发者
