MediaWiki:Timeless.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* === DARK MODE THEME (ChatGPT-like) === */

/* Dark mode wrapper */
body.dark-mode {
  background-color: #1e1f20 !important;
  color: #e6e6e6 !important;
}

/* Headings */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
  color: #ffffff !important;
}

/* Links */
body.dark-mode a {
  color: #10a37f !important;
}
body.dark-mode a:visited {
  color: #8be9c9 !important;
}
body.dark-mode a.new {
  color: #ff6b6b !important;
}

/* Header & nav */
body.dark-mode #mw-header {
  background-color: #2a2b2d !important;
  border-bottom: 1px solid #3a3b3d !important;
}
body.dark-mode #mw-site-navigation,
body.dark-mode #mw-related-navigation,
body.dark-mode #mw-personaltools {
  background-color: #252627 !important;
  border-right: 1px solid #3a3b3d !important;
}
body.dark-mode #mw-site-navigation a,
body.dark-mode #mw-related-navigation a,
body.dark-mode #mw-personaltools a {
  color: #d0d0d0 !important;
}
body.dark-mode #mw-site-navigation a:hover,
body.dark-mode #mw-related-navigation a:hover,
body.dark-mode #mw-personaltools a:hover {
  color: #ffffff !important;
  background-color: #323334 !important;
  border-radius: 6px;
}

/* Content area */
body.dark-mode #mw-content {
  background-color: #1e1f20 !important;
  border: none !important;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
body.dark-mode #contentSub, 
body.dark-mode .mw-indicators {
  color: #aaa !important;
}

/* Footer */
body.dark-mode #mw-footer {
  background-color: #2a2b2d !important;
  border-top: 1px solid #3a3b3d !important;
  color: #aaa !important;
}

/* Tables */
body.dark-mode table {
  background-color: #2a2b2d !important;
  color: #e6e6e6 !important;
  border: 1px solid #3a3b3d !important;
}
body.dark-mode th {
  background-color: #333435 !important;
  color: #ffffff !important;
}
body.dark-mode td {
  border: 1px solid #3a3b3d !important;
}

/* Forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2a2b2d !important;
  color: #ffffff !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 6px;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  outline: none;
  border-color: #10a37f !important;
  box-shadow: 0 0 4px #10a37f;
}

/* Buttons */
body.dark-mode input[type="submit"],
body.dark-mode button,
body.dark-mode .mw-ui-button {
  background-color: #10a37f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
body.dark-mode input[type="submit"]:hover,
body.dark-mode button:hover,
body.dark-mode .mw-ui-button:hover {
  background-color: #0d8c6b !important;
}

/* Diff view */
body.dark-mode td.diff-context {
  background: #252627 !important;
}
body.dark-mode td.diff-addedline {
  background: #1e332d !important;
  color: #9ef5c3 !important;
}
body.dark-mode td.diff-deletedline {
  background: #331e1e !important;
  color: #ff9a9a !important;
}
body.dark-mode td.diff-marker {
  background: #2a2b2d !important;
}

/* Code blocks */
body.dark-mode pre, 
body.dark-mode code, 
body.dark-mode .mw-code {
  background-color: #2a2b2d !important;
  color: #dcdcdc !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: monospace, monospace;
  font-size: 0.95em;
}

/* Tooltips & popups */
body.dark-mode .mw-tooltip {
  background: #2a2b2d !important;
  color: #fff !important;
  border: 1px solid #3a3b3d !important;
}

/* Categories & pagination */
body.dark-mode .catlinks, 
body.dark-mode .mw-pager-navigation-bar {
  background: #2a2b2d !important;
  border: 1px solid #3a3b3d !important;
  border-radius: 6px;
  padding: 4px;
}

/* === TOGGLE BUTTON STYLES === */
#dark-mode-toggle {
  cursor: pointer;
  background: #10a37f;
  color: white;
  border-radius: 8px;
  padding: 4px 10px;
  margin-left: 12px;
  font-size: 0.9em;
}
#dark-mode-toggle:hover {
  background: #0d8c6b;
}