From ac8784987f94d4ffd661964355ea70f93ec84a59 Mon Sep 17 00:00:00 2001
From: lacatoire <la.catoire@gmail.com>
Date: Tue, 10 Feb 2026 10:36:06 +0100
Subject: [PATCH] Add dark mode support (#1295)

Enable the theme switcher globally and add CSS dark mode rules.

- Remove $config['theme_switcher'] gate so the toggle button appears on all pages
- Add html.dark overrides in theme-medium.css for all content areas
---
 include/header.inc      |   4 +-
 styles/theme-medium.css | 383 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 384 insertions(+), 3 deletions(-)

diff --git a/include/header.inc b/include/header.inc
index 48722edafa..d90a2cfd1d 100644
--- a/include/header.inc
+++ b/include/header.inc
@@ -254,8 +254,7 @@ if (!isset($config["languages"])) {
         Search docs
       </button>
 
-        <?php if (isset($config['theme_switcher']) && $config['theme_switcher']) { ?>
-            <button type="button" class="navbar__theme js-theme-switcher">
+        <button type="button" class="navbar__theme js-theme-switcher">
                 <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="">
                     <path fill="currentColor" d="M9.52734 16.7852h1.24996v2.5195H9.52734v-2.5195Zm-3.62304-1.501-1.78125 1.7812-.88477-.8838.44238-.4414.89746-.8984.44239-.4414.88379.8838Zm9.8223-.4424 1.3388 1.3398-.8838.8838-1.7812-1.7812.8838-.8838.4424.4414ZM6.61621 6.61621c1.95259-1.95249 5.11869-1.9524 7.07129 0 1.9526 1.95264 1.9526 5.11869 0 7.07129-1.9526 1.9527-5.11863 1.9527-7.07129 0-1.95241-1.9526-1.95253-5.11871 0-7.07129ZM12.8037 7.5C11.3393 6.03577 8.96445 6.03565 7.5 7.5c-1.46441 1.46444-1.46424 3.8393 0 5.3037 1.46451 1.4645 3.8393 1.4645 5.3037 0 1.4645-1.4644 1.4645-3.8392 0-5.3037ZM3.51953 9.52734v1.24996H1V9.52734h2.51953Zm15.78517 0v1.24996h-2.5195V9.52734h2.5195ZM5.9043 5.02051l-.88379.88379-1.78223-1.78223.88379-.88379L5.9043 5.02051Zm11.1611-.89746L15.2842 5.9043l-.8838-.88379.4414-.44239.8984-.89746.4414-.44238.8838.88477ZM9.52734 1h1.24996v2.51953H9.52734V1Z"></path>
                 </svg>
@@ -266,7 +265,6 @@ if (!isset($config["languages"])) {
                     <path fill="currentColor" fill-rule="evenodd" d="M16.541 9.86c0 3.6898-2.9912 6.681-6.681 6.681V3.179c3.6898 0 6.681 2.99119 6.681 6.681ZM9.86 17.72c4.3409 0 7.86-3.5191 7.86-7.86C17.72 5.51904 14.2009 2 9.86 2 5.51904 2 2 5.51904 2 9.86c0 4.3409 3.51904 7.86 7.86 7.86Z" clip-rule="evenodd"></path>
                 </svg>
             </button>
-        <?php } ?>
 
       <!-- Mobile default items -->
       <a
diff --git a/styles/theme-medium.css b/styles/theme-medium.css
index 1f1b9d142f..32f122bdb3 100644
--- a/styles/theme-medium.css
+++ b/styles/theme-medium.css
@@ -1154,3 +1154,386 @@ div.elephpants img:focus {
 .navbar__theme:hover {
     border-color: #94a3ed;
 }
+
+/* {{{ Dark mode */
+html.dark {
+  --background-color: #1a1a2e;
+  --background-text-color: #b8b8cc;
+  --content-background-color: #16213e;
+  --content-text-color: #e0e0e0;
+  --dark-grey-color: #e0e0e0;
+  --dark-magenta-color: #cf82b1;
+  --medium-magenta-color: #d998c4;
+  scrollbar-color: hsl(0, 0%, 40%) transparent;
+}
+
+html.dark #layout-content {
+  background: var(--content-background-color);
+  color: var(--content-text-color);
+}
+html.dark #layout-content:not(:only-child) {
+  border-right-color: #2a2a4a;
+}
+
+html.dark h1,
+html.dark h2,
+html.dark h3,
+html.dark h4,
+html.dark h5,
+html.dark h6 {
+  color: var(--content-text-color);
+}
+
+html.dark #layout-content a:link,
+html.dark #layout-content a:visited {
+  color: #6ea8fe;
+}
+html.dark #layout-content a:hover,
+html.dark #layout-content a:focus {
+  color: var(--medium-magenta-color);
+  border-color: var(--medium-magenta-color);
+}
+
+html.dark h1.refname {
+  color: var(--dark-magenta-color);
+}
+
+html.dark .title a,
+html.dark .title {
+  color: var(--dark-magenta-color);
+}
+html.dark .title time {
+  color: var(--content-text-color);
+}
+
+html.dark .interfacename a,
+html.dark .fieldsynopsis .type,
+html.dark .methodsynopsis .type,
+html.dark .constructorsynopsis .type,
+html.dark .destructorsynopsis .type {
+  color: #8fc98f;
+}
+
+html.dark .classsynopsisinfo .modifier,
+html.dark .fieldsynopsis .modifier,
+html.dark .methodsynopsis .modifier,
+html.dark .constructorsynopsis .modifier,
+html.dark .destructorsynopsis .modifier {
+  color: #d998c4;
+}
+
+html.dark .classsynopsis {
+  color: #c0c0c0;
+}
+
+html.dark .docs .classsynopsisinfo_comment {
+  color: #f0a050;
+}
+
+html.dark .methodname b,
+html.dark .methodname strong,
+html.dark .methodname a,
+html.dark .classsynopsis .classname,
+html.dark .classsynopsis .interfacename,
+html.dark .parameter {
+  color: #6ea8fe;
+}
+
+html.dark .initializer,
+html.dark .initializer code {
+  color: #d998c4;
+}
+
+html.dark .dc-description {
+  color: #a0a0b8;
+}
+
+/* Warnings, Tips and Notes */
+html.dark #flash-message .success {
+  background: #1e3a1e;
+  border-color: #2d5a2d;
+}
+html.dark #flash-message .info,
+html.dark div.tip {
+  background: #1a2a3e;
+  border-color: #2a4060;
+  border-bottom-color: #2a4060;
+}
+html.dark blockquote.note {
+  background-color: #1e1e3a;
+  border-color: #3a3a5a;
+}
+html.dark div.caution {
+  background: #2e2e1a;
+  border-color: #4a4a2e;
+}
+html.dark .refsect1 blockquote.note {
+  background: #1a1e2e;
+  border-color: #2a3050;
+}
+html.dark #flash-message .error,
+html.dark div.warning {
+  background: #3a1a1a;
+  border-color: #5a2a2a;
+}
+html.dark div.warning a:link,
+html.dark div.warning a:visited,
+html.dark div.warning h2,
+html.dark div.warning h3 {
+  color: #d998c4;
+}
+html.dark #flash-message .success a,
+html.dark #flash-message a:hover,
+html.dark #flash-message a:focus,
+html.dark div.warning a:hover,
+html.dark div.warning a:focus {
+  color: #8fc98f;
+  border-color: #8fc98f;
+}
+
+html.dark .docs .classsynopsis,
+html.dark .refsect1 .fieldsynopsis,
+html.dark .refsect1 .dc-description,
+html.dark .docs .sect1 .dc-description,
+html.dark div.tip,
+html.dark blockquote.note,
+html.dark div.caution,
+html.dark div.warning {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
+}
+
+/* Tables */
+html.dark .doctable,
+html.dark .segmentedlist {
+  border-color: #3a3a5a;
+}
+html.dark .doctable thead tr,
+html.dark .segmentedlist thead tr {
+  border-color: #3a4060;
+  border-bottom-color: var(--medium-blue-color);
+  color: var(--content-text-color);
+}
+html.dark .doctable th,
+html.dark .segmentedlist th {
+  background-color: #2a3050;
+}
+html.dark .doctable tr,
+html.dark .segmentedlist tr {
+  border-color: #2a2a4a;
+}
+html.dark .doctable tbody tr:nth-child(odd),
+html.dark .segmentedlist tbody tr:nth-child(odd) {
+  background-color: #16213e;
+}
+html.dark .doctable tbody tr:nth-child(even),
+html.dark .segmentedlist tbody tr:nth-child(even) {
+  background-color: #1a2540;
+}
+
+/* Syntax highlighting and code boxes */
+html.dark #usernotes .note .text,
+html.dark .example-contents > [class$="code"],
+html.dark .example-contents.screen,
+html.dark .informalexample .literallayout {
+  background-color: #111830;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
+}
+html.dark .refsect1 .example-contents > [class$="code"],
+html.dark .refsect1 .example-contents.screen {
+  background-color: #111830;
+}
+html.dark .docs .classsynopsis,
+html.dark .refsect1 .fieldsynopsis,
+html.dark .refsect1 .dc-description,
+html.dark .docs .sect1 .dc-description {
+  background: #111830;
+  border-color: #2a3050;
+}
+
+html.dark .phpcode span.html {
+  color: #e0e0e0;
+}
+html.dark .phpcode span.comment {
+  color: #7a86b8;
+}
+html.dark div.phpcode span.default,
+html.dark div.phpcode span.variable {
+  color: #6ea8fe;
+}
+html.dark div.phpcode span.keyword {
+  color: #8fc98f;
+}
+html.dark div.phpcode span.string {
+  color: #f08080;
+}
+
+html.dark .para var,
+html.dark .simpara var,
+html.dark .para .computeroutput,
+html.dark .simpara .computeroutput {
+  background-color: #1e1e3a;
+  color: var(--content-text-color);
+}
+
+/* Anchors */
+html.dark #layout-content a.genanchor:hover,
+html.dark #layout-content a.genanchor:focus {
+  color: var(--content-text-color);
+}
+
+/* Warn and info blocks */
+html.dark .warn {
+  border-color: var(--medium-blue-color);
+  background-color: #111830;
+}
+html.dark pre.info {
+  background-color: #1a1e2e;
+  border-color: #2a3050;
+}
+
+/* User notes */
+html.dark #usernotes .note .name {
+  color: var(--content-text-color);
+}
+html.dark #usernotes .note .date {
+  color: #8888aa;
+}
+html.dark #usernotes .note .votes .tally {
+  color: var(--content-text-color);
+}
+html.dark #usernotes .note .votes .usernotes-voteu {
+  border-bottom-color: #8888aa;
+}
+html.dark #usernotes .note .votes .usernotes-voted {
+  border-top-color: #8888aa;
+}
+html.dark #usernotes .note .votes .usernotes-voteu:hover,
+html.dark #usernotes .note .votes .usernotes-voteu:focus {
+  border-bottom-color: #6ea8fe;
+}
+html.dark #usernotes .note .votes .usernotes-voted:hover,
+html.dark #usernotes .note .votes .usernotes-voted:focus {
+  border-top-color: #6ea8fe;
+}
+
+/* Breadcrumbs */
+html.dark #breadcrumbs {
+  color: #8888aa;
+  background: var(--background-color);
+}
+
+/* Left-hand sidebar menu */
+html.dark .layout-menu ul.child-menu-list li:first-child a {
+  border-top-color: #3a3a5a;
+}
+html.dark .layout-menu ul.child-menu-list a {
+  border-color: #3a3a5a;
+}
+
+/* Soft-deprecation notice */
+html.dark .soft-deprecation-notice {
+  color: #e0e0e0;
+  border-color: #5a3050;
+  background-color: #2a1a2e;
+}
+html.dark .soft-deprecation-notice h1.title {
+  color: #c0c0d0;
+}
+html.dark .soft-deprecation-notice blockquote.sidebar {
+  color: #f08080;
+  border-color: #8a8a30;
+}
+
+/* Thanks cards */
+html.dark .thanks {
+  box-shadow: rgba(0, 0, 0, 0.3) 0 .125rem .5rem;
+  background: #1a1e2e;
+}
+html.dark .thanks__logo {
+  background: #1a1e2e;
+}
+html.dark .thanks__logo--white {
+  background: #ffffff;
+  border-color: #2a3050;
+}
+
+/* Contribute section */
+html.dark .contribute {
+  background-color: #1a1e2e;
+  border-color: #2a3050;
+}
+
+/* Content box (downloads) */
+html.dark .content-box pre {
+  background: #111830;
+  border-color: #2a3050;
+}
+
+/* Standard tables */
+html.dark table.standard {
+  border-color: #2a3050;
+}
+html.dark table.standard td,
+html.dark table.standard th {
+  border-color: #2a3050;
+}
+html.dark table.standard tr:nth-child(even) td {
+  background-color: #1a2540;
+}
+html.dark table.standard th {
+  color: #a0a0b8;
+}
+html.dark table.standard tr:nth-child(even) td.subr,
+html.dark table.standard tr:nth-child(even) th.subr,
+html.dark table.standard tr td.subr,
+html.dark table.standard tr th.subr,
+html.dark table.standard tr:nth-child(even) td.sub,
+html.dark table.standard tr:nth-child(even) th.sub,
+html.dark table.standard tr td.sub,
+html.dark table.standard tr th.sub {
+  background: #1a2540;
+}
+
+/* Mobile table responsive labels */
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
+  html.dark td:before {
+    background-color: #2a3050;
+    border-bottom-color: #3a3a5a;
+  }
+  html.dark td {
+    border-bottom-color: #2a3050;
+  }
+}
+
+/* dl.qandaentry */
+html.dark dl.qandaentry {
+  border-color: #3a3a5a;
+}
+
+/* Forms & inputs */
+html.dark input[type="text"],
+html.dark input[type="email"],
+html.dark input[type="password"],
+html.dark input[type="search"],
+html.dark textarea,
+html.dark select {
+  background-color: #111830;
+  color: #e0e0e0;
+  border-color: #3a3a5a;
+}
+
+/* Footer */
+html.dark body > footer {
+  color: var(--background-text-color);
+}
+
+/* Content header changelog link */
+html.dark .content-header .changelog {
+  color: #6ea8fe;
+}
+
+/* hr */
+html.dark hr {
+  border-top-color: #3a3a5a;
+}
+/* }}} */