Light and Dark theme with ASP NET Core using SASS and Gulp

Dark themes are very popular nowadays and there’s reasons behind that. The first reason (may not come by this order) is the aesthetics: it’s beautiful. Second, very helpful in the night, your eyes can focus really easy without trying very hard. Third, battery! That’s right! Battery lifetime is saved if your screen (tablet, mobile or desktop) is LED. The black color means a turn off pixels, which means, battery saved.

Well, there’s tons of reasons why should you implement light/dark themes. Mac OS already has, Windows 10, iOS is going to in the next big release, iOS 13, YouTube, Visual Studio, Twitter and even Medium has night mode implemented in iOS and Android.

In this tutorial I’m going to write my approach to easily implement light/dark themes using:

  • Dotnet Core

You can use different tools, the goal is exactly the same. There’s nothing new here, just a step-by-step to guide you though it.

At Rezult IO we use our wwwroot folder structure as following:

— wwwroot

— — — css

— — — images

— — — js

— — — libs

— — — scss

As you can guess, scss folders contains all SASS files, libs all external libraries, js my javascript files, images well, images and finally css, the compiled css files.

Let’s focus for now on scss folder. Starting to create three files:

  • _variables.scss

On the _variables.scss file we can set up all our normal variables and imports

Please make sure you unzip bootstrap 4 with sass in the libs folder.

Here comes the fun part. Creating both light and dark themes. Let’s start with the dark theme.

As you can see, the file structure it’s quite simple. Initially we have the common variables imported and defined. Then we set up our own colours and in the end, we import the bootstrap library.

Let’s look at the light theme:

Quite simple, right? Now, lets build the SASS into CSS and compile it with gulp. For that, let’s also use BuildBundlerMinifier, a nuget package that saves us some time.

Let’s start by adding our package.json file. You can do this manually or use npm.

After adding this file, don’t forget to install these packages using npm install.

And now, our gulpfile.js:

Finally, just missing the BuildBundlerMinifier. When you install this package, a new file will appear in your solution: bundleconfig.json.

For this tutorial, we only need this. Check out the project wiki to learn more about javascript minify and uglify, which this tool does, quite easily.

Now, if everything went well, on the command line, you should be able to build and compile your scss into css:

Powershell that allows me to run gulp

You can also use gulp from Visual Studio Task Runner Explorer, that can be found in Menu View -> Other Windows -> Task Runner Explorer:

Where to find Task Runner Explorer
Task Runner Explorer

Now we can see that our css folder has app-light.css and app-dark.css. Besides these two files we also have the minified version.

How to implement this with asp net core? Well, there are several ways. You can save this in the User Profile, in the database or you don’t care about users and you have cookies to do this. In this tutorials we are going to use cookies.

One simple strategy to implement this is give the user the option to choose light or dark theme in the top navigation menu. The user choice will generate an HTTP Post request and add a cookie with the choose value. We’ll add an BaseController that will set a ViewData variable with that value.

You can list your themes by creating a helper class that types all your themes within your system.

Now, you just need the create the controller action to set the theme color.

As you can see it’s quite straight forward. You can extend your solution to add more themes, according to your project colours or ideas.

Co-Founder at Rezult IO, full time Geek, Engineer and Web Enthusiastic