Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-05-07 21:27:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

dark theme acp

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2023-08-02 17:08:14 -04:00
parent 3837798292
commit 856754a5aa
14 changed files with 75 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/language/en-GB/admin/dashboard.json
View File

@@ -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",

15
public/scss/admin/admin.scss
View File

@@ -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;

22
public/scss/admin/common.scss
View File

@@ -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;

4
public/scss/admin/general/dashboard.scss
View File

@@ -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 {

3
public/scss/admin/general/navigation.scss
View File

@@ -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 {

8
public/scss/admin/overrides.scss
View File

@@ -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";

25
public/src/admin/dashboard.js
View File

@@ -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'));
});
}

16
src/views/admin/dashboard.tpl
View File

@@ -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>

6
src/views/admin/header.tpl
View File

@@ -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>

2
src/views/admin/manage/tags.tpl
View File

@@ -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>

2
src/views/admin/partials/offcanvas.tpl
View File

@@ -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 -->

2
src/views/admin/partials/sidebar-left.tpl
View File

@@ -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 -->

6
src/views/admin/settings/api.tpl
View File

@@ -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>

2
src/views/admin/settings/navigation.tpl
View File

@@ -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 }}}">