NostrDebug - dark mode fixes

Marfusios · Jul 28, 2023 · b755b50 · b755b50
1 parent 0c273be
commit b755b50
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 19 deletions.
diff --git a/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor b/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor
@@ -1,9 +1,11 @@
 @using Microsoft.Fast.Components.FluentUI.DesignTokens
+@using Blazored.LocalStorage
 @inherits LayoutComponentBase
 @inject RelayList Relays
 @inject GlobalState GlobalState
 @inject BaseLayerLuminance BaseLayerLuminance
 @inject IJSRuntime JsRuntime
+@inject ILocalStorageService LocalStorage
 
 <div class="container" @ref="_container">
     <div class="siteheader">
@@ -65,15 +67,16 @@
             </main>
         </div>
     </div>
+
+    <FluentDialog @ref="_relayDialog" Modal="true" TrapFocus="true" @ondialogdismiss="OnHideRelayDialog">
+        <div class="dialog-content">
+            <Relay></Relay>
+        </div>
+    </FluentDialog>
 </div>
 
-<FluentDialog @ref="_relayDialog" Modal="true" TrapFocus="true" @ondialogdismiss="OnHideRelayDialog">
-    <div class="dialog-content">
-        <Relay></Relay>
-    </div>
-</FluentDialog>
-
 @code {
+    private const string DarkModeKey = "darkMode";
     private ElementReference _container;
     private FluentDialog? _relayDialog;
 
@@ -106,9 +109,10 @@
             _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import",
                 "./Components/MainLayout.razor.js");
 
-            _inDarkMode = await _jsModule!.InvokeAsync<bool>("isDarkMode");
+            var lastDarkMode = await LocalStorage.GetItemAsync<bool?>(DarkModeKey);
+            _inDarkMode = lastDarkMode ?? await _jsModule!.InvokeAsync<bool>("isDarkMode");
 
-            SwitchTheme();
+            await SwitchTheme();
             StateHasChanged();
         }
 
@@ -127,14 +131,15 @@
         }
     }
 
-    private async void SwitchTheme()
+    private async Task SwitchTheme()
     {
         await Task.Delay(50);
 
         _baseLayerLuminance = _inDarkMode ? StandardLuminance.DarkMode : StandardLuminance.LightMode;
         await BaseLayerLuminance.SetValueFor(_container, _baseLayerLuminance.GetLuminanceValue());
         GlobalState.SetLuminance(_baseLayerLuminance);
-
+        await LocalStorage.SetItemAsync(DarkModeKey, _inDarkMode);
+
         // await _jsModule!.InvokeVoidAsync("switchHighlightStyle", _baseLayerLuminance == StandardLuminance.DarkMode);
     }
 }
diff --git a/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor.css b/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor.css
@@ -0,0 +1,7 @@
+::deep .label {
+    color: var(--neutral-foreground-rest);
+}
+
+.label {
+    color: var(--neutral-foreground-rest);
+}
diff --git a/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEdit.razor.css b/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEdit.razor.css
@@ -1 +1,3 @@
-
+::deep .positioning-region {
+    background-color: transparent;
+}
diff --git a/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEditJsonDialog.razor b/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEditJsonDialog.razor
@@ -1,6 +1,8 @@
 @using Newtonsoft.Json
 @using Nostr.Client.Json
 @using BlazorMonaco.Editor;
+@using Blazored.LocalStorage
+@inject ILocalStorageService LocalStorage
 
 <FluentDialog @ref="_eventDialog" Modal="true" TrapFocus="true" @ondialogdismiss="OnHideEvent">
     <div class="content">
@@ -24,7 +26,7 @@
     private string? _data;
     private string? _error;
 
-    private readonly string _themeName = "vs";
+    private string _themeName = "vs";
 
     [Parameter]
     public EventCallback<NostrEvent> Applied { get; set; }
@@ -53,6 +55,9 @@
 
     protected override async Task OnInitializedAsync()
     {
+        var isDarkTheme = await LocalStorage.GetItemAsync<bool?>("darkMode");
+        _themeName = isDarkTheme == true ? "vs-dark" : "vs";
+
         await Global.SetTheme(_themeName);
         await base.OnInitializedAsync();
     }

diff --git a/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEditJsonDialog.razor.css b/apps/nostr-debug/NostrDebug.Web/Events/NostrEventEditJsonDialog.razor.css
@@ -1,18 +1,19 @@
 ::deep .monaco-editor-container {
     width: 100%;
     height: 400px;
+    background-color: var(--fill-color);
 }
 
 ::deep .monaco-editor-background {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 ::deep .monaco-editor .margin {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 ::deep .decorationsOverviewRuler {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 .content {

diff --git a/apps/nostr-debug/NostrDebug.Web/Events/NostrFilterEditJsonDialog.razor b/apps/nostr-debug/NostrDebug.Web/Events/NostrFilterEditJsonDialog.razor
@@ -2,6 +2,8 @@
 @using Nostr.Client.Json
 @using BlazorMonaco.Editor;
 @using Nostr.Client.Requests
+@using Blazored.LocalStorage
+@inject ILocalStorageService LocalStorage
 
 <FluentDialog @ref="_dialog" Modal="true" TrapFocus="true" @ondialogdismiss="OnHideEvent">
     <div class="content">
@@ -25,7 +27,7 @@
     private string? _data;
     private string? _error;
 
-    private readonly string _themeName = "vs";
+    private string _themeName = "vs";
 
     [Parameter]
     public EventCallback<NostrFilter> Applied { get; set; }
@@ -43,6 +45,9 @@
 
     protected override async Task OnInitializedAsync()
     {
+        var isDarkTheme = await LocalStorage.GetItemAsync<bool?>("darkMode");
+        _themeName = isDarkTheme == true ? "vs-dark" : "vs";
+
         await Global.SetTheme(_themeName);
         await base.OnInitializedAsync();
     }

diff --git a/apps/nostr-debug/NostrDebug.Web/Events/NostrFilterEditJsonDialog.razor.css b/apps/nostr-debug/NostrDebug.Web/Events/NostrFilterEditJsonDialog.razor.css
@@ -1,18 +1,19 @@
 ::deep .monaco-editor-container {
     width: 100%;
     height: 400px;
+    background-color: var(--fill-color);
 }
 
 ::deep .monaco-editor-background {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 ::deep .monaco-editor .margin {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 ::deep .decorationsOverviewRuler {
-    background-color: #fbfbfb;
+    background-color: var(--fill-color);
 }
 
 .content {