CODEWITHSUNDEEP
javascripthtmlcss
Michael Pixel
Michael Pixel

Reputation: 11

Switching between 2 CSS

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>

Upvotes: 0

Views: 788

Answers (2)

RWC
RWC

Reputation: 5052

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.

Upvotes: 0

Nick Zuber
Nick Zuber

Reputation: 5637

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!

Upvotes: 4

Related Questions