Question

您好，我想在黑暗模式下更改页面背景。

这是常规背景

$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;
}

有什么想法吗？

Answer 1

sass变量在编译后不会保留，同时您可以在javscript级别访问和操作css变量。为了主题化，我将使用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>

使用多种颜色更改变量-Scss

1 个答案: