Is there a way of changing a page's stylesheet based on the stylesheet of a different page?

Question

I'm making a webpage which includes buttons to change the theme from light to dark and back on the front page. However, if I click through to another page I want the theme to stay.

Is there a way I can tell the browser to choose the css file dynamically based on whether the user was using the light or dark theme?

For reference here is what I have on the front page:

Javascript:

function swapStyleSheet(sheet, text){
//variables to access elements in the DOM
var styleSheet = document.getElementById('pagestyle');
var defaultText = document.getElementById('styleSwitchText');

styleSheet.setAttribute('href', sheet); //changes the stylesheet
defaultText.style.display = "none"; //hides initial text

//creates p element and appends text parameter to it
var pElement = document.createElement('p');
var textnode = document.createTextNode(text); 
pElement.appendChild(textnode);

var item = document.getElementById('swapStyleButtons');
//replaces the text node in the p each time button is clicked
item.replaceChild(pElement, item.childNodes[0]);
}

html:

<div id="swapStyleButtons">
    <p id="styleSwitchText">Don't like the style? Try Night Mode!</p>
    <button id='night' onclick='swapStyleSheet("dark.css", "Think Night Mode sucks? Switch back!")'>Night</button>
    <button id='default' onclick='swapStyleSheet("recipes.css", "Liked it better before? Try Night Mode!")'>Default</button>
</div>

This works perfectly on the front page. I could just repeat this process for the other pages but then the user would have to press the button on every page, which is obviously a bit annoying.

Can 1 html page communicate with another in this way?

Are you using a CMS of any sort by chance, this can be easily done via setting session variables. otherwise you will need to use cookies or pass the variable via the url. — Wobbles, Apr 16 '16 at 11:13
I'm not using a CMS on this exercise, no. How do I pass the variable via url? — David Nugent, Apr 16 '16 at 11:14
You can use something like this (http://stackoverflow.com/questions/11526102/jquery-append-querystring-to-all-links) to dynamically edit all links and add the variable, but it may not work in certain situations. cookies may be a better bet. — Wobbles, Apr 16 '16 at 11:17
The only thing better than cookies would be to write a server script back-end say in PHP that will allow session variables, but its a rather in depth process and why I asked about CMS as it is already built in. Cookies are prob the best bet and they have the added benefit of not only working between pages, but will work between visits as well. — Wobbles, Apr 16 '16 at 11:20

score 4 · Answer 1 · edited Apr 16 '16 at 11:39

4

With HTML5 you can store data with HTML itself and u do not need to another language.

function setColorTheme(curColorTheme)
{
    if(typeof(Storage) !== "undefined") {
        localStorage.setItem("colorTheme", curColorTheme);
    } else {
        // Backup cookie Support
    }
}

function getColorTheme()
{
    if(typeof(Storage) !== "undefined") {
        return localStorage.getItem("colorTheme");
    } else {
        // Backup cookie Support
    }
}

Here is a tutorial:

http://www.w3schools.com/html/html5_webstorage.asp

edited Apr 16 '16 at 11:39

Wobbles

3,033
1
25
51

answered Apr 16 '16 at 11:20

james hofer

53
8

Good answer, but please dont use linked explanations to avoid link rot. – Wobbles Apr 16 '16 at 11:24
Links are ok, just dont make them the crux of the answer as they rot all the time and make it worthless for those that follow with similiar ?'s. Ive edited your answer (pending approval) with sample code. – Wobbles Apr 16 '16 at 11:35
Thank you but maybe they do not understand the simple code clearly and some extra explainations will be needed. – james hofer Apr 16 '16 at 11:38
Right, which is why links are ok as supporting info. But your answer itself did not even include the word WebStorage or LocalStorage meaning if the link dies, the answer doesn't actually answer anything. – Wobbles Apr 16 '16 at 11:40
@roberthofer, i seriously doubt that w3schools links will rot, this is a very popular website – Black Apr 16 '16 at 12:19
@EdwardBlack The site may remain, but the content may re-structure, I have seen it happen with many questions from 5+ yrs ago referencing pages on popular sites. Regardless, good habit is good habit. – Wobbles Apr 16 '16 at 13:41

codefreaK · Answer 2 · 2016-04-19T01:16:06.163

-1

Inside buttons click event for choosing stylesheet write following code to set selected stylesheet as local storage

localStorage.setItem("Selected_Style_sheet_name", "yourstylesheetname");

In Home Page set selected theme

 var btn1 = document.getelementbyid("btnTheme1");
    var btn2 = document.getelementbyid("btnTheme2");

    btn1.onclick =function(){
    localStorage.setItem("Selected_Style_sheet_name", "Theme1.css");

    }
    btn2.onclick =function(){
    localStorage.setItem("Selected_Style_sheet_name", "Theme2.css");

    }

Now apart from home page every page add following code it

if(localStorage.getItem("Selected_Style_sheet_name") !== null){

    styleSheet.setAttribute('href', localStorage.getItem("Selected_Style_sheet")); 

}

edited Apr 19 '16 at 01:16

answered Apr 16 '16 at 11:29

codefreaK

3,584
5
34
65

LocalStorage has already been posted as an answer. Please do not piggy back off of other answers. If you have something to add that is not different please use the comments on that answer. – Wobbles Apr 16 '16 at 11:33
I have long used local storage in my websites for different purposes I read it on mobile then I switched to pc to answer the code.So there was a lag – codefreaK Apr 16 '16 at 11:35

Is there a way of changing a page's stylesheet based on the stylesheet of a different page?

2 Answers2