Für Leute wie mich, die jedes Mal, wenn ich eine Webseite öffne, unter Flashbacks leiden, habe ich eine supereinfache Lösung gefunden, wie man mit Javascript zwischen hellem und dunklem Modus umschaltet und es von Blazor aus mit Javascript Interop aufruft.

Festlegen des übergeordneten Attributs

Zunächst müssen wir das übergeordnete Element mit einem Bezeichner identifizieren, da wir die Farben abhängig vom Wert dieses Bezeichners ändern.

Um dies in Javascript zu tun, müssten wir diesen Befehl ausführen

document.documentElement.setAttribute('data-theme', 'YOUR_IDFENTIFIER');

In unserem Fall möchten wir zwei Bezeichner für jeden Stiltyp haben, nämlich light und dark.

Erstellen einer Javascript-Datei zur Handhabung der Logik

Jetzt haben wir die Funktion, die Kennung zu aktualisieren. Jetzt erstellen wir eine Javascript-Datei mit einer Funktion, die diese Logik ausführt. Unsere Datei wird app.js heißen.

In dieser Datei haben wir eine Funktion, die den zuvor erwähnten Code aufruft.

var toggleTheme = function (identifier) {
    document.documentElement.setAttribute('data-theme', identifier);
}

Javascript-Datei zu Blazor hinzufügen

Fügen Sie das Skript zur Blazor-Anwendung hinzu, indem Sie es dort hinzufügen, wo sich die Skripte befinden.

<script src="~/js/app.js"></script>

Den Dienst erstellen

Nachdem wir nun den Javascript-Code haben, müssen wir einen Dienst erstellen, der ThemeToggleService heißt.

Dieser Dienst übernimmt die Logik zum Umschalten zwischen dem Thema light und dark.

JSInterop injizieren

Um ein beliebiges Javascipt aufzurufen, müssen wir JSInterop aufrufen, also müssen wir eine Eigenschaft erstellen, die injiziert.

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorDarkmodeToggle.Data
{
    private readonly IJSRuntime jSRuntime;

    public ThemeToggleService(IJSRuntime jSRuntime)
    {
        this.jSRuntime = jSRuntime;
    }
}

Funktion zum Festlegen der Kennung

Nachdem wir nun den Dienst erstellt haben, erstellen wir die Funktion zum Festlegen der Kennung. Diese Funktion aktualisiert lediglich den data-theme auf der Seite.

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorDarkmodeToggle.Data
{
    public class ThemeToggleService
    {
        private readonly IJSRuntime jSRuntime;

        public ThemeToggleService(IJSRuntime jSRuntime)
        {
            this.jSRuntime = jSRuntime;
        }

        public bool IsLightTheme { get; set; } = true;
        public string GetIdentifier => IsLightTheme ? "light" : "dark";

        public async Task ToggleTheme() {
            IsLightTheme = !IsLightTheme;
            await jSRuntime.InvokeVoidAsync("toggleTheme", GetIdentifier);
        }
    }
}

Dienst zum Start hinzufügen

Um den Dienst für alle Komponenten und Seiten verfügbar zu machen, müssen wir ihn zur Datei Program.cs hinzufügen.

builder.Services.AddSingleton<ThemeToggleService>();

Die Datei wird also so aussehen

using BlazorDarkmodeToggle.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSingleton<ThemeToggleService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Beachten Sie, dass sich dies ändern kann, je nachdem, ob Sie Blazor Server oder Blazor WebAssembly verwenden.

Das CSS backen

Nachdem wir nun einen Teil des Codes fertig haben, müssen wir mit der Arbeit am CSS beginnen. Was wir tun müssen, ist, alle CSS-Eigenschaften, die die CSS-Farben, den Hintergrund usw. verarbeiten, auf eine Variable zu setzen.

:root {
    --background-color:#ffffff;
    --text-color:#000000;
}

Sobald wir dies getan haben, können wir mithilfe des Bezeichners problemlos zwischen den Bezeichnern wechseln und einen der anderen Werte verwenden.

[data-theme="dark"] {
    --background-color: #000000;
    --text-color: #ffffff;
}

Für das coole Animations-Fading fügen wir einfach allen eine transition-Eigenschaft hinzu, damit es gut aussieht.

* {
    transition: all 250ms;
}

Jetzt werden wir diese Variablen einigen CSS-Klassen zuweisen, damit wir sie auf der Blazor-Seite sehen können.

.app-background {
    background-color: var(--background-color);
    width: 200px;
    height: 200px;
}

.app-text {
    color: var(--text-color);
}

Denken Sie daran, die Datei zur Blazor-Anwendung hinzuzufügen, indem Sie sie im head hinzufügen.

<link href="css/app.css" rel="stylesheet" />

Anruf von Blazor

Wie werden wir das also testen? Um es einfach zu halten, fügen wir einfach ein Div mit der Klasse app-background hinzu und darin befindet sich ein p mit der Klasse app-text.Erstellen wir also eine Seite mit dem Namen Theme.razor im Ordner Pages und fügen Sie dafür Code hinzu

@page "/theme"
@using BlazorDarkmodeToggle.Data
@inject ThemeToggleService ThemeToggleService

<button class="btn btn-primary" @onclick=Toggle>Toggle theme</button>

<br />

<div class="app-background">
    <p class="app-text">Hello world!</p>
</div>

@code{
    public async Task Toggle()
    {
        await this.ThemeToggleService.ToggleTheme();
    }
}

Wir könnten dies testen, indem wir zu /theme gehen, aber fügen wir es auch der Navigationsleiste hinzu

<div class="nav-item px-3">
    <NavLink class="nav-link" href="theme">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Theme togle
    </NavLink>
</div>

Testen

Wie Sie sehen, können Sie sehen, wie leistungsstark das ist, sobald wir die Änderungen an Design, Hintergrund und Schriftfarbe umschalten. Wenn Sie tatsächlich die gesamte Seite mit diesen Variablen in CSS entwickeln, könnten Sie verschiedene Designs haben und diese einfach umschalten!

Wie großartig!!

Code

Das gesamte Projekt ist auf Github und Sie können es hier finden!

Wenn Sie Probleme oder Fragen haben, können Sie mich gerne über die sozialen Medien unter @emimontesdeoca kontaktieren (auf Twitter ist es eigentlich @emimontesdeocaa mit zwei aa am Ende). Die meisten meiner sozialen Netzwerke finden Sie auch in der Kopfzeile des Blogs.

Ich hoffe, Ihnen hat der Beitrag gefallen!

Ressourcen

• JavaScript-Funktionen von .NET-Methoden in ASP.NET Core Blazor aufrufen