Dark Mode

digibandit

Not bad, but seems more like grey mode. Could we get toggles/settings to modify/tweak?

EG:

Standard

Dark

Dark Reader with Dynamic Settings Applied

johnny

that dark reader plugin looks great, but yeah im with you on it the dark mode still needs some work in the future. Maybe there is a way ti implement that browser plugin into the the code itself

digibandit

johnny

I've tested some theme stuffs. Is "\css\itflow_custom.css" used?

Seems like just a few tweaks would make this 10/10, half the problem being TinyMCE (the comment form thing) having it's own dark mode.

digibandit

I'm testing with this, but i only have 1/2 of an idea of what I'm doing… This get's pasted into chrome's dev tools console to test the dark mode without full edits each time. This seems to cover most of the problems but black is probably too dark for the bg and the TinyMCE fix seems to break the licensing so I'll need to revise that but I hope this helps!

// Complete Dark Mode Fix with TinyMCE
const style = document.createElement('style');
style.innerHTML = `
.dark-mode {
  --dark-bg-body: #1a1a1a;
  --dark-bg-card: #242424;
  --dark-bg-header: #1f1f1f;
  --dark-bg-input: #1a1a1a;
  --dark-border: #3a3a3a;
  --dark-text: #e0e0e0;
  --dark-text-muted: #a0a0a0;
  --dark-hover: #3a3a3a;
}

.dark-mode,
.dark-mode .content-wrapper {
  background-color: var(--dark-bg-body);
}

.dark-mode .card {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border);
}

.dark-mode .card-header {
  background-color: var(--dark-bg-header);
  border-color: var(--dark-border);
}

.dark-mode .breadcrumb {
  background-color: var(--dark-bg-card);
}

.dark-mode .breadcrumb-item a {
  color: #66b3ff;
}

.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .custom-select,
.dark-mode textarea,
.dark-mode .input-group-text {
  background-color: var(--dark-bg-input);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

.dark-mode .btn-light,
.dark-mode .btn-default,
.dark-mode .card-tools .btn-light,
.dark-mode .btn-group .btn-light {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

.dark-mode .btn-light:hover {
  background-color: var(--dark-hover);
}

.dark-mode .dropdown-menu {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border);
}

.dark-mode .dropdown-item {
  color: var(--dark-text);
}

.dark-mode .dropdown-item:hover {
  background-color: var(--dark-hover);
}

.dark-mode .table {
  color: var(--dark-text);
  background-color: transparent;
}

.dark-mode .modal-content {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border);
}

.dark-mode .main-sidebar {
  background-color: var(--dark-bg-header);
}

.dark-mode .text-secondary {
  color: var(--dark-text-muted);
}

.dark-mode .page-link {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

.dark-mode .page-item.active .page-link {
  background-color: #007bff;
}

.dark-mode a:not(.btn) {
  color: #66b3ff;
}

.dark-mode hr,
.dark-mode .dropdown-divider {
  border-color: var(--dark-border);
}`;
document.head.appendChild(style);

// Apply dark mode
if (!document.body.classList.contains('dark-mode')) {
  document.body.classList.add('dark-mode');
}

// Reinitialize TinyMCE with dark mode
if (typeof tinymce !== 'undefined') {
  tinymce.remove();
  tinymce.init({
    selector: '.tinymceTicket',
    skin: 'oxide-dark',
    content_css: 'dark',
    height: 300,
    menubar: false,
    toolbar: 'styles | bold italic underline | bullist numlist | link | removeformat',
  });
}

console.log('Dark mode with TinyMCE applied!');