0

I have the website, that includes index.html and style.css and images folder. And, i want to create the button "switch to another theme" on the main page of my web site ( so index.html), that will switch between 2 css's. Can You tell me please:

  1. Do i need to have 2 css like - style1.css and style2.css?

  2. Do i need to have 2 index pages that have

    a) link href="css/style1.css" rel="stylesheet" type="text/css" media="all"/>

    b) link href="css/style2.css" rel="stylesheet" type="text/css" media="all"/>

  3. Can You tell me please how is it possible to do that? Do i need just create a button on the index page that switch between css's. And if yes, can you give any example or suggestions how to do it?

Thank You

Below is my head and body parts of index.html So in body part I have Switch Css, so I just need function that will switch between css's that i have. I have original style.css and my second style2.css

<head> <title>TecKnowBros</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/> <link href="css/style2.css" rel="alternate stylesheet" type="text/css" media="all"/> </head>

<body> <div class="wrap"> <div class="header"> <div class="headertop_desc"> <div class="callus"> <p><span>Contact Us:</span><span class="number"> 07400000000</p> </div> <div class="account_desc"> <ul> <li><a href="#">My Account</a></li> <li><a href="#">Register</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">News</a></li> <li><a href="#">Switch CSS</a></li> </ul> </div> <div class="clear"></div> </div> <div class="header_top"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div> <div class="cart"> <p><span>Cart:</span><div id="drdw" class="wrapper-dropdown-2"> No items - £0.00 <ul class="dropdown"> <li>Cart is Empty</li> </ul></div></p> </div>
Improve this question
3
  • 1
    SO is not a "tell me how to make ..." kind of site. It's a "I'm working on something, here's what I've tried, here's my code, here's the outcome I want, here's the outcome/error I'm getting. How do I fix it?" kind of site. Just for future reference. Commented Dec 1, 2015 at 0:04
  • I could add here the codes that i have used, But if i used 4 different type of javascripts and all didnt work, I think its gonna be stupid to add it and make my post huge and stupid. thesitewizard.com/css/switch-alternate-css-styles.shtml I have used this example - dosnt work stackoverflow.com/questions/7846980/… and this one) Commented Dec 1, 2015 at 3:48
  • Check this solution: stackoverflow.com/questions/47772015/… Commented Apr 30, 2018 at 18:52

2 Answers 2

Reset to default
4

A common way to tackle this sort of problem is to have two types of CSS classes for each theme, and toggle between the classes. Consider something like the following:

<body class="theme1">

or

<body class="theme2">

ect...

In your CSS, you would define all the elements under each theme, so when you want to change the theme, you simply change the class to that theme. It'd look something like this:

style.css

.theme1 { ... } .theme1 div{ ... } (etc) .theme2 { ... } .theme2 div{ ... } (etc)

Then just use javascript to switch between themes. If you provide us with some code, we would be able to help you fix any errors and/solve some issue, but until then this is all I can really say to help. Good luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I have used many examples, but have no idea why it doesn't work. I tried 4 different type of examples.. And my brain already doesn't work for more info.
@MichaelPixel do you know JavaScript? If not, you're going to have to learn it to accomplish your task. This answer pretty much tells you exactly what you need to do.
I solved it. Thanks for help. with - <script> function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); } </script> and <li><a onclick="swapStyleSheet('css/style2.css')">Christmas</a></li> <li><a onclick="swapStyleSheet('css/style.css')">No Christmas</a></li>
@MichaelPixel I'm glad I could help!
0

You could use 2 (or more) separate CSS files for your different styles. That might be easier than using different classes.

See https://stackoverflow.com/a/78293807/760777

A tip. If you are going to use CSS classes for the different themes anyway (like suggested in another answer), you can do it like this:

body.dark .whatever { background: #000 } body.dark .whatever2 { background: #000 } body.light.whatever { background: #FFF } body.light.whatever2 { background: #FFF }

In this way you only have to change the class of the body tag to switch between themes.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.