btcpayserver/BTCPayServer/Views/Shared/LayoutHeadStoreBranding.cshtml

@using BTCPayServer.Services
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model StoreBrandingViewModel
@inject ThemeSettings Theme
@if (!string.IsNullOrEmpty(Model.BrandColor))
{
    var hasCustomeTheme = Theme.CustomTheme && Theme.CustomThemeCssUrl is not null;
    var brand = Model.BrandColor;
    var brandColor = ColorPalette.Default.FromHtml(brand);
    var brandRgbValues = $"{brandColor.R}, {brandColor.G}, {brandColor.B}";
    var brightness = brandColor.GetBrightness();
    var accent = ColorPalette.Default.AdjustBrightness(brand, (float)-.15);
    var accentColor = ColorPalette.Default.FromHtml(accent);
    var accentRgbValues = $"{accentColor.R}, {accentColor.G}, {accentColor.B}";
    var complement = ColorPalette.Default.TextColor(brand);
    var complementVar = $"var(--btcpay-{(complement == "black" ? "black" : "white")})";
    <style>
        :root {
            --btcpay-primary: @brand;
            --btcpay-primary-rgb: @brandRgbValues;
            --btcpay-primary-shadow: @brand;
            --btcpay-primary-bg-hover: @accent;
            --btcpay-primary-bg-active: @accent;
            --btcpay-body-link-accent: @accent;
            --btcpay-body-link-accent-rgb: @accentRgbValues;
            --btcpay-primary-text: @complementVar;
            --btcpay-primary-text-hover: @complementVar;
            --btcpay-primary-text-active: @complementVar;
        }
    </style>
    @if (brightness > .5 || (Theme.CustomThemeExtension == ThemeExtension.Dark && brightness < .5))
    {
        var brandAdjusted = ColorPalette.Default.AdjustBrightness(brand, (float)(.35-brightness));
        var brandColorAdjusted = ColorPalette.Default.FromHtml(brandAdjusted);
        var brandRgbValuesAdjusted = $"{brandColorAdjusted.R}, {brandColorAdjusted.G}, {brandColorAdjusted.B}";
        var accentAdjusted = ColorPalette.Default.AdjustBrightness(brandAdjusted, (float)-.15);
        var accentColorAdjusted = ColorPalette.Default.FromHtml(accentAdjusted);
        var accentRgbValuesAdjusted = $"{accentColorAdjusted.R}, {accentColorAdjusted.G}, {accentColorAdjusted.B}";
        var complementAdjusted = ColorPalette.Default.TextColor(brandAdjusted);
        var complementVarAdjusted = $"var(--btcpay-{(complementAdjusted == "black" ? "black" : "white")})";
        <style>
            :root[data-theme='light'],
            :root[data-btcpay-theme='light'] {
                --btcpay-primary: @brandAdjusted;
                --btcpay-primary-rgb: @brandRgbValuesAdjusted;
                --btcpay-primary-shadow: @brandAdjusted;
                --btcpay-primary-bg-hover: @accentAdjusted;
                --btcpay-primary-bg-active: @accentAdjusted;
                --btcpay-body-link-accent: @accentAdjusted;
                --btcpay-body-link-accent-rgb: @accentRgbValuesAdjusted;
                --btcpay-primary-text: @complementVarAdjusted;
                --btcpay-primary-text-hover: @complementVarAdjusted;
                --btcpay-primary-text-active: @complementVarAdjusted;
            }
            @@media (prefers-color-scheme: light) {
                :root:not([data-btcpay-theme], [data-theme]) {
                    --btcpay-primary: @brandAdjusted;
                    --btcpay-primary-rgb: @brandRgbValuesAdjusted;
                    --btcpay-primary-shadow: @brandAdjusted;
                    --btcpay-primary-bg-hover: @accentAdjusted;
                    --btcpay-primary-bg-active: @accentAdjusted;
                    --btcpay-body-link-accent: @accentAdjusted;
                    --btcpay-body-link-accent-rgb: @accentRgbValuesAdjusted;
                    --btcpay-primary-text: @complementVarAdjusted;
                    --btcpay-primary-text-hover: @complementVarAdjusted;
                    --btcpay-primary-text-active: @complementVarAdjusted;
                }
            }
        </style>
    }
    @if (brightness < .5 && (!hasCustomeTheme || Theme.CustomThemeExtension == ThemeExtension.Dark))
    {
        var brandAdjusted = ColorPalette.Default.AdjustBrightness(brand, (float)(.5-brightness));
        var brandColorAdjusted = ColorPalette.Default.FromHtml(brandAdjusted);
        var brandRgbValuesAdjusted = $"{brandColorAdjusted.R}, {brandColorAdjusted.G}, {brandColorAdjusted.B}";
        var accentAdjusted = ColorPalette.Default.AdjustBrightness(brandAdjusted, (float).15);
        var accentColorAdjusted = ColorPalette.Default.FromHtml(accentAdjusted);
        var accentRgbValuesAdjusted = $"{accentColorAdjusted.R}, {accentColorAdjusted.G}, {accentColorAdjusted.B}";
        var complementAdjusted = ColorPalette.Default.TextColor(brandAdjusted);
        var complementVarAdjusted = $"var(--btcpay-{(complementAdjusted == "black" ? "black" : "white")})";
        <style>
            :root[data-theme='dark'],
            :root[data-btcpay-theme='dark'] {
                --btcpay-primary: @brandAdjusted;
                --btcpay-primary-rgb: @brandRgbValuesAdjusted;
                --btcpay-primary-shadow: @brandAdjusted;
                --btcpay-primary-bg-hover: @accentAdjusted;
                --btcpay-primary-bg-active: @accentAdjusted;
                --btcpay-body-link-accent: @accentAdjusted;
                --btcpay-body-link-accent-rgb: @accentRgbValuesAdjusted;
                --btcpay-primary-text: @complementVarAdjusted;
                --btcpay-primary-text-hover: @complementVarAdjusted;
                --btcpay-primary-text-active: @complementVarAdjusted;
            }
            @@media (prefers-color-scheme: dark) {
                :root:not([data-btcpay-theme], [data-theme]) {
                    --btcpay-primary: @brandAdjusted;
                    --btcpay-primary-rgb: @brandRgbValuesAdjusted;
                    --btcpay-primary-shadow: @brandAdjusted;
                    --btcpay-primary-bg-hover: @accentAdjusted;
                    --btcpay-primary-bg-active: @accentAdjusted;
                    --btcpay-body-link-accent: @accentAdjusted;
                    --btcpay-body-link-accent-rgb: @accentRgbValuesAdjusted;
                    --btcpay-primary-text: @complementVarAdjusted;
                    --btcpay-primary-text-hover: @complementVarAdjusted;
                    --btcpay-primary-text-active: @complementVarAdjusted;
                }
            }
        </style>
    }
    <meta name="theme-color" content="@brand">
}
@if (!string.IsNullOrEmpty(Model.CssUrl))
{
    <link href="@Model.CssUrl!" asp-append-version="true" rel="stylesheet" />
}
@if (!string.IsNullOrEmpty(Model.LogoUrl))
{
    <link rel="icon" href="@Model.LogoUrl">
    <link rel="apple-touch-icon" href="@Model.LogoUrl">
}