Dynamic Styling

[ahmad44]

Hello, I’m working on a web application from scratch and I’m supposed to build it in a way so that its color theme can be changed dynamically on a single click. How can I achieve this ??

[Beverleyh]

Sounds like you want a stylesheet/CSS switcher. You will be able to find examples of JavaScript and PHP style switchers online if you do a Google search, both with and without a cookie/localStorage to save the selection (depending on your needs). Here’s a PHP one of mine from a while back that might get you started http://blog.fofwebdesign.co.uk/13-php-stylesheet-content-switcher-with-save-cookie

You can also make style switchers with only CSS using the :target selector (its possible but not really recommended).

[ahmad44]

Yes, this maybe a way of doing that … ! So we will have 2 different style sheets with different color schemes and we will refer to the one we want to use. Right ?? Is there any other way of achieve that ??

[Beverleyh]

I can’t think of any more ways other than those already stated above… not unless you count another website that you redirect to.

[ahmad44]

Ok thank you for all the help :)

[ekka]

Hi @ahmed44
you can achieve this by making two different sets of classes one for the first theme and other for the second theme, after that you can make two functions in javascript, the first inject the first style sheet to the HTML tags and the second inject the second style sheet, this is a small example of two navigation bar and background-color switcher : https://codepen.io/ekka94/pen/jxapJO
good luck.

[Author]

Posts