I am looking to implement a dynamic theme change feature when the user clicks on a specific button.
When users click on a checkbox (checkbox is checked)
The following commented theme should be applied:
/**
$theme1-background:white;
$theme1-font-color:black;
$theme1-btn-primary:rgba(243,241,0,0.1);
$theme1-btn-secondary:#2ab1e4;
**/
If the checkbox is not checked, then the default theme should be applied.
I have come across this functionality in many applications but I'm unsure how to implement it myself.
For reference, here is the complete codepen link: 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>