#6372: Restructure theme files & build process to avoid SCSS collisions

netbox/project-static/_dark.scss

@@ -0,0 +1,10 @@
+// Entry for netbox-dark.css stylesheet.
+
+body[data-netbox-color-mode='dark'] {
+  // Imports are scoped under the body when its data-netbox-color-mode attribute is set to 'dark'.
+  @import './theme-dark.scss';
+  @import './bootstrap.scss';
+  @import './select.scss';
+  @import './flatpickr-dark.scss';
+  @import './netbox.scss';
+}

netbox/project-static/_elevations.scss

@@ -1,4 +1,5 @@
-// Stylesheet for rendering SVG rack elevations
+// Entry for rack_elevation.css stylesheet.
+
 @import './theme-light.scss';
 
 * {

netbox/project-static/_external.scss

@@ -0,0 +1,4 @@
+// Entry for all 3rd party library imports that do not rely on Bootstrap or NetBox styles.
+
+@import '@mdi/font/css/materialdesignicons.min.css';
+@import 'flatpickr/dist/flatpickr.css';

netbox/project-static/_light.scss

@@ -0,0 +1,6 @@
+// Entry for netbox-light.css stylesheet.
+
+@import './theme-light.scss';
+@import './bootstrap.scss';
+@import './select.scss';
+@import './netbox.scss';

netbox/project-static/bundle.js

@@ -27,8 +27,10 @@ if (args.includes('--no-cache')) {
 // Style (SCSS) bundle jobs. Generally, everything should be bundled into netbox.css from main.scss
 // unless there is a specific reason to do otherwise.
 const styles = [
-  ['main.scss', 'netbox.css'],
+  ['_external.scss', 'netbox-external.css'],
-  ['rack_elevation.scss', 'rack_elevation.css'],
+  ['_light.scss', 'netbox-light.css'],
+  ['_dark.scss', 'netbox-dark.css'],
+  ['_elevations.scss', 'rack_elevation.css'],
 ];
 
 // Script (JavaScript) bundle jobs. Generally, everything should be bundled into netbox.js from

netbox/project-static/main.scss

@@ -1,27 +0,0 @@
-// Main Entry Point for all Netbox Styles.
-// Note: The order of these imports is critical for proper inheritance.
-
-// Light Mode Styles.
-@import './theme-light.scss';
-@import './bootstrap.scss';
-
-@import '@mdi/font/css/materialdesignicons.min.css';
-
-@import './select.scss';
-@import 'flatpickr/dist/flatpickr.css';
-
-@import './netbox.scss';
-
-// Dark Mode Styles.
-body[data-netbox-color-mode='dark'] {
-  @import './theme-dark.scss';
-  @import './bootstrap.scss';
-
-  @import '@mdi/font/css/materialdesignicons.min.css';
-
-  @import './select.scss';
-  @import 'flatpickr/dist/flatpickr.css';
-  @import './flatpickr-dark.scss';
-
-  @import './netbox.scss';
-}

netbox/project-static/theme-base.scss

@@ -1,4 +1,5 @@
-// Base Netbox Theme Overrides and Settings - color mode agnostic.
+// Base NetBox Theme Overrides and Settings - color mode agnostic.
+
 @import 'bootstrap/scss/functions';
 
 $alt: #13293d;
@@ -11,6 +12,7 @@ $green: #10b981;
 $blue: #3b82f6;
 $purple: #8b5cf6;
 $pink: #ec4899;
+$cyan: #06b6d4;
 
 $gray-50: #f9fafb;
 $gray-100: #f3f4f6;
@@ -67,6 +69,17 @@ $blue-700: #1d4ed8;
 $blue-800: #1e40af;
 $blue-900: #1e3a8a;
 
+$cyan-50: #ecfeff;
+$cyan-100: #cffafe;
+$cyan-200: #a5f3fc;
+$cyan-300: #67e8f9;
+$cyan-400: #22d3ee;
+$cyan-500: #06b6d4;
+$cyan-600: #0891b2;
+$cyan-700: #0e7490;
+$cyan-800: #155e75;
+$cyan-900: #164e63;
+
 $indigo-50: #eef2ff;
 $indigo-100: #e0e7ff;
 $indigo-200: #c7d2fe;
@@ -180,6 +193,16 @@ $theme-color-addons: (
   'blue-700': $blue-700,
   'blue-800': $blue-800,
   'blue-900': $blue-900,
+  'cyan-50': $cyan-50,
+  'cyan-100': $cyan-100,
+  'cyan-200': $cyan-200,
+  'cyan-300': $cyan-300,
+  'cyan-400': $cyan-400,
+  'cyan-500': $cyan-500,
+  'cyan-600': $cyan-600,
+  'cyan-700': $cyan-700,
+  'cyan-800': $cyan-800,
+  'cyan-900': $cyan-900,
   'indigo-50': $indigo-50,
   'indigo-100': $indigo-100,
   'indigo-200': $indigo-200,

netbox/templates/base.html

@@ -5,8 +5,18 @@
     <title>{% block title %}Home{% endblock %} | NetBox</title>
     <link
       rel="stylesheet"
-      href="{% static 'netbox.css'%}"
+      href="{% static 'netbox-external.css'%}"
-      onerror="window.location='{% url 'media_failure' %}?filename=netbox.css'"
+      onerror="window.location='{% url 'media_failure' %}?filename=netbox-external.css'"
+    />
+    <link
+      rel="stylesheet"
+      href="{% static 'netbox-light.css'%}"
+      onerror="window.location='{% url 'media_failure' %}?filename=netbox-light.css'"
+    />
+    <link
+      rel="stylesheet"
+      href="{% static 'netbox-dark.css'%}"
+      onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'"
     />
 
     <link rel="icon" type="image/png" href="{% static 'netbox.ico' %}" />