论坛暗黑模式

效果图：

注意事项：

1. beta 版，无任何效果保证。
2. 新帖页面内容无法实现完美暗黑模式，因为 iframe 实时刷新 css 效果。本次使用反差色来完成，对文本内容几乎无影响，对图片影响较大（黑色变白色，etc.）！
3. 尚有不足，待各位大佬完善。
4. 本模式基于，简约白色 定制；如果你使用，护眼暗黑，会跟以上效果有一定出入。

使用方法：

1. 在 自定义 添加以下 CSS，并设置简约白色以达最佳效果！
2. 只有你设备系统也是暗黑（深色）模式，才会生效。如果要默认生效，移除一下 CSS 第一行和最后一行。

@media (prefers-color-scheme: dark) {
/* Dark mode override styles for daloa.net */
:root {
color-scheme: dark !important;
  /* Define dark mode colors - darker theme */
  --dark-bg: #0a0a0a;
  --dark-surface: #1a1a1a;
  --dark-header: #1a1a1a;
  --dark-text: #e0e0e0;
  --dark-text-secondary: #a0a0a0;
  --dark-border: #2d2d2d;
  --dark-link: #66b3ff;
  --dark-link-hover: #1a1a1a;
  --dark-hover: #2f2f2f;

}

/* Base elements - Full coverage */
html, 
body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Header */
header#header,
.navbar,
.bg-dark {
  background-color: var(--dark-header) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* Main content area */
#body {
  background: var(--dark-bg) !important;
  background-color: var(--dark-bg) !important;
}

/* Cards and Containers */
.card,
.card-header,
.card-body,
.card-footer {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* Posts/Threads */
.media.thread {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  transition: background-color 0.2s ease !important;
}

.media.thread:hover {
  background-color: var(--dark-hover) !important;
}

/* Links */
a {
  color: var(--dark-link) !important;
}

a:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text) !important;
}

/* Navigation */
.nav-link {
  color: var(--dark-text) !important;
}

.nav-link:hover {
  background-color: var(--dark-hover) !important;
}

.nav-link.active {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text) !important;
}

/* Footer */
footer,
#footer {
  background-color: var(--dark-header) !important;
  color: var(--dark-text-secondary) !important;
  border-top: 1px solid var(--dark-border) !important;
}

/* Text colors */
.text-muted,
.text-grey {
  color: var(--dark-text-secondary) !important;
}

/* Form elements */
input, 
textarea,
select {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Buttons */
.btn {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

.btn:hover {
  background-color: var(--dark-hover) !important;
}

/* Tables */
table {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

th, td {
  border-color: var(--dark-border) !important;
}

/* Avatar images - slightly dim */
img.avatar-1,
img.avatar-2,
img.avatar-3 {
  opacity: 0.9;
}

/* Ensure dropdowns and menus are dark */
.dropdown-menu,
.nav-menu {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* Horizontal lines and borders */
hr,
.border,
.border-top,
.border-bottom {
  border-color: var(--dark-border) !important;
}

/* Pagination */
.pagination .page-link {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.pagination .page-link:hover {
  background-color: var(--dark-hover) !important;
}

.pagination .active .page-link {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border) !important;
}
.card>.card-header {
    background-image: linear-gradient(0deg, #303031, #000000);
}
/* Sidebar menu dark mode */
.list-group-item {
  background-color: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

.list-group-item:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text) !important;
}

.list-group-item.active {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-link) !important;
}

/* For the avatar section */
#my_aside .card-body {
  background-color: var(--dark-surface) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* Make avatar slightly dimmer to match dark theme */
#my_aside .avatar-4 {
  opacity: 0.9;
}

/* Add smooth transition for hover effects */
.list-group-item {
  transition: background-color 0.2s ease !important;
}

/* Target TinyMCE default content styles */
.tox-edit-area__iframe {
  background: var(--dark-surface) !important;
}

#tinymce.mce-content-body {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* Override TinyMCE's content.min.css */
.mce-content-body[data-id="message"] {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* Override both the oxide theme and default content styles 
无法更改，因iframe即时调整css；如果黑色，确实不舒服，只能用反差色，但会导致所有内文内容被反差色（对文字无影响，对图片影响较大）,使用后果自负。
*/
#message_ifr,
[id^="mce-u"] {
  filter: invert(1) hue-rotate(180deg) !important;
}
.navbar-brand > img {
filter: invert(100%);}
}

Claude写的