Question

在某些网站上，您可以点击按钮选择网站的颜色主题。似乎没什么复杂的，但是有没有最先进的技术（可能在整个页面的类之间切换或调用不同的CSS文件）？

Answer 1

我发现新的css3解决方案对js：

非常有帮助

element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');
element.classList.contains('className');// check first

所以如果你想改变整个页面的样式，你需要从最高元素开始，因为你不能用css设置父节点的样式......

示例1

超过2个班级

body.class1{color:blue}
body.class1>div{color:blue}
body.class1>div>a>p>whatever:hover{color:blue}

body.class2{color:green}
body.class2>div{color:green}
/*the div's inside the body with class 'class2' have a green font*/
body.class2>div>a>p>whatever:hover{color:green}

在这种情况下，只需调用

即可将样式更改为整个页面

body.classList.remove('class1');
body.classList.add('class2');

示例2

有2个类（一个默认和额外）

body{color:blue}
body>div{color:blue}
body>div>a>p>whatever:hover{color:blue}

body.extra{color:green}
body.extra>div{color:green}
body.extra>div>a>p>whatever:hover{color:green}

JS：

body.classList.toggle('extra');

你也可以改变整个CSS ...取决于你真正想改变多少。

或使用javascript动态创建规则

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

myStyle.insertRule("#blanc { color: white }", 0);

但我认为第一个是最简单的处理......

如果你有一个将显示为网格的容器，那么行大图标最简单的解决方案就是在父容器上创建一个类。如例1所示。

提示：我最近使用的另一件事是hsla（色调，饱和度，亮度，alpha）;

我使用这个，如果我想让背景和字体颜色相同但字体稍暗一些：

background-color:hsla(360,100%,20%,1);// 20% light
color:hsla(360,100%,80%,1);// 80% light

Answer 2

给你的身体上一个颜色。

例如<body class="color-green">。您可以通过JS切换类：

document.body.classList.toggle('color-green')。

在CSS中，您必须创建颜色感知选择器：

.button {
  color: blue;
}

.color-green .button {
  color: green;
}

在我看来，这是要走的路。

如果你在CSS中创建了很多颜色规则，你应该将它们分成自己的文件，并在点击更改颜色按钮时包含它们。

选择网站颜色主题的方法

2 个答案: