how to change css through local storage

Question

5.00/5 (1 vote)

See more:

Hi Guys,

I am working on a portal which has two option as links-
1) high contrast color
2) reset to default
For this I have made two css-- one for default colors and other for high contrast colors.
I want when a user click on any option that option will work for all the pages till he either logs out or click the other option.
Can anyone tell me how can I achieve this.
I am just looking for the local storage stuff of html, but I am not getting how to implement it. Thanks in advance.
htmlcode-

High Contrast

Reset to default colors

function changeColors(newCSS)
{
document.getElementById("currentCSS").href = newCSS;
}

Posted 7-Jan-15 10:50am

ssharma21

Updated 9-Jan-15 9:47am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 8-Jan-15 13:40pm

After some thinking and discussing with OP who clarified the problem in out discussion in comments to my Solution 1, I up-voted this question with 5.
—SA

2 solutions

Solution 2

Alternatively, consider this:
http://learn.jquery.com/jquery-ui/theming[^],
http://jqueryui.com/themeroller[^].

—SA

Posted 8-Jan-15 10:43am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-01-07T11:00:00

Solution 1

~~And how this can be related to local storage or sessions?~~

[EDIT #2]

Actually, after OP raised the valid and practically important problem of applying style switch to other pages using only the client-side techniques, I can see that local and/or session storage using respective HTML5 feature could be extremely useful. Please see the discussion in comments. If needed, I would write some prototype illustrating the technique I suggested, but it would take more time. I hope the idea is easy to understand from my comment in the comment section below.

One issue it to choose between local and session HTML5 storage. Local storage will keep the chosen style switch for a long time (until the user cleans up local data, the procedure depending on particular browser), but the session storage will remember it only during the session, so you should take care to start with default is session data is missing.

[END EDIT #2]

It should be a purely client-side issue, very simple. Have different sets of all CSS classes, default and high-contrast. It does not matter if they are in different CSS files on not (or CSS is all embedded in HTML), it's only important to give them different names.

On user's click, handle it in Javascript and replace all default classes with high-contrast classes, or visa versa, for all elements involved. I think the most convenient way to implement this would be jQuery. It already has all methods you need, and also it allows to get the whole set of elements and do some operation on the set at once. The jQuery wrapper for the element or a set of elements can be obtained using jQuery selectors: by name, id, HTML elements and/or attributes, different combinations of those, and the like:
http://api.jquery.com/category/selectors[^].

To replace/add/remove CSS classes, use these functions:
http://api.jquery.com/category/css[^],
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

[EDIT #4]

The solution described about turned out more complicated than it can be.
When I tried to develop it, I found much simpler and more elegant solution.
Here is the implementation shown in my short article, complete with usage sample: Theme Selector Based on HTML5 Local/Session Storage: The Simplest Thinkable One[^].

[END EDIT #4]

[EDIT #1]

Alternative, potentially simpler and more maintainable solutions could be based on some server-side technology. You could post-back an HTTP request on user's click to the server side. The page can be re-written on the server side with only one difference: one CSS file replaced with another CSS file, which could be just one line in HTML code referring to an external entity (CSS file).

It would not be as fast as with pure client-side Javascript solution, but such switches are hardly done too frequently. In return, maintainability could be improved.

Too bad we don't know what server-side technology you use and if you even use any. So, you can use this idea to figure out yourself how to do it with your technology (again, if you use any). If you want to get more help on this option, clarify this matter and ask your follow-up questions.

[EDIT #1.2]

My solution shown in the article I already mentioned makes the client-side solution doing exactly the same, in a very simple way:
Theme Selector Based on HTML5 Local/Session Storage: The Simplest Thinkable One[^].

The only problem is that the client should have relatively modern Web browser supporting Web storage, but this is not a problem at all, because this feature is not even an HTML5 feature anymore; even the Web browser poorly supporting HTML5 support Web storage.

[END EDIT #1.2]

[END EDIT #1]

—SA

Posted 7-Jan-15 11:00am

Sergey Alexandrovich Kryukov

Updated 8-Jan-15 15:21pm

v7

Comments

ssharma21 8-Jan-15 12:57pm

Hi Sergey, Thanks for providing solution. but can u please elaborate your answer as I am not that gud in jquery, just going through your highly recommended links. I am using Razor engine to generate views. moreover i dont want to do this at server side, as its just waste of bandwidth and not that fast. I want to know how can I choose a selector that will work for all pages in a site.?

Sergey Alexandrovich Kryukov 8-Jan-15 13:34pm

The best way to elaborate it is starting to read from the link in marked as "(start from here)". Not doing i at server side (you are perfectly right, about some waste of bandwidth) is exactly the point for the first solution (before [EDIT]). This way, you can get the very best performance, at the expense of some more CSS and Javascript work, which is not a big deal. jQuery helps to get it much easier and more reliable.

All pages on the side? Good point. Sorry, I did not address this issue. No, selectors are unrelated here; they only take DOM objects on a single page: Now I see; this is a good reason to use HTML5 local or session storage. The only problem is when you switch the styles on one page, but want that it was affect other pages.

All you need to pass through the storage is the object representing of the "class of style". Here is what I suggest: for these objects, assign some strings which would be uses as prefixes for the names of CSS classes. Say, all classes could come in two variants: default* and highContrast*. When the user clicks on certain style, put the string, either "default" (which should be already there on any page) or "highContrast" or more. The style switching script should append (or prepend) this string to all predefined style names and set the styles using jQuery. The minimal code demonstrating this technique would take some time, but is something is unclear, please ask. It turns out to be a pretty neat client-only solution, thank you for raising this problem.

—SA

ssharma21 8-Jan-15 14:25pm

thanks Sergey for getting my point exactly. but now can u help me by providing some basic coding tactics as i am not at all getting from where to start to implement this.

Sergey Alexandrovich Kryukov 8-Jan-15 15:21pm

As I say, this will take considerable time. If you want it, I can develop some basic samples (it should contain at least 4 files: 2 HTMLs, one shared CSS and shared js). In the meanwhile, could you ask your questions on what's not clear and do some study on the elements of this solution?
—SA

Sergey Alexandrovich Kryukov 8-Jan-15 19:38pm

A little more patience. I already created code, writing the text.
It turned out much better than I suggested before: you won't need to have multiple classes for the same elements, you will be able to simply switch CSS files using only the client side, local or session storage. The solution comes out amazingly simple. Just wait a bit.
—SA

Sergey Alexandrovich Kryukov 8-Jan-15 21:23pm

Done! Please see the solution complete with demo code:
http://www.codeproject.com/Tips/863019/Theme-Selector-Based-on-HTML-Local-Session-Storage. I hope you will like its simplicity. Will you formally accept the answer now?
—SA

ssharma21 9-Jan-15 12:13pm

thanks Sergey. you are a Savior for me... :) :).
thanks for the demo code. I am trying to get it and fix it out in my code.But instead of select tag I have given options simply in links(anchor elements), hopefully it will work fine in that case too. I will let u know.. thanks again!!!!

Sergey Alexandrovich Kryukov 9-Jan-15 12:32pm

Sure.
Link is even easier, just handle the event. Main code is Javascript setting the theme.
Good luck, call again.
—SA

ssharma21 9-Jan-15 13:18pm

thanks, But i guess its not working in my case.As I have a shared page in mvc and all other pages html body are rendering in it. I have provided the theme option links in the shared page only. Now After so many attempts, I got totally confused about where to add what :(

Sergey Alexandrovich Kryukov 9-Jan-15 13:28pm

I don't understand. You set up the theme in either localStorage or sessionStorage. Both storages are supported locally by your browser, either during session of permanently. The browser doesn't care what's on your server side. There are no "shared" or "non-shared" pages, there are just CSS files and storage.

By the way, you could implement the same mechanism on the server part, without those storage; then you could use the same themes per authenticated user, session, whatever. However, as I understand, pure client-side solution is very neat.

Okay, did you reproduce the behavior I provided. (Just on case: I hope you did not forget to download jQuery and put on appropriate location relative to your HTML files. :-)

—SA

ssharma21 9-Jan-15 14:22pm

yess... i have downloaded jquery file and used.. I want to show you the code. I know I am getting stuck at very silly place. How can I show it you?
do I need to improve the question?

Sergey Alexandrovich Kryukov 9-Jan-15 15:37pm

Yes, the way to do it is the "Improve question" button on top. I cannot imagine what could be a problem.
—SA

ssharma21 9-Jan-15 15:58pm

I have updated the question. In the links i have given onclick as: onclick="changeColors(this.id,'@PortalMVC.Utilities.BaseAddress/Styles/whiteblack.css'); return false; "
thats why unable to perform this assignment-sessionStorage.setItem(themeKey, name);(I think). Please help me if can... :) thanks!!

Sergey Alexandrovich Kryukov 9-Jan-15 16:08pm

Where?
I can see only "document.getElementById("currentCSS").href = newCSS;", which is totally redundant, because you are already using jQuery, which has selectors:
$("#currentCSS"). But why are you doing this? I already provided you Javascript?
—SA

ssharma21 9-Jan-15 16:24pm

ohh.... i have used this code in place of your this code-<script>
var selectElement = $("select");
selectElement.change(function() {
$("select option:selected").each(function() {
switchTheme($(this).val());
})
});
</script> and trying to place theme.js work accordingly... :( i think i have messed all the code

Sergey Alexandrovich Kryukov 9-Jan-15 16:33pm

What are you doing?! You told me that your control is not a select control? If you copy my code verbatim, it will work. What are you trying to achieve?
Get the idea: ultimately, for switching the selected theme, you need to supply theme name which should also match the CSS file name. So, make sure you call switchTheme with appropriate string parameter. Start with calling it with hard-coded string... And then make sure you do it properly in response to your control event, whatever it is.
My code works only for the select element. I don't know what you are doing.
—SA

ssharma21 12-Jan-15 12:40pm

Hi Sergey,
Yes i have nt used select. I have two links, which onclick, calling the same function changecolor(as provided in the code above). moreover, My portal is in razor, and it has a shared page which is rendering other pages'body in it. Thats why I am unab;le to use your code exactly, Problems that I am facing currently is-
1) how can i transform it for a link?
2) U have used-<script src="themes.js"></script> to each page body part, but i dont set it where to apply this due to shard page layout
3)I didnt get the use of themeKey = "theme"; and var link = $("link, [type='text/css']");
link.attr("href", name + ".css"); lines due to my lack of knowledge.
I am still trying to fix this issue. Hpoe u got it in a better way now.

Sergey Alexandrovich Kryukov 12-Jan-15 14:25pm

Okay, those are correct question which I can answer:
1) Please write my the full code of switching control; what is that "link". By the way, better use the regular button element.
2) ... and then I'll try to show you how to write the event handler and call switchTheme
3) I thought you knew how sessionStorage and localStorage work. Like everything in Javascript, you store data in associative container by key (it gives you O(1) tome complexity fir search by key. "theme" is just the key I introduce to store themeName.
link = $("link, [type='text/css']"); is getting element by compound selector; selectors are listen with ','; one selector is "link" (element name) another selector is [type='text/css'] (match exact attribute "type" with exact value "text/css"); this way, both criteria should match. I referenced the documentation on both types of selectors in my article;
—SA

ssharma21 12-Jan-15 14:38pm

yes, I am trying to fix it out with your code only. can you tell me now abt the event handler and calling of switchTheme function.

Sergey Alexandrovich Kryukov 12-Jan-15 15:16pm

In your HTML, event attributes of your element:
onclick="switchTheme('default')"
onclick="switchTheme('highResolution')"

The page without the switch should have the one-line script as shown in my sample "Second.html".

—SA