diff --git a/public/language/en-GB/admin/dashboard.json b/public/language/en-GB/admin/dashboard.json index c77f7ff0c2..cb517252e0 100644 --- a/public/language/en-GB/admin/dashboard.json +++ b/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", diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss index c7ee741967..5003d75f94 100644 --- a/public/scss/admin/admin.scss +++ b/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; diff --git a/public/scss/admin/common.scss b/public/scss/admin/common.scss index 85cea66ed2..b94eddd2da 100644 --- a/public/scss/admin/common.scss +++ b/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; diff --git a/public/scss/admin/general/dashboard.scss b/public/scss/admin/general/dashboard.scss index 5ad836cdd9..cecbbb1dbe 100644 --- a/public/scss/admin/general/dashboard.scss +++ b/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 { diff --git a/public/scss/admin/general/navigation.scss b/public/scss/admin/general/navigation.scss index ada36aeeea..561471576a 100644 --- a/public/scss/admin/general/navigation.scss +++ b/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 { diff --git a/public/scss/admin/overrides.scss b/public/scss/admin/overrides.scss index 58922bd310..90f71d908f 100644 --- a/public/scss/admin/overrides.scss +++ b/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"; diff --git a/public/src/admin/dashboard.js b/public/src/admin/dashboard.js index ef80204127..3cd0b93619 100644 --- a/public/src/admin/dashboard.js +++ b/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')); }); } diff --git a/src/views/admin/dashboard.tpl b/src/views/admin/dashboard.tpl index 6858038257..5f5de432cd 100644 --- a/src/views/admin/dashboard.tpl +++ b/src/views/admin/dashboard.tpl @@ -10,7 +10,7 @@
-