ASP.NET MVC 应用程序主题的暗模式不会切换

Question

我正在尝试在我的 MVC 应用程序上创建一个深色主题。

我已经保存了应用程序启动时使用的主题

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

下面是我在我的 site.js 文件上的 js

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);
    }
}

下面是我在 _Layout.cshtml 页面上使用的内容，这是我要切换到的主题。

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

我似乎无法切换主题的工作，有人知道为什么吗？

Answer 1

Bootstrap 4 本身不支持暗模式。 但是有一些方法可以实现这一点 - 请参阅暗模式和引导指南。

boostrap-night示例可以很容易地适应使用 Bootswatch 主题。

我建议不要使用 Slate / Simplex 组合，因为这些主题具有非常不同的非颜色样式（例如字体、大小、边距等），并且切换会产生难看的过渡效果。 然而，Flatly / Darkly 的组合在非颜色样式上是相同的，并且会有非常无缝（和酷）的过渡效果。

Answer 2

它可以通过 javascript 作为按钮上的事件侦听器的一部分来完成。 看看这个类似的问题。