如何制作一个可以被多个页面访问的javascript变量？

Question

I am trying to make my own mini web app and would like to implement a dark mode. I already have the code for the dark mode itself, but, when I change pages the dark mode doesn't stay. Is there such a thing as a 'page-wide' variable? I have already looked around and found things like local storage and session storage , but, to my knowledge, those are just for a specific page, and not for an entire website.

(would prefer if the solution used pure js)

Answer 1

As far as I know, the localStorage has no expiration date, meaning that you can use it as long as the user explicitly tells the browser to clear its data (correct me if I'm wrong).

I'm maybe not that good at explaining, so here's a link to how to use it: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

FYI, you can use @media (prefers-color-scheme: dark) in CSS and in future browsers the color scheme will be determined by the browser settings.