CODEWITHSUNDEEP
htmlcsssass
EaBengaluru
EaBengaluru

Reputation: 71

Is there any way to change theme with the help of scss

I want to change theme when uses click on change theme button dynamically.

When users click on a checkbox (checkbox is checked)

these commented theme has to be applied

/** 
  $theme1-background:white;
  $theme1-font-color:black;
  $theme1-btn-primary:rgba(243,241,0,0.1);
  $theme1-btn-secondary:#2ab1e4;
**/

otherwise the default one has to be applied

I don't know any way to do it, but have seen this feature quite often

Here is complete codepen: https://codepen.io/eabangalore/pen/XPqoBK

$theme1-background:rgba(0,0,0,0.8);
$theme1-font-color:white;
$theme1-btn-primary:green;
$theme1-btn-secondary:orange;

//below setting has to be applied based on theme 2

/** 
  $theme1-background:white;
  $theme1-font-color:black;
  $theme1-btn-primary:rgba(243,241,0,0.1);
  $theme1-btn-secondary:#2ab1e4;
**/

.main{
  margin-top:34px;
  background:$theme1-background;
  border:1px solid orangered;
  width:90%;
  color:$theme1-font-color;
  .btn-primary{
    background:$theme1-btn-primary;
    color:$theme1-font-color;
  }
 .btn-secondary{
    background:$theme1-btn-secondary;
    color:$theme1-font-color;
  }
}
<label>change theme:<input type="checkbox"></label>

<div class="main">
  <button class="btn-primary">button primary</button>
  <button class="btn-secondary">button secondary</button>
  
  <p>text color   ------>>>  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure delectus officiis ea in deserunt blanditiis at, ratione recusandae asperiores pariatur perspiciatis voluptate accusantium aperiam, harum accusamus quis veritatis quisquam aliquid.</p>
</div>

Upvotes: 0

Views: 45

Answers (1)

Adam
Adam

Reputation: 3965

You can easily restyle an entire page dynamically by doing two things:

First, create a duplicate stylesheet and add a body class selector such as body.other-theme to the beginning of every selector you want to change. So your two stylesheets might look like this:

/* main-theme.css */
#content {
  background: white;
}

/* other-theme.css */
body.other-theme #content {
  background: black;
}

Then when the user checks the checkbox, simply add the other-theme class to the body of the document. This will trigger all other-theme styles to display.

In each stylesheet, you can set the theme colors and other variables that will be specific to that theme.

Upvotes: 1

Related Questions