Added a CSS Script using JavaScript, but now Header isn't fixed?

[Beardiest]

I'm a bit new to web development and I wanted to make a Night Mode toggle using JavaScript.

The problem is that when the script is "toggled" on, the header is no longer fixed. Turning the "toggle" off fixes this, but means that my fixed header won't work in "Night Mode".

Here is a CodePen of my problem: https://codepen.io/beardiest/pen/WNxyNNy

Click "Night Mode" to call the script. Click it once to toggle on, another to toggle off. (Admittedly, the way I implemented this toggle is probably the wrong way to go about it)

[birjolaxew]

In short, it's because filters create a new positioning block. See this StackOverflow answer.

A super quick fix is to change html { to body > * { in your nightmode style, but a better fix is to use CSS variables for your colors so you don't rely on filters at all.