我正在創建一個. net毛伊島Blazor混合應用程序。在這里，我想創建一個黑暗和光明的主題使用css樣式表(沒有MudBlazor)。

我現在嘗試的是使用包含正確顏色的lightMode.css和darkMode.css。當黑暗模式打開時，MainLayout以及所有頁面都應該使用darkMode.css

MainLayout.razor中的示例:

<HeadContent>
    @if (isDark)
    {
        <link href="css/darkMode.css" rel="stylesheet"/>
    }
    else
    {
        <link href="css/lightMode.css" rel="stylesheet"/>
    }   
</HeadContent>

// HTML and c# here

然而，這是行不通的。查看頁面，這些headcontent都不在頁面的標記中，將它們直接添加到index.html頁面只會導致最后一個文件被應用。

我在這里看過其他解決方案，但是他們從來沒有提到他們是如何用css實現的，就像這篇文章:我的毛伊島應用程序的光與暗主題

關于如何用css實現暗/亮主題，有什么建議嗎？其他想法也是受歡迎的，但在我看來這是最簡單的一個。

提前感謝。

我最終做得略有不同，因為我無法讓HeadContent工作(可能是因為我移除了bootstrap部分，因為我想完全做自己的樣式)。

我最終選擇了這個答案的修改版:https://stackoverflow.com/a/63563797/17389553，作者是@benjamin。我不在HTML元素中添加或刪除類。

然而，通過使用這種直接的html/js元素操縱器，我簡單地得到了& lthead & gt元素，然后是樣式表& ltlink & gt它包含主題css文件，并根據開關切換亮/暗。

我將在這里更深入地描述它。

我的代碼: 在我的mainlay your . razor類中，我添加了這樣一行簡單的代碼:

<ElementManipulator IsDarkTheme="_isDark"></ElementManipulator>

其中_isDark由一個簡單的切換按鈕提供。

這個類是在ElementManipulator.razor中定義的:

@inject IJSRuntime JSRuntime

@code {

    protected override async Task OnParametersSetAsync()
    {
        if (IsDarkTheme is not null)
            await JSRuntime.InvokeVoidAsync("toggleThemeStyleSheet", IsDarkTheme);
    }

    [Parameter]
    public bool? IsDarkTheme { get; set; }
}

它調用javascript文件ElementManipulator.js中的toggleThemeStyleSheet函數:

var getHeadElement = function () {
    return document.getElementsByTagName("head")[0];
};

var toggleThemeStyleSheet = function (isDarkTheme) {
    let themeLink = getHeadElement().getElementsByClassName("theme")[0];
    let theme = isDarkTheme ? "darkTheme.css" : "lightTheme.css";
    themeLink.href = "_content/MyProject.UI/css/" + theme;
};

然后用darkTheme.css替換lightTheme.css，反之亦然。