Light and Dark Theme using Mixin

Theme in SASS / SCSs

It is possible to switch between a dark and light theme using simple SCSS / SASS without much code lines. We can leverage Mixin to achieve the change in light and dark theme. Following is the code for creating Mixin which can easily switch between light and dark theme.

We will leverage two functions lighten and darken inside Mixin two achieve the functionality. Lighten function will help lighten the applied color, and darken function will help darken the used color.

$primary-color: #000000;
$text-color: #3af80a;
$secondary-color: #432396;
@mixin theme($light-theme: true) {
 @if $light-theme{
 background: lighten($primary-color, 100%);
 color: darken ($text-color, 100%);
 }
}

Now create a class called light and apply it to the body tag. Inside the light class now include the theme mixin to enable the theme switch property.

.light{
 @include theme ($light-theme: true);
}

If the $light-theme is true, the HTML page will apply a light theme, the background color will be light, and text color will be dark. If the $light-theme is false, the HTML page will apply a dark theme.

.light{
 @include theme ($light-theme: false);
}

The above code will create a dark background and light text color.