Q:

Кнопка нажимается со второго раза

По нажатии на кнопку, бэкграунд в body должен менять цвет. 
Все работает сносно, кроме того, что нажимается она, почему-то, только со второго раза. 
function ColorChange() {
if (document.body.style.backgroundColor == "black") {
    document.body.style.backgroundColor = "white";
} else {
    document.body.style.backgroundColor = "black"; 
}
}

В стилях к body следующее: 
body{
background-color:black;
transition: all 4s;
}

A:

Всё потому, что изначально у вас нет никакого цвета. Вы проверяете inline цвет. 
То есть document.body.style.backgroundColor берёт цвет из <body style, а не из таблицы стилей. Поэтому лучше было бы сделать функцию toggleClass, но если вам всё таки надо именно стили переключать, то можно сделать проверку на наличие цвета у элемента.

function ColorChange() {
var currentColor = document.body.style.backgroundColor;
alert(currentColor);
if (!currentColor || currentColor == "black") {
    document.body.style.backgroundColor = "white";
} else {
    document.body.style.backgroundColor = "black"; 
}
}
body{
background-color:black;
transition: all 4s;
}
<body>
<button onclick="ColorChange()">test</button>
</body>

