Fixes #17230: Ensure consistent rendering for all dashboard widget colors

netbox/extras/dashboard/widgets.py

@@ -131,22 +131,6 @@ 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,31 +9,35 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
-      <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-{{ widget.fg_color }}"></i>
-      </a>
-      <div class="card-title flex-fill text-center">
-        {% if widget.title %}
-          <span class="fs-4 fw-bold">{{ widget.title }}</span>
-        {% endif %}
+    {% with bg_color=widget.color|default:"secondary" %}
+      <div class="card-header text-bg-{{ bg_color }} px-2 py-1 d-flex flex-row">
+        <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"
+          class="text-bg-{{ bg_color }}"
+        >
+          <i class="mdi mdi-cog"></i>
+        </a>
+        <div class="card-title flex-fill text-center">
+          {% if widget.title %}
+            <span class="fs-4 fw-bold">{{ widget.title }}</span>
+          {% endif %}
+        </div>
+        <a href="#"
+          hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
+          hx-target="#htmx-modal-content"
+          data-bs-toggle="modal"
+          data-bs-target="#htmx-modal"
+          class="text-bg-{{ bg_color }}"
+        >
+          <i class="mdi mdi-close"></i>
+        </a>
       </div>
-      <a href="#"
-        hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
-        hx-target="#htmx-modal-content"
-        data-bs-toggle="modal"
-        data-bs-target="#htmx-modal"
-      >
-        <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
-      </a>
-    </div>
-    <div class="card-body p-2 pt-1 overflow-auto">
-      {% render_widget widget %}
-    </div>
+      <div class="card-body p-2 pt-1 overflow-auto">
+        {% render_widget widget %}
+      </div>
+    {% endwith %}
   </div>
 </div>