How-To: Create Blazor Dark-Mode App with Bootstrap 5.3

General 3 Minutes

Many web applications today support dark-mode display because users (and especially developers) enough the benefit of reading content with a dark background. Blazor apps that are built with Bootstrap 5.3 can easily support dark mode in their applications. In this article, we will only focus on defaulting the application to dark-model… a future article will look into the ability to switch between different color modes.

First, we must have a Blazor project. Either open an existing Blazor project, or please follow the steps in the How-To: Create Blazor WASM Project article to create a new one. For this article, we called the project: BlazorHowTo.DarkModeApp.

Then, we need to change the generated Index.html file to the following:

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark-Mode App</title>
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="DarkModeApp.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    http://_framework/blazor.webassembly.js
    https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
</body>

</html>
  • Looking at line #9, we link in the latest version of Bootstrap (5.3) from their CDN.
  • On line #30, we also bring in the Bootstrap javascript library.
  • Finally on line #2, we set the data-bs-theme attribute to “dark”. This data attribute lets Bootstrap know that we’re setting the theme for the whole app to dark, which will allow it to pick the appropriate foreground and background colors to use in various components.

With just those changes, you will have a working dark-mode Blazor application. But you will notice that the sidebar and top row title bar in the template are hardcoded to light color theme applications. So we also make the following CSS changes to ensure the app looks great in dark mode.

In the MainLayout.razor.css file, make the following changes:

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, black 0%, var(--bs-body-bg) 70%);
}

.top-row {
    background-color: rgba(0,0,0,0.4);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
  • In line #12, we change the sidebar to have a dark gradient to better fit into the application color scheme.
  • In line #16, we make the top-bar have a semi-transparent background so it will look good when the backgrounds change color.

Now when we run the application, you will see the following screens. And since we created the default Blazor application, it comes with three different pages that we can test out (home, counter, and weather).

As we can see from the Weather page, even the theming for complex components, like tables, respects the color theme that was set at the page level.

In conclusion, we have easily updated our Blazor application to support default dark mode. Just by changing some simple styling information and using the data-bs-theme attribute, we can skin our app in a completely different way. Bootstrap also has the ability to toggle these changes at runtime (which we will investigate in a separate article) and support additional color themes beyond light and dark (if we want to provide all of the color mappings for a custom theme ourselves).

Published

Leave a comment