开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情>>
由于众所周知的原因，最近很多网页都是黑白色调的主题，那么一个网站如何快速的实现黑白配色呢？
1、通常切换主题的方案是做多套颜色方案，比如在body上绑定主题class。写多套css，只要改变class，就可以切换不同的配色主题：
<style>
.light{color:white;}
.gray{color:gray;}
</style>
<body class="light"></body>
<body class="gray"></body>
坏处是页面会加载多一套style样式表的代码。
2、工程化的方案是使用使用less/sass这类css预编译的方案。大量使用变量，当需要切换样式时，只需要修改变量值，重新打包样式表就可以了。
@commonColor:white;
body{
color:@commonColor;
}
3、使用css3的变量方案。这个是css3的新特性，不需要预编译。当需要切换样式时，也是只需要改变root下变量的值即可。
root{
--color:white;
}
body {
color:var(--color);
}
css变量的出现，让css主题修改更方便快捷，也让css有了更多的可能性。
但是，今天我推荐的方案，并不是css变量这个方案。尽管这个方案比起第一个和第二个方案，更简单，更快捷。可是它和我下面要推荐的方案比起来，还是很繁琐的。
终极方案：
body{
filter:grayscale(1);
}
这里使用的是css3的滤镜特性。grayscale 这个属性翻译过来就是灰度的设置。它不仅可以将文字和背景（不论之前是什么色彩）转化成黑白调和的主题，还可以将图像也转换成黑白灰。就好像给整个网站都加了一层淡淡的哀伤。
注意：只有grayscale后面括号中的值为1时才能完全转化成黑白色调，如果是0-1中间的小数，呈现的效果是其他颜色到黑灰色的中间状态。
