Add Dark Mode to ASP.NET Core in Just ONE Line of Code!

Introducing the Dark Mode Feature in ASP.NET Core

Tim starts the tutorial by addressing a common requirement in modern web apps — enabling dark mode in ASP.NET Core. Whether you're using Blazor, MVC, or Razor Pages, Bootstrap 5.3 introduces support for dark themes in a very simple way.

As Tim explains, this dark mode feature can be activated with a single line of code — making it a fast and effective solution for developers who want to enhance their website’s user interface. The new dark mode support is especially useful for users who prefer a light theme or dark interface based on their system settings or personal preference.

Checking Bootstrap Version in a Blazor Web App

Tim uses Visual Studio to walk through a Blazor web app project. He navigates to the wwwroot folder and opens the bootstrap.min.css file to confirm that the app is using Bootstrap version 5.3.3. At 1:01, he notes that version 5.3 or higher is required to support dark mode.

If your project already uses this version or later, there’s no need to update Bootstrap or include extra tools. This is a crucial step because older versions of Bootstrap do not support theme switching using the data-bs-theme attribute.

One Line of Code to Enable Dark Theme

At this point, Tim opens the App.razor file. He highlights the

data-bs-theme="dark"

This simple addition tells Bootstrap to apply the dark color scheme across your pages and elements. Tim runs the app before and after adding the line to show the contrast. At 2:03, he switches on the dark mode and confirms that the theme updates instantly.

Adjusting for Custom CSS in Dark Mode

Tim points out that while this one-liner changes the overall background color and theme, existing CSS might still conflict with the dark theme. For example, white text, font sizes, or backgrounds hardcoded in your CSS files won’t adjust automatically.

As Tim notes at 2:34, the more custom styles you've written, the more you’ll need to edit and test. That’s why he recommends starting with dark mode early in development, when fewer elements need adjustment.

Switching Between Light and Dark Themes

At 2:50, Tim highlights that you can also toggle between dark and light themes. By changing the attribute to data-bs-theme="light", you activate the light theme again:

data-bs-theme="light"

Tim suggests that developers could allow users to choose their theme preference — for example, by adding a toggle switch using JavaScript or server-side logic.

This ability to switch between dark and light themes is increasingly expected by users, especially on Windows apps or mobile devices where prefers-color-scheme is automatically detected.

Fixing Layout Conflicts in ASP.NET Core

One of the common challenges, Tim explains, is inconsistent styles on certain elements — like the top navigation bar. At 3:12, he shows how a layout-specific CSS file (MainLayout.razor.css) overrides default Bootstrap properties.

He finds a .top-row selector setting a color directly, which doesn’t respond to the theme setting. His fix: remove the color property so Bootstrap can manage the style based on the current theme (3:47).

After removing the override, the dark theme looks cleaner. And when he switches back to the light theme, it still works — showing that Bootstrap dynamically applies color values based on the chosen theme.

Using Theme-Specific CSS Rules

At 4:17, Tim offers another helpful tip: developers can use theme detection inside their CSS to apply different styles depending on the active mode. This lets you respond to the data-bs-theme value and style your app accordingly.

For instance, you can adjust font size, text color, or even images based on whether the user has selected dark or light mode. This adds flexibility for those who want a new theme experience without building two separate stylesheets.

Applying Dark Mode in MVC Projects

Next, Tim moves to an older ASP.NET MVC project to show how to enable dark mode in apps that don’t yet use Bootstrap 5.3. When he opens the Bootstrap CSS file, he notices it’s version 5.1.0, which does not support dark mode (5:07).

Upgrading Bootstrap in MVC with CDN

Tim recommends replacing the local Bootstrap file with the CDN version from the GetBootstrap website. At 5:51, he pastes the CDN links into the _Layout.cshtml view, updating both the CSS and JavaScript includes.

By doing so, the MVC app now supports theme switching, thanks to the newer version of Bootstrap. He also notes that CDNs may help speed up your website, especially for first-time visitors.

Adjusting Navigation Styling for Dark Mode

After enabling the dark theme, Tim finds that some navbar styles conflict with it. At 6:40, he removes navbar-light and bg-white classes that force light colors, which disrupt the dark appearance.

Once removed, the navigation bar adapts properly to dark mode. But Tim cautions that other text elements or components with overridden colors may still need to be addressed manually (6:57). This is where you might want to write theme-aware CSS or use CSS variables for easier management.

Summary: Bootstrap 5.3 Theme Support

Tim closes by reiterating that Bootstrap 5.3 fully supports both dark and light themes, but your custom CSS may not. If you’ve structured your styles properly, using classes and avoiding hardcoded colors, switching themes becomes smoother.

At 8:00, he emphasizes that simply adding:

data-bs-theme="dark"

to your

Final Tip from Tim Corey

If you're serious about Bootstrap or theming in ASP.NET Core, Tim also has a complete Bootstrap course that goes into deeper concepts including layout systems, theming strategies, and accessibility best practices.

By following Tim Corey’s video tutorial, you can implement dark mode in your ASP.NET Core app in just one step — and fine-tune it using custom CSS, theme detection, and toggle functionality. Whether you're building apps for Windows, the web, or other platforms, this method gives you the flexibility to switch themes effortlessly and keep your users happy.