Dark Mode for ASP.NET MVC app theme wont switch

Question

I am trying to create a dark theme on my MVC application.

I already have a theme saved which the application uses when it starts

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-simplex.css" />

Below is my js on my site.js file

function updateStyleSheet(filename) {

    newstylesheet = "Content/" + filename + ".css";
    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");
        css.attr({
            id: "dynamic_css",
            rel: "stylesheet",
            type: "text/css",
            href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href", newstylesheet);
    }
}

below is what i use on my _Layout.cshtml page which is the theme i want to switch to.

 <input type="button" onclick="updateStyleSheet('bootstrap-slate')" value="Dark Mode">

I cant seem to get the switch of theme's to work, does anyone have any ideas why?

score 0 · Answer 1 · answered May 22 '20 at 08:04

Bootstrap 4 does not support dark mode natively. But there are ways to achieve this - see Guide to Dark Mode and Bootstrap.

The boostrap-night example can be easily be adapted to using Bootswatch themes.

I would recommend against using the Slate / Simplex combination as these themes have very different non-color styling (e.g. font, sizes, margins etc.) and the toggle would create a ugly transition effect. The combo of Flatly / Darkly are however identical in non-color styling and would have a very seamless (and cool) transition effect.

Dark Mode for ASP.NET MVC app theme wont switch

1 Answers1