Switching between 2 CSS

Question

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:

Do i need to have 2 css like - style1.css and style2.css?
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"/>
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>

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. — Sam, Dec 01 '15 at 00: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. http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml I have used this example - dosnt work http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery and this one) — Michael Pixel, Dec 01 '15 at 03:48
Check this solution: https://stackoverflow.com/questions/47772015/toggle-between-two-stylesheets — Ricardo Andres, Apr 30 '18 at 18:52

score 4 · Answer 1 · answered Nov 30 '15 at 23:59

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!

answered Nov 30 '15 at 23:59

Nick Zuber

5,467
3
24
48

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. – Michael Pixel Dec 01 '15 at 03:44
1

@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. – Sam Dec 01 '15 at 05:43
I solved it. Thanks for help. with - and
Christmas
No Christmas

Michael Pixel

Dec 05 '15 at 00:38

@MichaelPixel I'm glad I could help! – Nick Zuber Dec 05 '15 at 00:39

Switching between 2 CSS

1 Answers1