Feat : Added dark theme as per system settings [#1502]

src/moin/static/css/common.css

@@ -739,3 +739,106 @@ table.calendar { table-layout: fixed; }
 @media print {
     .moin-no-print { display: none; }
 }
+
+/* Dark Mode Enhancements */
+@media (prefers-color-scheme: dark) {
+    /* Reduce brightness of images to be easier on the eyes at night */
+    img:not([class*="logo"]) {
+        opacity: 0.85;
+        transition: opacity 0.3s ease;
+    }
+
+    img:not([class*="logo"]):hover {
+        opacity: 1;
+    }
+
+    /* Adjust form inputs for better visibility in dark mode */
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    input[type="search"],
+    textarea,
+    select {
+        background-color: #2A2A2A;
+        color: #E8E6E3;
+        border-color: #4A6B8A;
+    }
+
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="email"]:focus,
+    input[type="search"]:focus,
+    textarea:focus,
+    select:focus {
+        background-color: #303030;
+        border-color: #6495ED;
+        outline: 1px solid #6495ED;
+    }
+
+    /* Better button contrast in dark mode */
+    button,
+    input[type="submit"],
+    input[type="button"],
+    input[type="reset"] {
+        background-color: #3A5A7A;
+        color: #E8E6E3;
+        border-color: #5A7FA0;
+    }
+
+    button:hover,
+    input[type="submit"]:hover,
+    input[type="button"]:hover,
+    input[type="reset"]:hover {
+        background-color: #4A6A8A;
+        border-color: #80A0C0;
+    }
+
+    /* Code blocks with better contrast */
+    pre,
+    code {
+        background-color: #252830;
+        color: #E8E6E3;
+        border-color: #4A5A6A;
+    }
+
+    /* Tables in dark mode */
+    table {
+        border-color: #4A6B8A;
+    }
+
+    th,
+    td {
+        border-color: #4A6B8A;
+    }
+
+    /* Horizontal rules */
+    hr {
+        border-color: #4A6B8A;
+        opacity: 0.3;
+    }
+
+    /* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #1E1E1E;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #4A4A4A;
+        border-radius: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #5A5A5A;
+    }
+
+    /* Firefox scrollbar styling */
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: #4A4A4A #1E1E1E;
+    }
+}

src/moin/static/css/variables.css

@@ -93,3 +93,88 @@
     --bg-cal-invalidday: #FCFCFC; /* invalid days background */
 
 }
+
+/* Dark Mode - Automatic based on system/browser preference */
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* colors used for text and borders */
+        --primary: #E8E6E3;  /* primary text color */
+        --inverse: #1A1A1A;  /* inverse text color */
+        --disabled: #8C8C8C;  /* text color for disabled, missing, ACL default rules */
+        --muted: #B8B8B8;  /* subdued text, meta data search hits, default, footer info, default ACL rules */
+        --error: #FF6B6B;  /* syntax error messages generated by converters */
+        --suggestions: #FFB84D;  /* search suggestions */
+        --alert: #FF4444;  /* alert messages including flash, load draft */
+        --hilite: #6495ED;  /* mouseover contenttype, user setting change* */
+        --comment: #9E9E9E;  /* text color of visible comments */
+        --shadow-color: #000000;
+
+        --link: #6495ED;  /* links, link separators, bookmark links */
+        --link-visited: #8A7FFF;  /* visited links */
+        --link-hover: #80B3FF;  /* mouseover links */
+        --link-active: #4A7FFF;  /* mousedown over links */
+        --overlay: #6495ED;  /* border and text linking to transcluded item */
+
+        --border: #4A6B8A;  /* border color used on tables, heading underline, warnings, errors, horizontal rule background, TOC, user settings, history */
+        --border-button: #5A7FA0;  /* button borders */
+        --border-button-hover: #80A0C0;  /* highlight mouseover action on buttons */
+        --border-disabled: #5A5A5A;  /* nonexistent img and object */
+        --border-popup: #5A7FA0;  /* global index popup */
+        --border-code: #4A5A6A;  /* border color for user defined block with class of code, solid, dashed, dotted */
+        --border-footnotes: #606060;  /* border color for start of footnotes */
+        --border-style: 1px solid #4A6B8A;
+
+        /* background colors */
+        --bg-primary: #1E1E1E;  /* main background color */
+        --bg-inverse: #4169E1;  /* selected initial within global index */
+        --bg-popup-header: #2A3F5F;  /* global index popup header */
+        --bg-selected: #2A3544;  /* selected tab or mouseover action on user settings and global index */
+        --bg-close: #CC0000;  /* close button on global index popup */
+        --bg-tabs: #252830;  /* unselected user settings tabs */
+
+        --bg-zebra: #2A2A2A;  /* zebra tables, revision navigation on show, highlight, and meta views */
+        --bg-heading: #2A4A6A;  /* table headings and footers, captions, history and ACL report headings */
+
+        --jfu-progress: #2A4A6A;  /* jfu progress bar */
+        --jfu-failed: #4A2A2A;  /* jfu progress bar for failed upload*/
+
+        --bg-trans-hover: #2A3A4A;  /* mouseover effect on transclusion corners */
+
+        --bg-disabled: #3A3A3A;  /* disabled text, preformated text comment */
+        --bg-code: #252830;  /* pre and code blocks, default ACLs */
+
+        --bg-error: #2A2A3A;  /* syntax error messages generated by converters */
+        --bg-message: #3A2A2A;  /* flash and load draft messages */
+        --bg-comment: #3A3A1A;  /* user defined comments, hidden/shown by user settings or action {{{#!wiki solid comment... */
+        --bg-hilite: #3A3A1A;  /* searched text hits generated by highlight converter */
+
+        --bg-button: #3A5A7A;  /* button background */
+        --bg-button-active: #2A4A6A;  /* active button background (mouse left click) */
+
+        --bg-diff: #3A3A3A;  /* diff line number */
+        --bg-diff-added: #1A3A1A;  /* diff highlight block containing added text */
+        --bg-diff-added-text: #2A5A2A;  /* diff highlight added text within a changed block of text */
+        --bg-diff-removed: #3A3A1A;  /* diff highlight block containing removed text */
+        --bg-diff-removed-text: #4A4A2A;  /* diff highlight removed text within a changed block of text */
+        --bg-diff-hilite: #3A3A1A;  /* javascript highlight changed block of text after click on diff view line number */
+
+        /* red, green, blue, yellow, gray, and orange are documented for use by editors */
+        --bg-user-red: #4A2A2A;  /* user defined background color {{{#!wiki red... */
+        --bg-user-green: #2A4A2A;  /* user defined background color {{{#!wiki green... */
+        --bg-user-blue: #2A2A4A;  /* user defined background color {{{#!wiki blue... */
+        --bg-user-yellow: #4A4A2A;  /* user defined background color {{{#!wiki yellow... */
+        --bg-user-orange: #4A3A2A;  /* user defined background color {{{#!wiki orange... */
+        --bg-user-grey: #2A2A2A;  /* user defined background color {{{#!wiki grey... */
+        --bg-user-gray: #2A2A2A;  /* user defined background color {{{#!wiki gray... */
+
+        /* MonthCalendar macro colors */
+        --cal-text: #D0D0D0;  /* calendar link text color */
+        --border-cal: #3A3A3A;  /* calendar border style and color */
+        --bg-cal-header: #2A2A4A;  /* header background */
+        --bg-cal-emptyday: #2A2A2A; /* empty days background */
+        --bg-cal-usedday: #4A3A2A; /* used day background */
+        --bg-cal-weekend: #3A2A2A; /* weekend background */
+        --bg-cal-today: #2A3A2A; /* todays background */
+        --bg-cal-invalidday: #222222; /* invalid days background */
+    }
+}

src/moin/themes/topside/static/css/theme.css

@@ -192,3 +192,96 @@ ul.moin-breadcrumb li ul.moin-alias li { display: block; padding: 2px 10px; }
     div.moin-table-of-contents { box-shadow: none }
     a[href]:after { content: none; }  /* Firefox prints urls after anchor text by default */
 }
+
+/* Dark Mode Theme Support */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1E1E1E;
+        color: #E8E6E3;
+    }
+
+    #moin-header {
+        background-image: url("../../../static/img/dark-clouds.jpg"), linear-gradient(to bottom, #2A2A2A, #1E1E1E);
+        background-color: #2A2A2A;
+        border-bottom: 1px solid #3A3A3A;
+    }
+
+    #moin-footer {
+        background-image: url("../../../static/img/dark-clouds.jpg"), linear-gradient(to top, #2A2A2A, #1E1E1E);
+        background-color: #2A2A2A;
+        background-position-y: bottom;
+        color: #B8B8B8;
+    }
+
+    .moin-sitename {
+        color: #E8E6E3;
+    }
+
+    a {
+        color: #6495ED;
+    }
+
+    a:hover {
+        color: #80B3FF;
+    }
+
+    #moin-searchform,
+    #moin-long-searchform > p > input {
+        background-color: #2A2A2A;
+        border-color: #4A6B8A;
+        color: #E8E6E3;
+    }
+
+    .moin-search-query {
+        background-color: #2A2A2A;
+        color: #E8E6E3;
+    }
+
+    #moin-search-submit {
+        filter: invert(1) hue-rotate(180deg);
+    }
+
+    #popup {
+        background-color: #2A2A2A;
+        border-color: #4A6B8A;
+    }
+
+    .popup-header {
+        background-color: #2A4A6A;
+        color: #E8E6E3;
+    }
+
+    ul.moin-breadcrumb li ul.moin-alias {
+        background-color: #2A3544;
+        border-color: #5A7FA0;
+    }
+
+    /* Sidebar styling for dark mode */
+    @media (min-width: 1025px) {
+        #moin-sidebar {
+            background-color: #252525;
+            border-right: 1px solid #3A3A3A;
+        }
+    }
+
+    /* Better contrast for navigation items */
+    #moin-username,
+    #moin-navibar,
+    .moin-breadcrumb,
+    .moin-custom-panel,
+    .moin-itemviews {
+        color: #E8E6E3;
+    }
+
+    #moin-username li a,
+    #moin-navibar li a,
+    .moin-breadcrumb li a {
+        color: #6495ED;
+    }
+
+    #moin-username li a:hover,
+    #moin-navibar li a:hover,
+    .moin-breadcrumb li a:hover {
+        color: #80B3FF;
+    }
+}