Customizing .NET's MVC template Part 1- The Dark Side
Tags: csharp, css, bootstrap, dotnet
Published: 2021-04-30 17:04:09

So you're beginning to build .NET MVC apps, but the problem is, every time you open your webpage, its the boring black on white text that looks unprofessional and bland.  I've chronicled a couple tweaks to make the site look better using bootstrap classes and a little bit of css.  

# The starting point
As an example, We'll use my MoviePro app, specifically the index of movies.  Its basically a movie database with standard CRUD functionality.  It is currently only hosted locally, but in a few weeks I should have a more complete version online.  

Right now, it looks very plain, like this: ![Base version of moviepro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m31d4dm4udahvfk0gequ.png)

As you can see, there's not much pleasant about the current design, but we're about to fix that.

# The light, It burns me.....
Lets try out some simple dark mode fixes for Bootstrap.

First, lets apply a bg-dark class to the body tag.  Seems very simple, except that my scaffolded index page doesn't have a body tag.  It may seem that way, but really, the scaffolded index takes in the shared layout.  Check Views/Shared/_Layout.cshtml, and note that your specific view will be rendered within the main tag.  
![Rendered Body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amb7lb9lrhir5t4qa6v7.png)
All the code for your index view, and every other view for that matter, goes within this.  If you scroll to the top of the document, you'll see a body tag.  Add `class="bg-dark"` to that.

![Better but not by much](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f07yslobshb6j0xn0hvj.png)

Oops, our navbar element stubbornly stayed dark, what we have to do here is make sure that the class is changed to `navbar-dark` instead of light.  Probably a good idea to fix the `bg-white` class at the same time, I'm going to use `bg-secondary` to try and provide a little separation between my navbar and the body of the page. (you can do the same for the footer element with the `bg-secondary` class, but you'll need to change the text color next step!)

![Nice and dark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgced09cacm1dx88a7d9.png)
Now its nice and dark but there's a major issue now.

# How can I read that?
Dark text on dark background is a MAJOR no no.  You can get away with dark text on the secondary background, but I think we should switch to a lighter text.  Let's do a simple find and replace on the shared layout changing `text-dark` to `text-light`.  That fixes the navbar, but not the body or footer.  The footer is at least in the same file so let's change the text-muted class to fix that. 

For the body, just add `text-light` to your classes after `bg-dark` Which should make things much more readable, except on your table.  for that, lets add a `table-dark` class to each index.  

The other thing I've done is changed my link color to a purple, specifically #6206EE for links which are also muted text (see part 2 for why) or links in a footer element, and #8D34FA for other links, which gave my links a bit of life compared to the default blue. I put this in my site.css:
![Sitecss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79d7265mnontn52d80y7.png)


This should leave you with a pleasing dark theme:

![finished dark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u93qgxtcyymmxsarw4vb.jpg)


# Bonus: Dark Inputs
I made my input boxes dark by adding `bg-secondary text-light` to my input and select elements on the create and edit pages.

In the next installment we'll make a few UI changes, getting us away from the standard table to make things more modern.


Cover image from unsplash.com