#273 - Using accent color for foreground of category elements.

src/Money.UI.Blazor/Components/OutcomeCard.razor

@@ -3,7 +3,7 @@
         <h2 class="amount">@Context.CurrencyFormatter.Format(Model.Amount)</h2>
         <p class="when">@Model.When.ToShortDateString()</p>
         <p class="description">@Model.Description</p>
-        <p class="category">
+        <p class="category @CategoryColor.SelectAccent("back-dark", "back-light")">
             <span class="badge" style="background-color: @CategoryColor.ToHashCode()">@CategoryName</span>
         </p>
     </div>

src/Money.UI.Blazor/Components/OutcomeCreate.razor

@@ -41,7 +41,7 @@
             {
                 @foreach (var category in Categories)
                 {
-                    <button type="button" class="btn btn-block btn-selectable @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") text-truncate" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
+                    <button type="button" class="btn btn-block btn-selectable @(category.Key.Equals(CategoryKey) ? "btn-selectable-selected" : "") text-truncate @category.Color.SelectAccent("back-dark", "back-light")" style="background-color: @category.Color.ToHashCode();" @onclick="@(() => CategoryKey = category.Key)">
                         <span>@category.Icon</span>
                         <strong>@category.Name</strong>
                         <span>@category.Description</span>

src/Money.UI.Blazor/Models/ColorCollection.cs

@@ -9,6 +9,9 @@ namespace Money.Models
 {
     public class ColorCollection : List<Color>
     {
+        public static readonly Color White = Color.FromArgb(255, 255, 255, 255);
+        public static readonly Color Black = Color.FromArgb(255, 0, 0, 0);
+
         public ColorCollection()
         {
             Load();

src/Money.UI.Blazor/Models/ColorExtensions.cs

@@ -16,5 +16,16 @@ public static string ToHashCode(this Color color)
 
             return "#" + BitConverter.ToString(data).Replace("-", string.Empty);
         }
+
+        public static Color ToAccentColor(this Color color)
+            => SelectAccent(color, ColorCollection.White, ColorCollection.Black);
+
+        public static T SelectAccent<T>(this Color color, T light, T dark)
+        {
+            if ((color.R + color.G + color.B) / 3 < 90)
+                return light;
+
+            return dark;
+        }
     }
 }

src/Money.UI.Blazor/Pages/Categories.razor

@@ -16,7 +16,7 @@
     {
         @foreach (var item in Models)
         {
-            <div class="alert" style="background-color: @item.Color.ToHashCode()">
+            <div class="alert @item.Color.SelectAccent("back-dark", "back-light")" style="background-color: @item.Color.ToHashCode()">
                 <div class="form-row">
                     @if (item.Icon != null)
                     {

src/Money.UI.Blazor/wwwroot/css/site.scss

@@ -195,6 +195,14 @@ h4 {
     }
 }
 
+.back-dark {
+    color: #eee;
+
+    .btn-link {
+        color: #eee;
+    }
+}
+
 .btn-icon, .btn-color {
     width: 48px;
     height: 48px;