#6732: Add color mode toggle to login screen & fix login screen layout issues

netbox/project-static/netbox.scss

@@ -21,6 +21,7 @@
   --nbx-cable-termination-bg: #{$gray-200};
   --nbx-cable-termination-border-color: #{$gray-300};
   --nbx-search-filter-border-left-color: #{$gray-300};
+  --nbx-color-mode-toggle-color: #{$primary};
 
   body[data-netbox-color-mode='dark'] {
     --nbx-logo-color-1: #{$white};
@@ -41,6 +42,7 @@
     --nbx-cable-termination-bg: #{$gray-800};
     --nbx-cable-termination-border-color: #{$gray-700};
     --nbx-search-filter-border-left-color: #{$gray-600};
+    --nbx-color-mode-toggle-color: #{$yellow-300};
   }
 }
 
@@ -169,12 +171,17 @@ nav.search {
 main.login-container {
   display: flex;
   height: calc(100vh - 4rem);
-  width: 100vw;
+  width: 100%;
+  max-width: 100vw;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-top: 40px;
   padding-bottom: 40px;
+
+  & + footer.footer button.color-mode-toggle {
+    color: var(--nbx-color-mode-toggle-color);
+  }
 }
 
 footer.login-footer {

netbox/project-static/theme-dark.scss

@@ -47,7 +47,7 @@ $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
 $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
 $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
-$text-muted: $gray-500;
+$text-muted: $gray-400;
 $blockquote-footer-color: $gray-600;
 $mark-bg: #fcf8e3;
 $link-color: $primary;

netbox/templates/login.html

@@ -7,7 +7,9 @@
   {% endif %}
   <div class="form-login">
     <form action="{% url 'login' %}" method="post">
-      <img src="{% static 'netbox_logo.svg' %}" class="mb-4" />
+      <div class="mb-4">
+        {% include 'logo.html' with height=80 %}
+      </div>
       {% csrf_token %} {% if 'next' in request.GET %}
       <input type="hidden" name="next" value="{{ request.GET.next }}" />
       {% endif %} {% if 'next' in request.POST %}
@@ -44,11 +46,19 @@
   </div>
   {% endif %}
 </main>
-<footer class="footer login-footer py-3">
-  <div class="container-fluid">
-    <small class="text-muted">
-      {{ settings.HOSTNAME }} (v{{ settings.VERSION }})
-    </small>
+<footer class="footer container-fluid login-footer py-3">
+  <div class="row align-items-center">
+      <div class="col-2 col-md-1 mb-0">
+        <button type="button" class="btn btn-sm color-mode-toggle" title="Toggle Color Mode">
+          <i class="color-mode-icon mdi mdi-lightbulb"></i>&nbsp;
+        </button>
+      </div>
+      <div class="col-1 col-md-auto mb-0"></div>
+      <div class="col text-end mb-0">
+        <small class="text-muted">
+          {{ settings.HOSTNAME }} (v{{ settings.VERSION }})
+        </small>
+      </div>
   </div>
 </footer>
 {% endblock %}

netbox/templates/logo.html

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 320" height="50">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 320" height="{{ height|default:50 }}">
   <g id="netbox-logo-1">
     <circle cx="37" cy="284" r="23"/>
     <circle cx="101" cy="37" r="23"/>