Change background color in CSS (Light and Dark theme on site)


#1

Hello, I have a question, I’m using a free template of HTML5 UP Editorial and want to make a button which will switch a theme from light to dark. I did it to one page, to main page, its switches to dark, but if I go to another page its resets to default light theme. Is it possible to make it dark on all pages if someone clicked a dark theme on main page? and again if someone click light it swtiches to light theme on all pages. Its 100% HTML so I dont know if I should use java, or other option.

Heres my workspace: http://foodtek.eu/pub/index.html (on the top-right corner - is icons to switch theme)

I wish to make it works like here: https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/-lmi


#2

The only ways to keep the theme going through other pages is to have the logic built in on the server side so the theme_id remains alive with subsequent page requests; or, to use an iframe that has access to global variables in the host page. Both are a bit complicated, but not insurmountable tasks.

Server-side is simplest if you’ve never worked with or are unable to install an iframe in your index.html page. All it would take is a query string attached to subsequent page requests.

https://www.example.com/about.php?theme_id=teal

The request document (or the template from which it is generated) would resolve the URL with ISSET (in PHP) and assign the applicable style sheet or global variable, the latter of which could be written into a script that could act upon the CSS in the DOM.

Theme switchers have been around nearly as long as CSS itself. I don’t believe I’ve ever seen one for an iframe, but it should be feasible, if perhaps a bit impractical. I should think it would not be unheard of. My experience is more on the PHP side, so that’s what I would lean on. The same could apply regardless what CGI you are running, PHP, Python, Rails, .NET, etc.