NostrDebug - dark mode

Marfusios · Jul 27, 2023 · 0c273be · 0c273be
1 parent f62788b
commit 0c273be
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 20 deletions.
diff --git a/apps/nostr-debug/NostrDebug.Web/App.razor b/apps/nostr-debug/NostrDebug.Web/App.razor
@@ -1,13 +1,11 @@
-@*<FluentDesignSystemProvider AccentBaseColor="@OfficeColor.Word.ToAttributeValue()" BaseLayerLuminance="@StandardLuminance.LightMode.GetLuminanceValue()" FillColor="#fbfbfb" class="full-height">*@
- <Router AppAssembly="@typeof(App).Assembly">
- <Found Context="routeData">
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
- </Found>
- <NotFound>
- <PageTitle>Not found</PageTitle>
- <LayoutView Layout="@typeof(MainLayout)">
- <p role="alert">Sorry, there's nothing at this address.</p>
- </LayoutView>
- </NotFound>
- </Router>
-@*</FluentDesignSystemProvider>*@
+<Router AppAssembly="@typeof(App).Assembly">
+ <Found Context="routeData">
+ <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+ </Found>
+ <NotFound>
+ <PageTitle>Not found</PageTitle>
+ <LayoutView Layout="@typeof(MainLayout)">
+ <p role="alert">Sorry, there's nothing at this address.</p>
+ </LayoutView>
+ </NotFound>
+</Router>
diff --git a/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor b/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor
@@ -1,15 +1,19 @@
-@inherits LayoutComponentBase
+@using Microsoft.Fast.Components.FluentUI.DesignTokens
+@inherits LayoutComponentBase
 @inject RelayList Relays
+@inject GlobalState GlobalState
+@inject BaseLayerLuminance BaseLayerLuminance
+@inject IJSRuntime JsRuntime
 
-<div class="container">
+<div class="container" @ref="_container">
  <div class="siteheader">
  <a class="logo" href="/">
  <p class="logo-text">
  <span>Nostr</span>Debug
  </p>
  </a>
 
- <a class="m-left-auto m-r-2 clear-link cursor-hand menu-link" style="line-height: 44px" @onclick="OnDisplayRelayDialog">
+ <a class="m-left-auto clear-link cursor-hand menu-link" style="line-height: 44px" @onclick="OnDisplayRelayDialog">
 
  @if (Relays.AreAllConnected && Relays.IsAnyConnected)
  {
@@ -27,9 +31,17 @@
  <span class="m-l">Relays</span>
 
  </a>
+
+ <div class="menu-link" style="line-height: 44px">
+ <FluentSwitch @bind-Value="@_inDarkMode" @onchange="SwitchTheme" title="Switch theme">
+ <span class="label">Theme</span>
+ <span slot="unchecked-message">light</span>
+ <span slot="checked-message">dark</span>
+ </FluentSwitch>
+ </div>
 
  <div class="git-repo menu-link" style="line-height: 44px">
- <a class="clear-link" href="https://github.com/marfusios/nostr-client-websocket" target="_blank">Github Repository</a>
+ <a class="clear-link" href="https://github.com/marfusios/nostr-client-websocket" target="_blank">Github</a>
  </div>
  </div>
  <div class="main">
@@ -62,9 +74,13 @@
 </FluentDialog>
 
 @code {
+ private ElementReference _container;
  private FluentDialog? _relayDialog;
 
  private ErrorBoundary? _errorBoundary;
+ private bool _inDarkMode;
+ private StandardLuminance _baseLayerLuminance = StandardLuminance.LightMode;
+ private IJSObjectReference? _jsModule;
 
  protected override void OnParametersSet()
  {
@@ -81,10 +97,21 @@
  await base.OnInitializedAsync();
  }
 
- protected override void OnAfterRender(bool firstRender)
+ protected override async Task OnAfterRenderAsync(bool firstRender)
  {
  if (firstRender)
+ {
  _relayDialog!.Hide();
+
+ _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import",
+ "./Components/MainLayout.razor.js");
+
+ _inDarkMode = await _jsModule!.InvokeAsync<bool>("isDarkMode");
+
+ SwitchTheme();
+ StateHasChanged();
+ }
+
  }
 
  private void OnDisplayRelayDialog()
@@ -94,9 +121,20 @@
 
  private void OnHideRelayDialog(DialogEventArgs? args)
  {
- if (args?.Reason != null && args.Reason == "dismiss")
+ if (args?.Reason is "dismiss")
  {
  _relayDialog!.Hide();
  }
  }
+
+ private async void SwitchTheme()
+ {
+ await Task.Delay(50);
+
+ _baseLayerLuminance = _inDarkMode ? StandardLuminance.DarkMode : StandardLuminance.LightMode;
+ await BaseLayerLuminance.SetValueFor(_container, _baseLayerLuminance.GetLuminanceValue());
+ GlobalState.SetLuminance(_baseLayerLuminance);
+
+ // await _jsModule!.InvokeVoidAsync("switchHighlightStyle", _baseLayerLuminance == StandardLuminance.DarkMode);
+ }
 }
diff --git a/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor.js b/apps/nostr-debug/NostrDebug.Web/Components/MainLayout.razor.js
@@ -0,0 +1,31 @@
+export function isDevice() {
+ return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
+}
+
+export function switchHighlightStyle(dark) {
+ if (dark) {
+ document
+ .querySelector(`link[title="dark"]`)
+ .removeAttribute("disabled");
+ document
+ .querySelector(`link[title="light"]`)
+ .setAttribute("disabled", "disabled");
+ }
+ else {
+ document
+ .querySelector(`link[title="light"]`)
+ .removeAttribute("disabled");
+ document
+ .querySelector(`link[title="dark"]`)
+ .setAttribute("disabled", "disabled");
+ }
+}
+
+export function isDarkMode() {
+ let matched = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+ if (matched)
+ return true;
+ else
+ return false;
+}
diff --git a/apps/nostr-debug/NostrDebug.Web/Relay/RelayConnection.cs b/apps/nostr-debug/NostrDebug.Web/Relay/RelayConnection.cs
@@ -54,6 +54,7 @@ public void Dispose()
 
  public async Task<bool> Connect(string? relayUrl)
  {
+ await Task.CompletedTask;
  IsUsed = true;
  if (_communicator.IsRunning)
  {

diff --git a/apps/nostr-debug/NostrDebug.Web/wwwroot/css/app.css b/apps/nostr-debug/NostrDebug.Web/wwwroot/css/app.css
@@ -7,6 +7,7 @@ body {
  font-family: var(--body-font);
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
+ background-color: transparent;
  margin: 0;
  height: 100%;
 }
@@ -25,11 +26,12 @@ body {
  "siteheader"
  "main";
  height: 100%;
+ background-color: var(--fill-color);
 }
 
 .siteheader {
  grid-area: siteheader;
- background-color: #f7f7f7;
+ background-color: var(--neutral-layer-card-container);
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-start;
  height: 3.5rem;
@@ -78,6 +80,7 @@ body {
 .menu-link {
  padding-left: 10px;
  padding-right: 10px;
+ color: var(--accent-foreground-rest);
 }
 
  .menu-link:hover {