CODEWITHSUNDEEP
javascripthtmlcss
B3TA
B3TA

Reputation: 489

How to Save CSS Style Switch Across Website

I am working on a website and I want to be able to toggle between styles. I followed the tutorial here (http://css-tricks.com/forums/topic/how-to-let-visitors-to-switch-between-two-or-three-css-styles-themes/) and the colors switch and save on the page that the code is on, but I want to know if there is any way to save the selected style and use it across multiple webpages (html files). Here is my code in the html, the javascript file is on the website linked...-

<!-- The Scripts -->
<script type="text/javascript" src="assets/js/styleswitcher.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/main.css" title="default">
    <link rel="alternate stylesheet" type="text/css" href="assets/css/style-orange.css" title="orange">

<!-- To Switch -->
<a href="#" onclick="setActiveStyleSheet('orange'); return false;"><h1>Default</h1></a>
<a href="#" onclick="setActiveStyleSheet('orange'); return false;"><h1>Orange</h1></a>

Upvotes: 0

Views: 690

Answers (1)

brianpck
brianpck

Reputation: 8254

The styleswitcher.js file which is linked to (http://css-tricks.com/examples/AlternateStyleSheets/) includes a cookie which should save the style preference of the user across multiple pages/visits. If this isn't working, you haven't implemented the code correctly or your browser has cookies disabled.

https://www.inetsolution.com/turnleft/post/CSS-Style-Switcher-A-quick-and-dirty-how-to.aspx offers a clearer tutorial.

Upvotes: 1

Related Questions