Listening for browser and device theme changes and updating

[nhwilly]

I spent some time yesterday creating a small service that will allow my app to respond to a user changing their theme preference.

Seems to work pretty well.

Does this already exist in BitUi?

If not, would you like me to share it? If so, where?

[ysmoradi]

Greetings! Could you please (If possible) share the working sample with us?

[nhwilly]

Sure. There's not much to it, so I'll just paste the code in here. If that's a problem, I can attach instead.

/* themeDetector.js */
let dotNetHelper = null;
let darkModeQuery = null;
let handler = null;

function initializeThemeChangeObserver(dotNetRef) {
    dotNetHelper = dotNetRef;
    darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

    handler = (event) => {
        const theme = event.matches ? 'dark' : 'light';
        if (dotNetHelper) {
            dotNetHelper.invokeMethodAsync('RaiseOnThemeChange', theme);
        }
    };

    darkModeQuery.addEventListener('change', handler);

    // Fallback for older browsers
    if (darkModeQuery.addListener) {
        darkModeQuery.addListener(handler);
    }
}

function disposeThemeChangeObserver() {
    if (darkModeQuery && handler) {
        darkModeQuery.removeEventListener('change', handler);
        if (darkModeQuery.removeListener) {
            darkModeQuery.removeListener(handler);
        }
    }
    darkModeQuery = null;
    handler = null;
    dotNetHelper = null;
}

export const themeChangeObserverInterop = {
    initializeThemeChangeObserver,
    disposeThemeChangeObserver
};

using Microsoft.JSInterop;

public sealed class SystemThemeListenerService : IAsyncDisposable
{
  private readonly IJSRuntime _jsRuntime;
  private IJSObjectReference? _module;
  private DotNetObjectReference<SystemThemeListenerService>? _dotNetRef;

  public event Func<string, Task>? OnThemeChanged;

  public SystemThemeListenerService(IJSRuntime jsRuntime)
  {
    _jsRuntime = jsRuntime;
  }

  public async Task InitializeAsync()
  {
    if (_module is not null) return;

    _dotNetRef = DotNetObjectReference.Create(this);
    _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/ThemeDetector.js");
    await _module.InvokeVoidAsync("themeChangeObserverInterop.initializeThemeChangeObserver", _dotNetRef);
  }

  [JSInvokable]
  public void RaiseOnThemeChange(string theme)
  {
    OnThemeChanged?.Invoke(theme);
  }

  public async ValueTask DisposeAsync()
  {
    if (_module is not null)
    {
      try
      {
        await _module.InvokeVoidAsync("themeChangeObserverInterop.disposeThemeChangeObserver");
        await _module.DisposeAsync();
      }
      catch { /* Safe to ignore on shutdown */ }
    }

    _dotNetRef?.Dispose();
  }
}

Register it in both App and App.Client program.cs:

builder.Services.AddScoped<SystemThemeListenerService>();

Inject it into MainLayout:

@inject SystemThemeListenerService SystemThemeListenerService

Subscribe in OnAfterRenderAsync

SystemThemeListenerService.OnThemeChanged += NotifyThemeChanged;

Handle the change:

public async Task NotifyThemeChanged(string theme)
{
  // do whatever you want here...  probably just toggle if necessary
  Logger.LogWarning("Browser theme is now: {theme}", theme);
}

Dispose properly:

public async ValueTask DisposeAsync()
{
    SystemThemeListenerService.OnThemeChanged -= NotifyThemeChanged;
    await SystemThemeListenerService.DisposeAsync();
}

[nhwilly]

Should be pretty simple.

I'm not that clever, so there's probably a much better way to incorporate this into your package better.

Also, I'm still new to Blazor/JavaScript, so the code might not be the best.

You guys are great, and I thought maybe I could give back a little.

HTH

[msynk]

The JS api of the BitTheme has an init method that accepts a handler for the theme change.

an example:

    BitTheme.init({
        ...,
        onChange: (newTheme: string, oldTheme: string) => {
            if (newTheme === 'dark') {
                document.body.classList.add('theme-dark');
                document.body.classList.remove('theme-light');
            } else {
                document.body.classList.add('theme-light');
                document.body.classList.remove('theme-dark');
            }
        }
    });

you can utilize it and call a .NET static method using the Blazor js api DotNet.invokeMethodAsync.