Dark mode detection middleware in ASP.NET Core without any JS #62700

afshin29 · 2025-07-13T10:02:23Z

afshin29
Jul 13, 2025

Modern chromium browsers have dark mode detection capabilities built-in and they can let the web server know of user's dark mode preferences. I recently used this new modern feature in my side project and I would like to share it here with the community. Your feedback is appreciated.

In C# we can create the following middleware:

public class DarkModeDetectionMiddleware(RequestDelegate next)
{
    public async Task InvokeAsync(HttpContext context)
    {
        context.Response.Headers.Append("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
        context.Response.Headers.Append("Vary", "Sec-CH-Prefers-Color-Scheme");
        context.Response.Headers.Append("Critical-CH", "Sec-CH-Prefers-Color-Scheme");

        await next(context);
    }
}

And the following extension for it:

public static IApplicationBuilder UseDarkModeDetection(this IApplicationBuilder app)
{
    app.UseMiddleware<DarkModeDetectionMiddleware>();
    return app;
}

In F#:

type IApplicationBuilder with

    member app.UseDarkModeDetection() =
        app.Use (fun (ctx: HttpContext) (next: RequestDelegate) ->
            ctx.Response.Headers.Append("Accept-CH", "Sec-CH-Prefers-Color-Scheme")
            ctx.Response.Headers.Append("Vary", "Sec-CH-Prefers-Color-Scheme")
            ctx.Response.Headers.Append("Critical-CH", "Sec-CH-Prefers-Color-Scheme")
            
            next.Invoke ctx
        ) |> ignore
        
        app

Next we need an extension to check if a request is in dark mode. we have three ways to know, if we have set a cookie (it means user has changed the default detected theme), then we check the cookie's value, let's say "1" means use dark mode and other values mean don't. If we haven't set a cookie then we use the available header:

In C#:

public const string DarkThemeKey = "dark_theme";

public static bool IsDarkTheme(this HttpRequest request)
    => request.Cookies[DarkThemeKey] switch
    {
        null => request.Headers["Sec-CH-Prefers-Color-Scheme"] == "dark",
        "1" => true,
        _ => false
    };

In F#:

[<Literal>]
let DarkThemeKey = "dark_theme"

type HttpRequest with

    member request.IsDarkTheme() =
        match request.Cookies[DarkThemeKey] with
        | null ->
            match request.Headers.TryGetValue "Sec-CH-Prefers-Color-Scheme" with
            | true, value -> value.ToString() = "dark"
            | _ -> false
        | "1" -> true
        | _ -> false

And that's it! We can use these to set the correct CSS class or the correct CSS link in our HTML rendering logic. For example in Bootstrap 5 using Razor:

<html lang="en" data-bs-theme="@(HttpContext.Request.IsDarkTheme() ? "dark" : "light")">

Or in Giraffe View Engine:

html [
    _lang "en"

    let theme = if httpContext.Request.IsDarkTheme() then "dark" else "light"
    _data "bs-theme" theme
]

Note: both JS and CSS have mechanisms to detect dark mode, but, they run on the browser, which is too late for server side rendering logic to use the correct class or asset.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dark mode detection middleware in ASP.NET Core without any JS #62700

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Dark mode detection middleware in ASP.NET Core without any JS #62700

Uh oh!

afshin29 Jul 13, 2025

Replies: 0 comments

afshin29
Jul 13, 2025