www: add persistent light and dark theme switch

nipap-www/nipapwww/static/css/nipap.css

@@ -1009,3 +1009,23 @@ tbody.listing > tr:hover {
 /*
  * $("#length_info_row").animate({ backgroundColor: "#ffffff" }, 1).delay(200).animate({ backgroundColor: "#dddd33" }, 300).delay(200).animate({ backgroundColor: "#ffffee" }, 1000);
 */
+
+#floating_prefix_header {
+	background-color: #FFFFFF;
+}
+
+.login-result {
+	padding: 15px;
+}
+
+.login-result-error {
+	background-color: #ffcccc;
+	color: #651b1b;
+}
+
+.login-result-success,
+.result-success {
+	padding: 15px;
+	background-color: #ccffcc;
+	color: #17452b;
+}

nipap-www/nipapwww/static/css/theme.css

@@ -0,0 +1,178 @@
+:root {
+    color-scheme: light;
+}
+
+.theme-switch-label {
+    margin: 0 8px 0 0;
+    color: #ccc;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+#theme-switch {
+    display: inline-block;
+    position: relative;
+    width: 44px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid #8793a4;
+    border-radius: 14px;
+    background: #566171;
+    vertical-align: middle;
+    cursor: pointer;
+    touch-action: none;
+}
+
+#theme-switch[aria-checked="true"] {
+    background: #2868c5;
+    border-color: #93c5fd;
+}
+
+.theme-switch-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    pointer-events: none;
+    transition: transform 120ms ease;
+}
+
+#theme-switch[aria-checked="true"] .theme-switch-thumb {
+    transform: translateX(20px);
+}
+
+#theme-switch:focus-visible {
+    outline: 2px solid #93c5fd;
+    outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .theme-switch-thumb { transition: none; }
+}
+
+:root[data-theme="dark"] {
+    color-scheme: dark;
+    --theme-bg: #151a22;
+    --theme-panel: #202835;
+    --theme-hover: #2c394b;
+    --theme-text: #e3e9f2;
+    --theme-muted: #adb9cb;
+    --theme-border: #48556a;
+    background: var(--theme-bg);
+}
+
+[data-theme="dark"] body {
+    background: var(--theme-bg);
+    color: var(--theme-text);
+}
+
+[data-theme="dark"] a { color: #93c5fd; }
+[data-theme="dark"] a:hover { color: #c5dfff; }
+
+[data-theme="dark"] .dropdown-menu > li > a {
+    color: var(--theme-text);
+}
+
+[data-theme="dark"] .dropdown-menu > li > a:is(:hover, :focus),
+[data-theme="dark"] .dropdown-menu > .active > a,
+[data-theme="dark"] .dropdown-menu > .active > a:is(:hover, :focus) {
+    background: var(--theme-hover);
+    color: var(--theme-text);
+}
+
+[data-theme="dark"] .dropdown-menu > .disabled > a,
+[data-theme="dark"] .dropdown-menu > .disabled > a:is(:hover, :focus) {
+    background: transparent;
+    color: var(--theme-muted);
+}
+
+[data-theme="dark"] :is(.options-group, .options-content, .options-group-heading,
+    .options-guide, .page-title, #search_box, .popup_menu, .selector, .prefix_select_container,
+    .selector_filterbar, .ui-widget-content, .ui-widget-header, .ui-dialog,
+    .ui-dialog-question, .modal-content, .panel, .panel-heading, .well,
+    .dropdown-menu, .table-striped > tbody > tr:nth-of-type(odd), pre,
+    .minibutton, .vrf_filter_entry_rt, .preflist_vrf_rt) {
+    background: var(--theme-panel);
+    color: var(--theme-text);
+    border-color: var(--theme-border);
+    text-shadow: none;
+}
+
+[data-theme="dark"] :is(input:not([type="submit"]):not([type="button"]),
+    textarea, select, .form-control, .btn-default,
+    ul.tagit, tags-input .tags, .ui-state-default) {
+    background: var(--theme-bg);
+    color: var(--theme-text);
+    border-color: var(--theme-border);
+}
+
+[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--theme-muted); }
+[data-theme="dark"] :is(.row_match, .selector_entry_name, .selector > div > a, .popup_menu > a) {
+    color: var(--theme-text);
+}
+[data-theme="dark"] :is(.row_collateral, .prefix_hidden_text, .prefix_vrf, .version > a, .text-muted) {
+    color: var(--theme-muted);
+}
+[data-theme="dark"] :is(.option:hover, .prefix_entry:hover, tbody.listing > tr:hover,
+    .dropdown-menu > li > a:hover, .minibutton:hover) {
+    background: var(--theme-hover);
+}
+[data-theme="dark"] :is(.table > tbody > tr > td,
+    .table > thead > tr > th, .rule, hr, .top_menu) {
+    border-color: var(--theme-border);
+}
+[data-theme="dark"] :is(.required, .text-danger) { color: #ff9c9c; }
+[data-theme="dark"] .prefix_added_entry { background: #204535; color: #d6f5e1; }
+[data-theme="dark"] .login-result-error { background: #4a2428; color: #ffd6d6; }
+[data-theme="dark"] .login-result-success,
+[data-theme="dark"] .result-success { background: #204535; color: #d6f5e1; }
+[data-theme="dark"] .popup_menu h3 { background: var(--theme-panel); text-shadow: none; }
+
+[data-theme="dark"] #query_string {
+    background: var(--theme-bg);
+    color: var(--theme-text);
+    border-color: var(--theme-border);
+}
+
+[data-theme="dark"] #query_string:focus {
+    border-color: #93c5fd;
+}
+
+[data-theme="dark"] #floating_prefix_header {
+    background-color: var(--theme-panel);
+    border-color: var(--theme-border);
+}
+
+[data-theme="dark"] .preflist_vrf_panel {
+    color: var(--theme-muted);
+    border-color: var(--theme-border);
+}
+
+[data-theme="dark"] .prefix_list_header {
+    background: var(--theme-panel);
+    color: var(--theme-text);
+    border-color: var(--theme-border);
+}
+
+/* Keep action links readable instead of inheriting the normal link color. */
+[data-theme="dark"] .btn.btn-success {
+    background: #286c38;
+    color: #fff;
+    border-color: #5cb85c;
+    text-shadow: none;
+}
+
+[data-theme="dark"] .btn.btn-success:is(:hover, :focus, :active, .active),
+[data-theme="dark"] .open > .btn.btn-success.dropdown-toggle {
+    background: #20582e;
+    color: #fff;
+    border-color: #5cb85c;
+}
+
+[data-theme="dark"] .btn.btn-success:focus-visible {
+    outline: 2px solid #93c5fd;
+    outline-offset: 3px;
+}

nipap-www/nipapwww/static/templates/pool_add.html

@@ -8,7 +8,7 @@
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div id="pool_success_bg" ng-repeat="pool in added_pools | orderBy:'id':true" style="padding: 15px; background-color: #ccffcc;">
+			<div id="pool_success_bg" ng-repeat="pool in added_pools | orderBy:'id':true" class="result-success">
 				The pool {{ pool.name }} was successfully added.
 			</div>
 		</div>

nipap-www/nipapwww/static/templates/pool_edit.html

@@ -8,7 +8,7 @@
 		<div class="options-group">
 			<div class="options-content">
 				<h3 class="options-group-heading">Result</h3>
-				<div id="pool_success_bg" ng-repeat="pool in edited_pools" style="padding: 15px; background-color: #ccffcc;">
+				<div id="pool_success_bg" ng-repeat="pool in edited_pools" class="result-success">
 					The pool {{ pool.name }} was successfully edited.
 				</div>
 			</div>

nipap-www/nipapwww/static/templates/prefix_edit.html

@@ -8,7 +8,7 @@
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div ng-repeat="prefix in edited_prefixes" style="padding: 15px; background-color: #ccffcc;">
+			<div ng-repeat="prefix in edited_prefixes" class="prefix_added_entry" style="padding: 15px;">
 				The prefix {{ prefix.prefix }} was successfully edited.
 			</div>
 		</div>

nipap-www/nipapwww/static/templates/vrf_add.html

@@ -8,7 +8,7 @@
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div id="vrf_success_bg" ng-repeat="vrf in added_vrfs | orderBy:'id':true" style="padding: 15px; background-color: #ccffcc;">
+			<div id="vrf_success_bg" ng-repeat="vrf in added_vrfs | orderBy:'id':true" class="result-success">
 				The VRF {{ vrf.rt }} was successfully added.
 			</div>
 		</div>

nipap-www/nipapwww/static/templates/vrf_edit.html

@@ -8,7 +8,7 @@
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div id="vrf_success_bg" ng-repeat="vrf in edited_vrfs" style="padding: 15px; background-color: #ccffcc;">
+			<div id="vrf_success_bg" ng-repeat="vrf in edited_vrfs" class="result-success">
 				The VRF {{ vrf.rt }} was successfully edited.
 			</div>
 		</div>

nipap-www/nipapwww/static/theme.js

@@ -0,0 +1,77 @@
+(function () {
+    'use strict';
+    var preference;
+    var systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
+    try {
+        preference = localStorage.getItem('nipap-theme');
+    } catch (error) {
+        // The switch still works when browser storage is unavailable.
+    }
+    if (preference !== 'dark' && preference !== 'light') {
+        preference = null;
+    }
+
+    function applyTheme() {
+        var dark = preference ? preference === 'dark' : systemTheme.matches;
+        document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+        var control = document.getElementById('theme-switch');
+        if (control) {
+            control.setAttribute('aria-checked', String(dark));
+        }
+    }
+
+    applyTheme();
+    systemTheme.addEventListener('change', applyTheme);
+    document.addEventListener('DOMContentLoaded', function () {
+        var control = document.getElementById('theme-switch');
+        var startX = null;
+        var dragged = false;
+        function select(dark) {
+            preference = dark ? 'dark' : 'light';
+            try {
+                localStorage.setItem('nipap-theme', preference);
+            } catch (error) {
+                // Retain the selection for this page even without storage.
+            }
+            applyTheme();
+        }
+        applyTheme();
+        control.addEventListener('click', function () {
+            if (dragged) {
+                dragged = false;
+                return;
+            }
+            select(document.documentElement.dataset.theme !== 'dark');
+        });
+        control.addEventListener('pointerdown', function (event) {
+            if (!event.isPrimary || event.button !== 0) {
+                return;
+            }
+            startX = event.clientX;
+            dragged = false;
+            control.setPointerCapture(event.pointerId);
+        });
+        control.addEventListener('pointerup', function (event) {
+            if (startX === null) {
+                return;
+            }
+            var distance = event.clientX - startX;
+            startX = null;
+            if (Math.abs(distance) > 8) {
+                dragged = true;
+                select(distance > 0);
+            }
+        });
+        control.addEventListener('pointercancel', function () {
+            startX = null;
+            dragged = false;
+        });
+        control.addEventListener('keydown', function (event) {
+            dragged = false;
+            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                event.preventDefault();
+                select(event.key === 'ArrowRight');
+            }
+        });
+    });
+}());

nipap-www/nipapwww/templates/base.html

@@ -4,6 +4,7 @@
 	<head>
 		<title>{{ g.page_title|default('NIPAP') }}</title>
 		<meta charset="utf-8">
+		<script src="{{ url_for('static', filename='theme.js') }}"></script>
 		<link rel="stylesheet" href="{{ url_for("static", filename="css/jquery-ui-1.12.1.min.css") }}">
 		<link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap-3.2.0.min.css") }}">
 		<link rel="stylesheet" href="{{ url_for("static", filename="css/nipap.css") }}?v={{ g.www_version }}">
@@ -64,6 +65,7 @@
 				ng_compile = angular.element($('html')).injector().get('$compile');
 			});
 		</script>
+		<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
 		{% block head %}
 		{% endblock %}
 	</head>
@@ -95,6 +97,12 @@
 			</div>
 			<div class="menu_entry" style="position: absolute; right: 30px; padding-top: 0px;">
 				<ol style="display: block; list-style: none outside none; margin: 0; padding: 0;">
+					<li style="display: inline-block; padding: 0; margin: 0 10px 0 0;">
+					<label for="theme-switch" class="theme-switch-label">Mode</label>
+					<button id="theme-switch" type="button" role="switch" aria-checked="false" aria-label="Dark mode" title="Dark mode">
+						<span class="theme-switch-thumb" aria-hidden="true"></span>
+					</button>
+					</li>
 					<li style="display: inline-block; padding: 0; margin: 0;">
 					<a href="{{ url_for('auth.logout') }}" class="menu_link">Log out</a>
 					</li>

nipap-www/nipapwww/templates/login.html

@@ -49,7 +49,7 @@
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div style="padding: 15px; background-color: #ffcccc;">
+			<div class="login-result login-result-error">
 				{{ g.error }}
 			</div>
 		</div>
@@ -62,7 +62,7 @@ <h3 class="options-group-heading">Result</h3>
 	<div class="options-group">
 		<div class="options-content">
 			<h3 class="options-group-heading">Result</h3>
-			<div style="padding: 15px; background-color: #ccffcc;">
+			<div class="login-result login-result-success">
 				Logged out
 			</div>
 		</div>

nipap-www/nipapwww/templates/macros.html

@@ -56,7 +56,7 @@
 	<div class="prefix_column" style="width: 26px;"></div>
 	<div class="prefix_column" style="">Description</div>
 </div>
-<div id="floating_prefix_header" style="background-color: #FFFFFF; visibility: hidden; position: fixed; width: 100%; border-bottom: 1px solid #DDDDDD; top: 0px; z-index: 1;">
+<div id="floating_prefix_header" style="visibility: hidden; position: fixed; width: 100%; border-bottom: 1px solid #DDDDDD; top: 0px; z-index: 1;">
 	<div class="prefix_list_header">
 		<div class="prefix_column" style="width: 156px;">VRF</div>
 		<div class="prefix_column" style="width: 300px; padding-left: 20px;">Prefix</div>