CSS 按用户更改背景颜色

Question

我正在为一个网站的移动版本编写一个页面，我想插入一个标签为 Dark Theme 的复选框，当用户选中此框时，将(整个网站的)背景颜色更改为黑色，将文本颜色更改为white，我在网上找到了很多代码，但是它不起作用，我不知道为什么。

例如我试过这个:

#select1:checked ~ div .wrapper{
	background-color:black;
  color: white;
}

<div class="wrapper">
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
</div>

你能帮帮我吗？谢谢

Answer 1

这段代码是改变背景颜色的例子

<div id= "genre">
    What do you bust a move to?
    <br>
    <br>
    <form name="music" method="post" action="">
    <p>
    <input type="radio" name="music" value="radio" onClick="changeColour('b')">Doo
    <br>
    <input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
    <br>
    <input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
    <br>
    </form>
    </div>

    function changeColour(value)
    {
        var color = document.body.style.backgroundColor;
        switch(value)
        {
            case 'b':
                color = "#FF0000";
            break;
            case 'r':
                color = "#0000FF";
            break;
            case 'p':
                color = "#FF00FF";
            break;
        }
        document.body.style.backgroundColor = color;
    }

Jsfiddle