So I currently have a website designed with two themes, the layout is exactly the same but many elements were changed by color and design, as well as a new site image displayed. I achieved this simply by creating two css files. The default layout is set as the style for all visitors, and the second is achieved by creating a link with a script to switch css applied to the site by clicking on it, which I created as a button that is itself styled specifically in css. The buttons allow one to switch to the second theme and back to the default theme, both buttons display regardless of the chosen theme. The buttons are next to each other, there is no toggle switch or image or dropdown list, they appear as two links. Here are the codes for those.
Style:
<link rel="stylesheet" href="blue.css">
Buttons:
<button class="button2" onclick="toggleTheme('blue.css')">Blue</button> <button class="button2" onclick="toggleTheme('grey.css')">Grey</button>
The issue that I want to resolve is that despite clicking to change the theme to the “grey” and changing the theme on that page, it resets back to the default blue once the visitor clicks to another page, and I would like the theme to stay unless the visitor clicks back to “blue”. I know I need a script for this but I haven’t had much luck finding the solution, and additionally run into many tutorials saying to use :root to achieve this but I have way too many custom changes in the css files including three different types of links, four headers, custom colors for selection and scrollbar, simply so much going on and I haven’t a clue how to ensure it works if I alter the css files. I think a script would make this easier to achieve.
And to be honest my knowledge of how to use scripts is severely lacking. Even if I read similar questions I am really confused.
Thanks for any help
// I tried a number of scripts and haven’t seen anything really happen, I was blindly guessing. I originally intended to use cookies but have read going by localhost is an easier way to make the browser save the theme for the user. I don’t mind if it resets after closing the window, I simply want it to remain constant for each site visit, clicking between the pages. Btw besides the index.html file, the pages are php and use php script to add the header and footer elements.
mango is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.