dark theme acp

public/language/en-GB/admin/dashboard.json

@@ -48,6 +48,7 @@
 	"restart-disabled": "Rebuilding and Restarting your NodeBB has been disabled as you do not seem to be running it via the appropriate daemon.",
 	"maintenance-mode": "Maintenance Mode",
 	"maintenance-mode-title": "Click here to set up maintenance mode for NodeBB",
+	"dark-mode": "Dark Mode",
 	"realtime-chart-updates": "Realtime Chart Updates",
 
 	"active-users": "Active Users",

public/scss/admin/admin.scss

@@ -37,7 +37,7 @@ body {
 		padding-top: 0;
 	}
 	.acp-page-main-header {
-		background-color: white;
+		background-color: var(--bs-body-bg);
 	}
 
 	.settings, .categories, .category, .admins-mods {
@@ -83,17 +83,17 @@ body {
 	}
 
 	.card:not([data-container-html]) {
-		background-color: #FFF;
+		background-color: var(--bs-body-bg);
 		box-sizing: border-box;
 		border-radius: 3px;
 		border-width: 0px;
-		box-shadow: 0px 1px 3px 0px rgba(165, 165, 165, 0.75);
+		box-shadow: 0px 1px 3px 0px rgba(var(--bs-secondary-rgb), 0.5);
 		margin-bottom: 20px;
 
 		>.card-header {
 			@include acp-panel-heading;
-			background: #fefefe;
-			color: #333;
+			background-color: var(--bs-body-bg);
+			color: var(--bs-body-color);
 		}
 
 		&.card-danger >.card-header {
@@ -113,7 +113,7 @@ body {
 				cursor: pointer;
 				line-height: 36px;
 				text-align: center;
-				color: $gray-800;
+				color: $gray-700;
 				margin: 4px;
 
 				&:hover, &.selected {
@@ -136,7 +136,8 @@ body {
 	.bootstrap-tagsinput {
 		box-shadow: $input-box-shadow;
 		width: 100%;
-
+		background-color: var(--bs-body-bg);
+		border: var(--bs-border-width) solid var(--bs-border-color);
 		input {
 			font-size: 0.875rem;
 			width: 64px;

public/scss/admin/common.scss

@@ -13,8 +13,6 @@
 
 .tracking-tight { letter-spacing: -0.02em; }
 
-$btn-ghost-hover-color: mix($light, $dark, 90%);
-
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -27,12 +25,11 @@ $btn-ghost-hover-color: mix($light, $dark, 90%);
 	padding: ($spacer * 0.25) ($spacer * 0.5);
 	text-align: left;
 	--bs-text-opacity: 1;
-	color: rgb(73 80 87 / var(--bs-text-opacity));
+	color: $btn-ghost-color;
 	font-family: $font-family-secondary;
 	cursor: pointer;
 	&:hover, &.active {
 		background-color: $btn-ghost-hover-color;
-		color: rgb(73 80 87 / var(--bs-text-opacity));
 		text-decoration: none;
 	}
 }
@@ -66,6 +63,23 @@ $btn-ghost-hover-color: mix($light, $dark, 90%);
 	line-height: 1.25rem;
 }
 
+@include color-mode(dark) {
+	#content {
+		.btn-light {
+			@extend .btn-dark;
+		}
+		.text-bg-light {
+			@extend .text-bg-dark;
+		}
+		.btn-ghost, .btn-ghost-sm, .btn-outline, .btn-outline-sm {
+			color: $btn-ghost-color-dark;
+			&:hover, &.active {
+				background-color: $btn-ghost-hover-color-dark;
+			}
+		}
+	}
+}
+
 .flex-basis-md-200 {
 	@include media-breakpoint-up(md) {
 		flex-basis: 200px!important;

public/scss/admin/general/dashboard.scss

@@ -7,7 +7,7 @@
 
 	.graph-container {
 		position: relative;
-		background: $body-bg;
+		background: var(--bg-body-bg);
 
 		&.fullscreen {
 			width: 100%;
@@ -70,8 +70,6 @@
 			list-style-type: none;
 			padding: 0.5rem 1rem;
 			margin: 0;
-			background: rgba(255, 255, 255, 0.66);
-			border: 1px solid #ddd;
 
 			li {
 				div {

public/scss/admin/general/navigation.scss

@@ -11,11 +11,10 @@
 	#active-navigation {
 		float: none;
 		min-height: 50px;
-		border: 1px solid #eee;
 		overflow: auto;
 
 		.active {
-			background-color: #eee;
+			background-color: $gray-700;
 		}
 
 		li a {

public/scss/admin/overrides.scss

@@ -16,9 +16,17 @@ $yellow:  #ffc107 !default;
 $green:   #198754 !default;
 $cyan:    #0dcaf0 !default;
 
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
 $body-color: $gray-800;
 $text-muted: $gray-600 !default;
 
+$btn-ghost-color: rgb(73, 80, 87);
+$btn-ghost-hover-color: mix($light, $dark, 90%);
+$btn-ghost-color-dark: rgb(175, 191, 206);
+$btn-ghost-hover-color-dark: mix($dark, $light, 90%);
+
 // Custom fonts
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 

public/src/admin/dashboard.js

@@ -43,6 +43,7 @@ define('admin/dashboard', [
 
 		isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
+		setupDarkModeButton();
 		setupRealtimeButton();
 		setupGraphs(function () {
 			socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
@@ -529,18 +530,20 @@ define('admin/dashboard', [
 		graphs.topics.update();
 	}
 
+	function setupDarkModeButton() {
+		let bsTheme = localStorage.getItem('data-bs-theme') || 'light';
+		$('#toggle-dark-mode').prop('checked', bsTheme === 'dark')
+			.on('click', function () {
+				const isChecked = $(this).is(':checked');
+				bsTheme = isChecked ? 'dark' : 'light';
+				$('html').attr('data-bs-theme', bsTheme);
+				localStorage.setItem('data-bs-theme', bsTheme);
+			});
+	}
+
 	function setupRealtimeButton() {
-		$('#toggle-realtime .fa').on('click', function () {
-			const $this = $(this);
-			if ($this.hasClass('fa-toggle-on')) {
-				$this.removeClass('fa-toggle-on').addClass('fa-toggle-off');
-				$this.parent().find('strong').html('OFF');
-				initiateDashboard(false);
-			} else {
-				$this.removeClass('fa-toggle-off').addClass('fa-toggle-on');
-				$this.parent().find('strong').html('ON');
-				initiateDashboard(true);
-			}
+		$('#toggle-realtime').on('click', function () {
+			initiateDashboard($(this).is(':checked'));
 		});
 	}
 

src/views/admin/dashboard.tpl

@@ -10,7 +10,7 @@
 					<div class="card-body">
 						<div class="graph-container pie-chart legend-down">
 							<canvas id="analytics-registered"></canvas>
-							<ul class="graph-legend" id="analytics-legend">
+							<ul class="graph-legend border" id="analytics-legend">
 								<li><div class="registered"></div><span>(<span class="count"></span>) [[admin/dashboard:registered]]</span></li>
 								<li><div class="guest"></div><span>(<span class="count"></span>) [[admin/dashboard:guest]]</span></li>
 							</ul>
@@ -25,7 +25,7 @@
 					<div class="card-body">
 						<div class="graph-container pie-chart legend-down">
 							<canvas id="analytics-presence"></canvas>
-							<ul class="graph-legend" id="analytics-presence-legend">
+							<ul class="graph-legend border" id="analytics-presence-legend">
 								<li><div class="reading-posts"></div><span>(<span class="count"></span>) [[admin/dashboard:reading-posts]]</span></li>
 								<li><div class="on-categories"></div><span>(<span class="count"></span>) [[admin/dashboard:on-categories]]</span></li>
 								<li><div class="browsing-topics"></div><span>(<span class="count"></span>) [[admin/dashboard:browsing-topics]]</span></li>
@@ -42,7 +42,7 @@
 					<div class="card-body">
 						<div class="graph-container pie-chart legend-down">
 							<canvas id="analytics-topics"></canvas>
-							<ul class="graph-legend" id="topics-legend"></ul>
+							<ul class="graph-legend border" id="topics-legend"></ul>
 						</div>
 					</div>
 				</div>
@@ -83,7 +83,15 @@
 
 				<a href="{config.relative_path}/admin/settings/advanced" class="d-block mb-2 btn btn-info btn-sm" data-bs-placement="bottom" data-bs-toggle="tooltip" title="[[admin/dashboard:maintenance-mode-title]]">[[admin/dashboard:maintenance-mode]]</a>
 
-				<span id="toggle-realtime" class="text-sm">[[admin/dashboard:realtime-chart-updates]] <strong>OFF</strong> <i class="fa fa fa-toggle-off pointer"></i></span>
+				<div class="form-check form-switch">
+					<label for="toggle-realtime" class="form-check-label text-sm">[[admin/dashboard:realtime-chart-updates]]</label>
+					<input id="toggle-realtime" class="form-check-input" type="checkbox">
+				</div>
+
+				<div class="form-check form-switch">
+					<label for="toggle-dark-mode" class="form-check-label text-sm">[[admin/dashboard:dark-mode]]</label>
+					<input id="toggle-dark-mode" class="form-check-input" type="checkbox">
+				</div>
 				{{{ end }}}
 				<hr/>
 				<h6>[[admin/dashboard:notices]]</h6>

src/views/admin/header.tpl

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{function.localeToHTML, acpLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
+<html data-bs-theme="light" lang="{function.localeToHTML, acpLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 	<head>
 		<title>{title}</title>
 
@@ -15,6 +15,10 @@
 				flags: {},
 				inAdmin: true
 			};
+			const theme = localStorage.getItem('data-bs-theme');
+			if (theme && theme === 'dark') {
+				document.documentElement.setAttribute('data-bs-theme', 'dark');
+			}
 		</script>
 
 		<script type="text/javascript" src="{relative_path}/assets/admin.min.js?{cache-buster}"></script>

src/views/admin/manage/tags.tpl

@@ -21,7 +21,7 @@
 		<div class="">
 			<div class="tag-management">
 				<div class="">
-					<div class="alert alert-light text-sm px-0">
+					<div class="alert alert-light text-sm">
 						[[admin/manage/tags:description]]
 					</div>
 

src/views/admin/partials/offcanvas.tpl

@@ -1,4 +1,4 @@
-<div class="offcanvas offcanvas-start gap-1" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" style="width: 275px;">
+<div data-bs-theme="light" class="offcanvas offcanvas-start gap-1" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" style="width: 275px;">
 	<div class="offcanvas-body flex-0 pb-0 overflow-visible d-flex flex-column gap-1 ff-secondary">
 		<!-- IMPORT admin/partials/quick_actions/alerts.tpl -->
 

src/views/admin/partials/sidebar-left.tpl

@@ -1,4 +1,4 @@
-<div id="sidebar-left" style="width:240px;" class="vh-100 sticky-top start-0 d-none d-lg-flex text-bg-light p-2 flex-column justify-content-start text-sm border-end gap-1 flex-shrink-0">
+<div data-bs-theme="light" id="sidebar-left" style="width:240px;" class="vh-100 sticky-top start-0 d-none d-lg-flex text-bg-light p-2 flex-column justify-content-start text-sm border-end gap-1 flex-shrink-0">
 	<div class="d-flex flex-column gap-1 ff-secondary">
 
 		<!-- IMPORT admin/partials/quick_actions/alerts.tpl -->

src/views/admin/settings/api.tpl

@@ -46,8 +46,8 @@
 			</thead>
 			<tbody>
 				{{{ each tokens }}}
-				<tr data-token="{./token}" class="text-nowrap">
-					<td>
+				<tr data-token="{./token}" class="">
+					<td class="text-nowrap">
 						<button type="button" class="btn btn-link" data-action="copy" data-clipboard-text="{./token}"><i class="fa fa-fw fa-clipboard" aria-hidden="true"></i></button>
 						<div class="vr me-3" aria-hidden="true"></div>
 						<span class="user-select-all">{./token}</span>
@@ -76,7 +76,7 @@
 					<td class="align-middle">
 						<span class="timeago" title="{./timestampISO}"></span>
 					</td>
-					<td>
+					<td class="text-nowrap">
 						<button type="button" class="btn btn-light btn-sm" data-action="edit" title="[[admin/settings/api:edit]]">
 							<i class="fa fa-edit text-primary"></i>
 						</button>

src/views/admin/settings/navigation.tpl

@@ -14,7 +14,7 @@
 	<div class="row" id="navigation">
 		<div class="col-lg-9">
 			<div class="clearfix">
-				<ul id="active-navigation" class="nav">
+				<ul id="active-navigation" class="nav border">
 					{{{ each navigation }}}
 					<li data-index="{navigation.index}" class="float-start nav-item {navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
 						<a href="#" title="{navigation.route}" id="{navigation.id}" class="nav-link p-3 {{{ if !navigation.enabled }}}text-muted{{{ end }}}">