implement dark mode

2024-05-10 07:54:54 +00:00 · 2021-04-25 20:11:46 -07:00
parent d7d004b48e
commit 2b159fc40f
55 changed files with 1850 additions and 969 deletions
--- a/netbox/templates/base.html
+++ b/netbox/templates/base.html
@@ -22,7 +22,10 @@
    </script>
    {% block head %}{% endblock %}
  </head>
-  <body>
+  {% with color_mode=preferences|get_key:'ui.colormode' %}
+  
+  <body{%if color_mode == 'dark'%} data-netbox-color-mode="dark"{% elif color_mode == 'light' %} data-netbox-color-mode="light"{% endif %}>
+  
    {% block layout %}{% endblock %}
    {% block javascript %}{% endblock %}
    {% include './messages.html' %}
@@ -30,4 +33,5 @@
    {% block data %}{% endblock %}
    </div>
  </body>
+  {% endwith %}
 </html>
--- a/netbox/templates/changelog.html
+++ b/netbox/templates/changelog.html
@@ -13,7 +13,7 @@
  </thead>
  <tbody>
    {% for change in changelog %}
-    <tr class="table-{% get_status change.get_action_display %}">
+    <tr class="{% get_status change.get_action_display %}">
      <th scope="row">{{ change.user|default:change.user_name }}</th>
      <td>{{ change.get_action_display|bettertitle }}</td>
      <td>{{ change.changed_object_type.name|bettertitle }}</td>
--- a/netbox/templates/inc/search_panel.html
+++ b/netbox/templates/inc/search_panel.html
@@ -4,7 +4,7 @@
    <h5 class="card-header">
        Search
    </h5>
-    <div class="card-body">
+    <div class="card-body overflow-visible">
        <form action="." method="get">
            {% for field in filter_form.hidden_fields %}
                {{ field }}
--- a/netbox/templates/layout.html
+++ b/netbox/templates/layout.html
@@ -7,12 +7,12 @@
  <div class="row">
    <nav
      id="sidebar-menu"
-      class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse px-0"
+      class="col-md-3 col-lg-2 d-md-block sidebar collapse px-0"
    >
      <div class="position-sticky pt-3">
        <a class="px-2 sidebar-logo" href="{% url 'home' %}">
          {% load static %}
-          <img src="{% static 'netbox_logo.svg' %}" height="50" />
+          {% include 'logo.html' %}
        </a>
        <ul class="nav flex-column">
          {% load nav %} {% nav %}
@@ -22,7 +22,7 @@
    </nav>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-0">
-      <nav class="navbar navbar-light sticky-top flex-md-nowrap py-4 bg-white container-fluid">
+      <nav class="navbar navbar-light sticky-top flex-md-nowrap py-4 search container-fluid">
          <button
            type="button"
            aria-expanded="false"
--- a/netbox/templates/logo.html
+++ b/netbox/templates/logo.html
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 320" height="50">
+  <g id="netbox-logo-1">
+    <circle cx="37" cy="284" r="23"/>
+    <circle cx="101" cy="37" r="23"/>
+    <circle cx="101" cy="220" r="23"/>
+    <circle cx="284" cy="220" r="23"/>
+    <rect x="93" y="37" width="16" height="180"/>
+    <rect x="101" y="212" width="180" height="16"/>
+    <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"/>
+  </g>
+  <g id="netbox-logo-2">
+    <circle cx="284" cy="37" r="23"/>
+    <circle cx="37" cy="101" r="23"/>
+    <circle cx="220" cy="101" r="23"/>
+    <circle cx="220" cy="284" r="23"/>
+    <rect x="37" y="93" width="180" height="16"/>
+    <rect x="212" y="101" width="16" height="180"/>
+    <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"/>
+    <path transform="translate(380, 8)" d="M13.60 200L13.60 104L36.40 104L36.40 119.40L36.80 119.40Q40.20 112.20 47.20 106.90Q54.20 101.60 66.20 101.60L66.20 101.60Q75.80 101.60 82.50 104.80Q89.20 108 93.40 113.20Q97.60 118.40 99.40 125.20Q101.20 132 101.20 139.40L101.20 139.40L101.20 200L77.20 200L77.20 151.40Q77.20 147.40 76.80 142.50Q76.40 137.60 74.70 133.30Q73 129 69.40 126.10Q65.80 123.20 59.60 123.20L59.60 123.20Q53.60 123.20 49.50 125.20Q45.40 127.20 42.70 130.60Q40 134 38.80 138.40Q37.60 142.80 37.60 147.60L37.60 147.60L37.60 200L13.60 200ZM224.80 160.40L151.60 160.40Q152.80 171.20 160 177.20Q167.20 183.20 177.40 183.20L177.40 183.20Q186.40 183.20 192.50 179.50Q198.60 175.80 203.20 170.20L203.20 170.20L220.40 183.20Q212 193.60 201.60 198Q191.20 202.40 179.80 202.40L179.80 202.40Q169 202.40 159.40 198.80Q149.80 195.20 142.80 188.60Q135.80 182 131.70 172.70Q127.60 163.40 127.60 152L127.60 152Q127.60 140.60 131.70 131.30Q135.80 122 142.80 115.40Q149.80 108.80 159.40 105.20Q169 101.60 179.80 101.60L179.80 101.60Q189.80 101.60 198.10 105.10Q206.40 108.60 212.30 115.20Q218.20 121.80 221.50 131.50Q224.80 141.20 224.80 153.80L224.80 153.80L224.80 160.40ZM151.60 142.40L200.80 142.40Q200.60 131.80 194.20 125.70Q187.80 119.60 176.40 119.60L176.40 119.60Q165.60 119.60 159.30 125.80Q153 132 151.60 142.40L151.60 142.40ZM259.80 124.40L240.00 124.40L240.00 104L259.80 104L259.80 76.20L283.80 76.20L283.80 104L310.20 104L310.20 124.40L283.80 124.40L283.80 166.40Q283.80 173.60 286.50 177.80Q289.20 182 297.20 182L297.20 182Q300.40 182 304.20 181.30Q308 180.60 310.20 179L310.20 179L310.20 199.20Q306.40 201 300.90 201.70Q295.40 202.40 291.20 202.40L291.20 202.40Q281.60 202.40 275.50 200.30Q269.40 198.20 265.90 193.90Q262.40 189.60 261.10 183.20Q259.80 176.80 259.80 168.40L259.80 168.40L259.80 124.40ZM333.20 200L333.20 48.80L357.20 48.80L357.20 116.20L357.80 116.20Q359.60 113.80 362.40 111.30Q365.20 108.80 369.20 106.60Q373.20 104.40 378.40 103Q383.60 101.60 390.40 101.60L390.40 101.60Q400.60 101.60 409.20 105.50Q417.80 109.40 423.90 116.20Q430 123 433.40 132.20Q436.80 141.40 436.80 152L436.80 152Q436.80 162.60 433.60 171.80Q430.40 181 424.20 187.80Q418 194.60 409.20 198.50Q400.40 202.40 389.40 202.40L389.40 202.40Q379.20 202.40 370.40 198.40Q361.60 194.40 356.40 185.60L356.40 185.60L356 185.60L356 200L333.20 200ZM412.80 152L412.80 152Q412.80 146.40 410.90 141.20Q409 136 405.30 132Q401.60 128 396.40 125.60Q391.20 123.20 384.60 123.20L384.60 123.20Q378 123.20 372.80 125.60Q367.60 128 363.90 132Q360.20 136 358.30 141.20Q356.40 146.40 356.40 152L356.40 152Q356.40 157.60 358.30 162.80Q360.20 168 363.90 172Q367.60 176 372.80 178.40Q378 180.80 384.60 180.80L384.60 180.80Q391.20 180.80 396.40 178.40Q401.60 176 405.30 172Q409 168 410.90 162.80Q412.80 157.60 412.80 152ZM458.40 152L458.40 152Q458.40 140.60 462.50 131.30Q466.60 122 473.60 115.40Q480.60 108.80 490.20 105.20Q499.80 101.60 510.60 101.60L510.60 101.60Q521.40 101.60 531 105.20Q540.60 108.80 547.60 115.40Q554.60 122 558.70 131.30Q562.80 140.60 562.80 152L562.80 152Q562.80 163.40 558.70 172.70Q554.60 182 547.60 188.60Q540.60 195.20 531 198.80Q521.40 202.40 510.60 202.40L510.60 202.40Q499.80 202.40 490.20 198.80Q480.60 195.20 473.60 188.60Q466.60 182 462.50 172.70Q458.40 163.40 458.40 152ZM482.40 152L482.40 152Q482.40 157.60 484.30 162.80Q486.20 168 489.90 172Q493.60 176 498.80 178.40Q504 180.80 510.60 180.80L510.60 180.80Q517.20 180.80 522.40 178.40Q527.60 176 531.30 172Q535 168 536.90 162.80Q538.80 157.60 538.80 152L538.80 152Q538.80 146.40 536.90 141.20Q535 136 531.30 132Q527.60 128 522.40 125.60Q517.20 123.20 510.60 123.20L510.60 123.20Q504 123.20 498.80 125.60Q493.60 128 489.90 132Q486.20 136 484.30 141.20Q482.40 146.40 482.40 152ZM575.40 200L614 148.40L580.80 104L610 104L629.20 132.80L650 104L677.40 104L644.60 148.40L683.20 200L654 200L629 165.60L603.80 200L575.40 200Z"/>
+  </g>
+</svg>
--- a/netbox/templates/profile_button.html
+++ b/netbox/templates/profile_button.html
@@ -10,21 +10,27 @@
    <span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
-    <li class="dropdown-item">
+    <li>
+      <button type="button" class="dropdown-item color-mode-toggle">
+        <i class="color-mode-icon mdi mdi-lightbulb"></i>&nbsp;
+        <span class="color-mode-text">Dark Mode</span>
+      </button>
+    </li>
+    <li>
      {% if request.user.is_staff %}
-      <a class="text-decoration-none" href="{% url 'admin:index' %}">
+      <a class="dropdown-item" href="{% url 'admin:index' %}">
        <i class="mdi mdi-cog"></i> Admin
      </a>
      {% endif %}
    </li>
-    <li class="dropdown-item">
-      <a class="text-decoration-none" href="{% url 'user:profile' %}">
+    <li>
+      <a class="dropdown-item" href="{% url 'user:profile' %}">
        <i class="mdi mdi-account"></i> Profile
      </a>
    </li>
    <li><hr class="dropdown-divider" /></li>
-    <li class="dropdown-item">
-      <a class="text-decoration-none" href="{% url 'logout' %}">
+    <li>
+      <a class="dropdown-item" href="{% url 'logout' %}">
        <i class="mdi mdi-logout-variant"></i> Log Out
      </a>
    </li>
--- a/netbox/templates/users/preferences.html
+++ b/netbox/templates/users/preferences.html
@@ -4,32 +4,56 @@
 {% block title %}User Preferences{% endblock %}

 {% block usercontent %}
-    {% if preferences %}
-        <form method="post" action="">
-            {% csrf_token %}
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th><input type="checkbox" class="toggle" title="Toggle all"></th>
-                        <th>Preference</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for key, value in preferences.items %}
-                        <tr>
-                            <td class="min-width"><input type="checkbox" name="pk" value="{{ key }}"></td>
-                            <td><samp>{{ key }}</samp></td>
-                            <td><samp>{{ value }}</samp></td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            <button type="submit" class="btn btn-danger">
-                <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Clear Selected
+<form method="post" action="">
+    {% csrf_token %}
+    <div class="field-group mb-3">
+        <h4>Color Mode</h4>
+        <p class="lead text-muted">Set your preferred UI color mode</p>
+        {% with color_mode=preferences|get_key:'ui.colormode'%}
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="ui.colormode" id="color-mode-preference-dark" value="dark"{% if color_mode == 'dark'%} checked{% endif %}>
+            <label class="form-check-label" for="color-mode-preference-dark">Dark</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="ui.colormode" id="color-mode-preference-light" value="light"{% if color_mode == 'light'%} checked{% endif %}>
+            <label class="form-check-label" for="color-mode-preference-light">Light</label>
+        </div>
+        {% endwith %}
+    </div>
+    <div class="row">
+        <div class="col">
+            <button type="submit" class="btn btn-success" name="_update">
+                Save
            </button>
-        </form>
-    {% else %}
-        <h3 class="text-muted text-center">No preferences found</h3>
-    {% endif %}
+        </div>
+    </div>
+{% if preferences %}
+<div class="field-group">
+    <h4>Other Preferences</h4>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th><input type="checkbox" class="toggle" title="Toggle all"></th>
+                <th>Preference</th>
+                <th>Value</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for key, value in preferences.items %}
+                <tr>
+                    <td class="min-width"><input type="checkbox" name="pk" value="{{ key }}"></td>
+                    <td><samp>{{ key }}</samp></td>
+                    <td><samp>{{ value }}</samp></td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    <button type="submit" class="btn btn-danger" name="_delete">
+        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Clear Selected
+    </button>
+</div>
+{% else %}
+    <h3 class="text-muted text-center">No preferences found</h3>
+{% endif %}
+</form>
 {% endblock %}