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
Miglioramenti agli screen reader e al contrasto in Angular
Usare il colore CSS per migliorare lo stile della pagina
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Reactive form tipizzati con modellazione del FormBuilder in Angular
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Creare un'applicazione React e configurare Tailwind CSS
Creare moduli CSS in React
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Miglioramenti nell'accessibilità con Angular CDK
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
I più letti di oggi
- Utilizzare DPAPI: cifrare dati sensibili
- Recuperare la foto dell'utente nelle Windows Store app
- What's new in Azure Functions and Extensions
- dal tuo PC o smartphone tra poco #aspilive: https://aspit.co/VS2015-live tutto su #vs2015, #windows10, #aspnet5 e altro ancora!
- Creare link alle risorse di DocumentDB con UriFactory
- Ottenere il nome esteso del mese
- Eventi personalizzati per l'HealhMonitoring di ASP.NET 2.0
- Utilizare la libreria subsink per eliminare le sottoscrizioni agli observable in Angular
- Ritardata l'uscita di BizTalk Server 2004
- Creare file di Excel al volo