Sergi Fernàndez Sergi Fernàndez - 6 months ago 28
CSS Question

Style selector, keep style between pages

I'm designing a webpage, i made a style selector, but when i access other page of my webpage, the style I selected, disappears.

I have something like this.



function setStyleSheet(url) {
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}

html {
height: 1000px;
}

body {
height: 1000px;
width: 100%;
margin: 0px;
font-family: sans-serif;
}

a:link {
text-decoration: none;
color: white;
}

a:visited {
text-decoration: none;
color: white;
}

a:hover {
text-decoration: none;
color: white;
}

a:active {
text-decoration: none;
color: white;
}


#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333333;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
}

.css_switch a {
float: right;
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul id="navbar">
<li class="css_switch"><a class="dark" onclick="setStyleSheet('dark.css')" href="#">Dark</a></li>
<li class="css_switch"><a class="light" onclick="setStyleSheet('light.css')" href="#">Light</a></li>
</ul>
<div>
CONTENT TEXT
</div>
</div>





What i want to do, is that if you switched to style named "Dark", when default is "Light", and you switch to other .html, the new .html has the style "Dark"

Answer

You need to store the user's choice either locally, or server side. Locally you can store information in localStorage, or cookies. Server side you can store the information in a database or a session variable.

The easiest to implement imo would be localStorage. Modify your setStyleSheet function to store the user's choice. And then add a onload event that will execute as soon as the page loads, retrieve that choice from localStorage, and then set the style sheet to the selected url.

//onload event to set the style 
window.addEventListener("load",function(){
   var templateUrl = localStorage.cssTemplate || "light.css";
   document.getElementById("stylesheet").setAttribute("href",templateUrl);
});

function setStyleSheet(url) {
    var stylesheet = document.getElementById("stylesheet");
    stylesheet.setAttribute('href', url);
    localStorage.cssTemplate = url;
}

You could also instead of using files use a class to manipulate the overall template. For instance have a body.light and body.dark classes. Then add rules using those as prefixes

body.light div { background:white; }
body.light nav { background:#EFEFEF; }

body.dark div { background:black; }
body.dark nav { background:#1E1E1E; }

Then instead of setting a file url, simply change the class on the body element

window.addEventListener("load",function(){
   var template = localStorage.cssTemplate || "light";
   document.body.className = template;
});

function setStyleSheet(template) {
    document.body.className = template;
    localStorage.cssTemplate = template;
}
Comments