mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-18 21:32:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Store branding: Add complementing text and accent colors (#4746)

Browse Source
This commit is contained in:
d11n 2023-03-09 21:34:15 +01:00 committed by GitHub
parent 6d4b2348ac
commit f57eab3008
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
BTCPayServer/ColorPalette.cs
View File

@ -59,5 +59,44 @@ namespace BTCPayServer
return Labels[num % Labels.Length];
}
}
/// https://gist.github.com/zihotki/09fc41d52981fb6f93a81ebf20b35cd5
/// <summary>
/// Creates color with corrected brightness.
/// </summary>
/// <param name="color">Color to correct.</param>
/// <param name="correctionFactor">The brightness correction factor. Must be between -1 and 1.
/// Negative values produce darker colors.</param>
/// <returns>
/// Corrected <see cref="Color"/> structure.
/// </returns>
public Color AdjustBrightness(Color color, float correctionFactor)
{
float red = color.R;
float green = color.G;
float blue = color.B;
if (correctionFactor < 0)
{
correctionFactor = 1 + correctionFactor;
red *= correctionFactor;
green *= correctionFactor;
blue *= correctionFactor;
}
else
{
red = (255 - red) * correctionFactor + red;
green = (255 - green) * correctionFactor + green;
blue = (255 - blue) * correctionFactor + blue;
}
return Color.FromArgb(color.A, (int)red, (int)green, (int)blue);
}
public string AdjustBrightness(string html, float correctionFactor)
{
var color = AdjustBrightness(ColorTranslator.FromHtml(html), correctionFactor);
return ColorTranslator.ToHtml(color);
}
}
}

17
BTCPayServer/Views/Shared/LayoutHeadStoreBranding.cshtml
View File

@ -10,13 +10,20 @@
}
@if (!string.IsNullOrEmpty(Model.BrandColor))
{
var brandColor = Model.BrandColor;
var accentColor = ColorPalette.Default.AdjustBrightness(brandColor, (float)-0.15);
var complement = ColorPalette.Default.TextColor(brandColor).ToLowerInvariant();
var complementColor = $"var(--btcpay-{(complement == "black" ? "black" : "white")})";
<style>
:root {
--btcpay-primary: @Model.BrandColor;
--btcpay-primary-bg-hover: @Model.BrandColor;
--btcpay-primary-bg-active: @Model.BrandColor;
--btcpay-primary-shadow: @Model.BrandColor;
--btcpay-body-link-accent: @Model.BrandColor;
--btcpay-primary: @brandColor;
--btcpay-primary-shadow: @brandColor;
--btcpay-primary-bg-hover: @accentColor;
--btcpay-primary-bg-active: @accentColor;
--btcpay-body-link-accent: @accentColor;
--btcpay-primary-text: @complementColor;
--btcpay-primary-text-hover: @complementColor;
--btcpay-primary-text-active: @complementColor;
}
</style>
}

2
BTCPayServer/Views/UIStores/GeneralSettings.cshtml
View File

@ -38,7 +38,7 @@
<label asp-for="BrandColor" class="form-label"></label>
<div class="input-group">
<input id="BrandColorInput" class="form-control form-control-color flex-grow-0" type="color" style="width:3rem" aria-describedby="BrandColorValue" value="@Model.BrandColor" />
<input asp-for="BrandColor" class="form-control form-control-color flex-grow-0 font-monospace" pattern="@ColorPalette.Pattern" style="width:5.5rem" />
<input asp-for="BrandColor" class="form-control form-control-color flex-grow-0 font-monospace" pattern="@ColorPalette.Pattern" style="width:5.5rem;font-size:0.9rem" />
</div>
<span asp-validation-for="BrandColor" class="text-danger"></span>
</div>