Fixes #12219: Ensure dashboard widget heading text has sufficient contrast (#13753)

* Fixes #12219: Ensure dashboard widget heading text has sufficient contrast in both light & dark modes

* Change foreground color for teal background

netbox/extras/dashboard/widgets.py

@@ -16,6 +16,7 @@ from django.utils.translation import gettext as _
 
 from extras.choices import BookmarkOrderingChoices
 from extras.utils import FeatureQuery
+from utilities.choices import ButtonColorChoices
 from utilities.forms import BootstrapMixin
 from utilities.permissions import get_permission_for_model
 from utilities.templatetags.builtins.filters import render_markdown
@@ -115,6 +116,22 @@ class DashboardWidget:
     def name(self):
         return f'{self.__class__.__module__.split(".")[0]}.{self.__class__.__name__}'
 
+    @property
+    def fg_color(self):
+        """
+        Return the appropriate foreground (text) color for the widget's color.
+        """
+        if self.color in (
+            ButtonColorChoices.CYAN,
+            ButtonColorChoices.GRAY,
+            ButtonColorChoices.GREY,
+            ButtonColorChoices.TEAL,
+            ButtonColorChoices.WHITE,
+            ButtonColorChoices.YELLOW,
+        ):
+            return ButtonColorChoices.BLACK
+        return ButtonColorChoices.WHITE
+
     @property
     def form_data(self):
         return {

netbox/templates/extras/dashboard/widget.html

@@ -9,14 +9,16 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-center text-light bg-{% if widget.color %}{{ widget.color }}{% else %}secondary{% endif %} p-1">
+    <div class="card-header text-center text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} p-1">
       <div class="float-start ps-1">
         <a href="#"
           hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
           hx-target="#htmx-modal-content"
           data-bs-toggle="modal"
           data-bs-target="#htmx-modal"
-        ><i class="mdi mdi-cog text-gray"></i></a>
+        >
+          <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
+        </a>
       </div>
       <div class="float-end pe-1">
         <a href="#"
@@ -24,7 +26,9 @@
           hx-target="#htmx-modal-content"
           data-bs-toggle="modal"
           data-bs-target="#htmx-modal"
-        ><i class="mdi mdi-close text-gray"></i></a>
+        >
+          <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
+        </a>
       </div>
       {% if widget.title %}
         <strong>{{ widget.title }}</strong>