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: 
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.
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.
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!)
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:
This should leave you with a pleasing dark theme:
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
Oldest comments (0)