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
- Aspnet Mvc
- Bootstrap 4
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:
— — — css
— — — images
— — — js
— — — libs
— — — scss
Let’s focus for now on scss folder. Starting to create three files:
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.
Now, if everything went well, on the command line, you should be able to build and compile your scss into css:
You can also use gulp from Visual Studio Task Runner Explorer, that can be found in Menu View -> Other Windows -> 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.
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.