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

Question

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>

Answer 1

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.