Il template di un'applicazione Blazor prevede un menù laterale con sfondo viola e il contenuto all'interno di pagine con sfondo bianco, un accomppiamento che può non essere adeguato alle nostre esigenze, o troppo limitato, nel caso in cui volessimo offrire ai nostri utenti la possibilità di cambiare tema. Vediamo dunque come modificare o gestire temi differenti utilizzando il localstorage e CSS.
Il primo passo consiste nel fornire all'utente un metodo per cambiare il tema corrente, possiamo utilizzare controlli checkbox, radio oppure una select, modificando la barra superiore dell'interfaccia, nel file MainLayout.razor, otterremo il seguente risultato
<div class="top-row px-4"> <select class="form-control" @bind="CurrentTheme" style="width:150px; margin: 0 10px;"> <option value="light">Chiaro</option> <option value="dark">Scuro</option> </select> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div>
Come si può notare, abbiamo utilizzato una proprietà CurrentTheme, che andremo a definire nella sezione @code della pagina. L'obiettivo è salvare il valore selezionato all'interno del localstorage e recuperarlo al momento del caricamento tramite l'utilizzo di un istanza IJSRuntime e OnInitializedAsync
@inject IJSRuntime jsRuntime @code{ string _currentTheme; string CurrentTheme { get => _currentTheme; set { _currentTheme = value; jsRuntime.InvokeVoidAsync("localStorage.setItem", "theme", _currentTheme); } } protected override async Task OnInitializedAsync() { _currentTheme = await jsRuntime.InvokeAsync<string>("localStorage.getItem", "theme"); await base.OnInitializedAsync(); } }
Completiamo l'implementazione aggiungendo il valore della proprietà CurrentTheme nell'HTML, nella classe del div contenente tutto il layout, e inseriamo il CSS, in wwwroot/css/app.css, che modificherà l'aspetto della pagina in base alla scelta effettuata.
<div class="page @CurrentTheme"> <div class="sidebar"> <NavMenu /> </div> <main> </main> </div>
.page.dark { background-color: rgb(30,30,30); color: #ccc; } .page.dark .top-row { background-color: rgb(25,25,25) !important; border-color: rgb(20,20,20) !important; } .page.dark .sidebar .top-row { background-color: rgb(15,15,15) !important; border-color: rgb(15,15,15) !important; } .page.dark .sidebar { background-image: linear-gradient(180deg, rgb(85,85,85) 0%, rgb(17,17,17) 70%) !important; } .page.dark a, .page.dark .btn-link { color: rgb(143,214,3); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Usare le collection expression per inizializzare una lista di oggetti in C#
Copiare automaticamente le secret tra più repository di GitHub
Potenziare Azure AI Search con la ricerca vettoriale
Generare token per autenicarsi sulle API di GitHub
Definire stili a livello di libreria in Angular
Creare gruppi di client per Event Grid MQTT
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Sfruttare lo streaming di una chiamata Http da Blazor
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Paginare i risultati con QuickGrid in Blazor
Utilizzare le collection expression in C#
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload