From 856754a5aabb9ad1f5a43f3d118b6f83c75f52d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Wed, 2 Aug 2023 17:08:14 -0400 Subject: [PATCH] dark theme acp --- public/language/en-GB/admin/dashboard.json | 1 + public/scss/admin/admin.scss | 15 +++++++------ public/scss/admin/common.scss | 22 +++++++++++++++---- public/scss/admin/general/dashboard.scss | 4 +--- public/scss/admin/general/navigation.scss | 3 +-- public/scss/admin/overrides.scss | 8 +++++++ public/src/admin/dashboard.js | 25 ++++++++++++---------- src/views/admin/dashboard.tpl | 16 ++++++++++---- src/views/admin/header.tpl | 6 +++++- src/views/admin/manage/tags.tpl | 2 +- src/views/admin/partials/offcanvas.tpl | 2 +- src/views/admin/partials/sidebar-left.tpl | 2 +- src/views/admin/settings/api.tpl | 6 +++--- src/views/admin/settings/navigation.tpl | 2 +- 14 files changed, 75 insertions(+), 39 deletions(-) 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 @@
-
    +
    • () [[admin/dashboard:registered]]
    • () [[admin/dashboard:guest]]
    @@ -25,7 +25,7 @@
    -
      +
      • () [[admin/dashboard:reading-posts]]
      • () [[admin/dashboard:on-categories]]
      • () [[admin/dashboard:browsing-topics]]
        • @@ -42,7 +42,7 @@
        -
          +
        @@ -83,7 +83,15 @@ [[admin/dashboard:maintenance-mode]] - [[admin/dashboard:realtime-chart-updates]] OFF +
        + + +
        + +
        + + +
        {{{ end }}}
        [[admin/dashboard:notices]]
        diff --git a/src/views/admin/header.tpl b/src/views/admin/header.tpl index fdc655b44b..e2f7725123 100644 --- a/src/views/admin/header.tpl +++ b/src/views/admin/header.tpl @@ -1,5 +1,5 @@ - + {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'); + } diff --git a/src/views/admin/manage/tags.tpl b/src/views/admin/manage/tags.tpl index edeff453c6..00c4260f41 100644 --- a/src/views/admin/manage/tags.tpl +++ b/src/views/admin/manage/tags.tpl @@ -21,7 +21,7 @@
        -
        +
        [[admin/manage/tags:description]]
        diff --git a/src/views/admin/partials/offcanvas.tpl b/src/views/admin/partials/offcanvas.tpl index f4651a74e6..20688bd1ab 100644 --- a/src/views/admin/partials/offcanvas.tpl +++ b/src/views/admin/partials/offcanvas.tpl @@ -1,4 +1,4 @@ -
        +
        diff --git a/src/views/admin/partials/sidebar-left.tpl b/src/views/admin/partials/sidebar-left.tpl index d56029d806..3a336101a6 100644 --- a/src/views/admin/partials/sidebar-left.tpl +++ b/src/views/admin/partials/sidebar-left.tpl @@ -1,4 +1,4 @@ -
        +
        diff --git a/src/views/admin/settings/api.tpl b/src/views/admin/settings/api.tpl index 20f0528b3e..3fff449d70 100644 --- a/src/views/admin/settings/api.tpl +++ b/src/views/admin/settings/api.tpl @@ -46,8 +46,8 @@ {{{ each tokens }}} - - + + {./token} @@ -76,7 +76,7 @@ - + diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl index 2d071be170..8c438200cb 100644 --- a/src/views/admin/settings/navigation.tpl +++ b/src/views/admin/settings/navigation.tpl @@ -14,7 +14,7 @@