Move interface colour logic into SCSS where it belongs

netbox/project-static/styles/netbox.scss

@@ -835,15 +835,6 @@ table tbody {
   }
 }
 
-// Expose theme colors as variables. (Useful for dynamic styling of choices etc.)
-// Both as opaque colour and translucent (alpha 15%)
-:root {
-  @each $color, $value in $theme-colors {
-    --nbx-color-#{$color}: #{$value};
-    --nbx-color-#{$color}-a15: #{rgba($value, 0.15)};
-  }
-}
-
 // Style objects with statuses/roles within a table. As of implementation, used for IP addresses
 // assigned to interfaces.
 table .table-badge-group {
@@ -1078,4 +1069,41 @@ html {
       display: none;
     }
   }
-}
+  
+  // Apply row colours to interface lists
+  &[data-netbox-url-name='device_interfaces'] {
+    tr[data-cable-status=connected] {
+      background-color: rgba(map.get($theme-colors, "green"), 0.15);
+    }
+  
+    tr[data-cable-status=planned] {
+      background-color: rgba(map.get($theme-colors, "blue"), 0.15);
+    }
+  
+    tr[data-cable-status=decommissioning] {
+      background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
+    }
+  
+    tr[data-mark-connected=true] {
+      background-color: rgba(map.get($theme-colors, "success"), 0.15);
+    }
+  
+    tr[data-virtual=true] {
+      background-color: rgba(map.get($theme-colors, "primary"), 0.15);
+    }
+  
+    tr[data-enabled=disabled] {
+      background-color: rgba(map.get($theme-colors, "danger"), 0.15);
+    }
+  
+    // Only show the correct button depending on the cable status
+    tr[data-cable-status=connected] button.mark-installed {
+      display: none;
+    }
+  
+    tr:not([data-cable-status=connected]) button.mark-planned {
+      display: none;
+    }
+  
+  }
+}

netbox/templates/dcim/device/interfaces.html

@@ -30,33 +30,3 @@
         </div>
     {% endif %}
 {% endblock bulk_extra_controls %}
-
-{% block head %}
-    {{ block.super }}
-    <style>
-        tr[data-cable-status=connected] {
-            background-color: var(--nbx-color-green-a15);
-        }
-        tr[data-cable-status=planned] {
-            background-color: var(--nbx-color-blue-a15);
-        }
-        tr[data-cable-status=decommissioning] {
-            background-color: var(--nbx-color-yellow-a15);
-        }
-        tr[data-mark-connected=true] {
-            background-color: var(--nbx-color-success-a15);
-        }
-        tr[data-virtual=true] {
-            background-color: var(--nbx-color-primary-a15);
-        }
-        tr[data-enabled=disabled] {
-            background-color: var(--nbx-color-danger-a15);
-        }
-        tr[data-cable-status=connected] button.mark-installed {
-            display: none;
-        }
-        tr:not([data-cable-status=connected]) button.mark-planned {
-            display: none;
-        }
-    </style>
-{% endblock %}