NetHackWiki:DarkMode
Jump to navigation
Jump to search
If you prefer a dark mode when reading this wiki, you can use the following custom CSS in your user profile.
To apply the custom CSS,
- Create an account or sign in
- Go to Special:Preferences
- Click "Appearance"
- Click "Custom CSS"
- Edit the page, paste the following snippet in, and save.
- Follow the instructions on that page to hard-reload and clear your browser's cache.
@import "https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";
/* ============================================================
* NetHackWiki dark-mode template fixes — v1.0
* Append to the existing MediaWiki:Common.css.
*
* Why: Vector 2022 night mode only restyles its own chrome
* (header/sidebar/page bg). It does not override hardcoded
* background colors in NetHackWiki templates (.upcoming,
* .nhencyclopedia, etc) or in core wikitable/prettytable rules.
* Result: in dark mode those become light-bg + light-text,
* unreadable. These rules add dark-mode variants for each
* problem class.
*
* Pattern: `:where(html.skin-theme-clientpref-night)` matches
* when the user has explicitly chosen Night mode. The media
* query handles the case where the user picked "Auto" and
* their OS prefers dark. `:where()` keeps specificity at 0,
* so editors can still override per-instance.
*
* PUBLIC DOMAIN - Generated with Claude Code
* ============================================================ */
/* ---------- Always-night (user chose Night manually) ---------- */
:where(html.skin-theme-clientpref-night) table.wikitable,
:where(html.skin-theme-clientpref-night) table.prettytable {
background: #1f1f1f;
border-color: #444;
color: #eaecf0;
}
:where(html.skin-theme-clientpref-night) table.wikitable th,
:where(html.skin-theme-clientpref-night) table.prettytable th {
background: #161616;
color: #f0f0f0;
border-color: #444;
}
:where(html.skin-theme-clientpref-night) table.wikitable td,
:where(html.skin-theme-clientpref-night) table.prettytable td {
border-color: #444;
}
:where(html.skin-theme-clientpref-night) .upcoming {
background: #6b3a1c;
color: #f6e7d8;
border-color: #8a4f29;
}
:where(html.skin-theme-clientpref-night) .upcoming a,
:where(html.skin-theme-clientpref-night) .upcoming a:visited {
color: #ffd699;
}
:where(html.skin-theme-clientpref-night) .nhencyclopedia {
background: #50503a;
color: #f0f0e0;
border-color: #6e6e4e;
}
:where(html.skin-theme-clientpref-night) .nhguidebook {
background: #3a2e2e;
color: #f0e8e8;
border-color: #5a4444;
}
:where(html.skin-theme-clientpref-night) .previewnote-inner-msg {
background: #4a2a2a;
color: #f0e0e0;
border-color: #8a3030;
}
:where(html.skin-theme-clientpref-night) #mw-anon-edit-warning,
:where(html.skin-theme-clientpref-night) #mw-read-only-warning {
background: #4a3a00;
color: #f6f0d0;
border-color: #8a3030;
}
:where(html.skin-theme-clientpref-night) .mw-interwikitable-row:hover {
background: #2a2a2a;
}
:where(html.skin-theme-clientpref-night) .forumlist tr:nth-child(even) td {
background: #1c1c1c;
}
/* Spoiler-credit / license boxes (e.g. .license_dod for "based on a spoiler by
* Dylan O'Donnell"). Matches `.license_*` class pattern. */
:where(html.skin-theme-clientpref-night) [class^="license_"],
:where(html.skin-theme-clientpref-night) [class*=" license_"] {
background: #2e2e1f;
color: #f0f0d8;
border-color: #5a5a3a;
}
/* Sister-project sidebox (Template:Wikipedia and similar link-out boxes) */
:where(html.skin-theme-clientpref-night) .sidebox,
:where(html.skin-theme-clientpref-night) .noprint.sidebox {
background: #1f1f1f;
color: #eaecf0;
border-color: #444;
}
/* Yes/No/Partial color-coded cells (level info tables on Sokoban, Oracle-level, etc.) */
:where(html.skin-theme-clientpref-night) .table-yes {
background: #224422;
color: #d4f0d4;
}
:where(html.skin-theme-clientpref-night) .table-no {
background: #4a2424;
color: #f0d4d4;
}
:where(html.skin-theme-clientpref-night) .table-partial {
background: #4a4422;
color: #f0ecd4;
}
/* .kbdsym — keyboard-key glyph used in strategy/help articles */
:where(html.skin-theme-clientpref-night) .kbdsym {
background: #2a2a2a !important;
color: #eaecf0 !important;
border-color: #555 #333 #333 #555 !important;
}
/* Spoiler/credit/reference yellow boxes (some templates use light-yellow bg).
* Catch-all selector for any element with a hardcoded #FFFFE0/#FFFFEE-ish bg
* via the inline style attribute pattern. */
:where(html.skin-theme-clientpref-night) [style*="background:#FFFFE0" i],
:where(html.skin-theme-clientpref-night) [style*="background-color:#FFFFE0" i],
:where(html.skin-theme-clientpref-night) [style*="background:#FFFFEE" i],
:where(html.skin-theme-clientpref-night) [style*="background-color:#FFFFEE" i] {
background: #2e2e1f !important;
color: #f0f0d8;
}
/* ---------- Auto-OS (user chose Auto + OS is dark) ----------
* Repeats the above using :where(html.skin-theme-clientpref-os).
* Vector 2022 adds clientpref-os when the user picks "Automatic". */
@media (prefers-color-scheme: dark) {
:where(html.skin-theme-clientpref-os) table.wikitable,
:where(html.skin-theme-clientpref-os) table.prettytable {
background: #1f1f1f;
border-color: #444;
color: #eaecf0;
}
:where(html.skin-theme-clientpref-os) table.wikitable th,
:where(html.skin-theme-clientpref-os) table.prettytable th {
background: #161616;
color: #f0f0f0;
border-color: #444;
}
:where(html.skin-theme-clientpref-os) table.wikitable td,
:where(html.skin-theme-clientpref-os) table.prettytable td {
border-color: #444;
}
:where(html.skin-theme-clientpref-os) .upcoming {
background: #6b3a1c;
color: #f6e7d8;
border-color: #8a4f29;
}
:where(html.skin-theme-clientpref-os) .upcoming a,
:where(html.skin-theme-clientpref-os) .upcoming a:visited {
color: #ffd699;
}
:where(html.skin-theme-clientpref-os) .nhencyclopedia {
background: #50503a;
color: #f0f0e0;
border-color: #6e6e4e;
}
:where(html.skin-theme-clientpref-os) .nhguidebook {
background: #3a2e2e;
color: #f0e8e8;
border-color: #5a4444;
}
:where(html.skin-theme-clientpref-os) .previewnote-inner-msg {
background: #4a2a2a;
color: #f0e0e0;
border-color: #8a3030;
}
:where(html.skin-theme-clientpref-os) #mw-anon-edit-warning,
:where(html.skin-theme-clientpref-os) #mw-read-only-warning {
background: #4a3a00;
color: #f6f0d0;
border-color: #8a3030;
}
:where(html.skin-theme-clientpref-os) .mw-interwikitable-row:hover {
background: #2a2a2a;
}
:where(html.skin-theme-clientpref-os) .forumlist tr:nth-child(even) td {
background: #1c1c1c;
}
:where(html.skin-theme-clientpref-os) [class^="license_"],
:where(html.skin-theme-clientpref-os) [class*=" license_"] {
background: #2e2e1f;
color: #f0f0d8;
border-color: #5a5a3a;
}
:where(html.skin-theme-clientpref-os) .sidebox,
:where(html.skin-theme-clientpref-os) .noprint.sidebox {
background: #1f1f1f;
color: #eaecf0;
border-color: #444;
}
:where(html.skin-theme-clientpref-os) .table-yes {
background: #224422;
color: #d4f0d4;
}
:where(html.skin-theme-clientpref-os) .table-no {
background: #4a2424;
color: #f0d4d4;
}
:where(html.skin-theme-clientpref-os) .table-partial {
background: #4a4422;
color: #f0ecd4;
}
:where(html.skin-theme-clientpref-os) .kbdsym {
background: #2a2a2a !important;
color: #eaecf0 !important;
border-color: #555 #333 #333 #555 !important;
}
:where(html.skin-theme-clientpref-os) [style*="background:#FFFFE0" i],
:where(html.skin-theme-clientpref-os) [style*="background-color:#FFFFE0" i],
:where(html.skin-theme-clientpref-os) [style*="background:#FFFFEE" i],
:where(html.skin-theme-clientpref-os) [style*="background-color:#FFFFEE" i] {
background: #2e2e1f !important;
color: #f0f0d8;
}
}
/* ============================================================
* End NetHackWiki dark-mode template fixes
* ============================================================ */
/* ============================================================
* NetHackWiki mobile responsive overlay for Vector 2022 — v1.0
* Paste into MediaWiki:Vector.css (replaces existing content,
* or appends if you've customized that page).
*
* Affects only the Vector skin. Readers on Cologne Blue,
* DarkVector, MonoBook, or Modern see no change here.
*
* Above 1080px, this file does nothing — desktop layout is
* untouched. Below 1080px, mobile-friendly improvements kick
* in progressively.
* ============================================================ */
/* ---------- 720px – 1080px : tablet & narrow desktop ---------- */
@media (max-width: 1080px) {
/* Tighten content padding so we get more text per line */
.mw-page-container-inner {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
/* ---------- ≤ 720px : phablet and below ---------- */
@media (max-width: 720px) {
/* 1. Reduce heading sizes — Vector 2022 H1 is ~1.8em which
* eats 60–80px of a 360px viewport for the page title alone. */
.mw-body h1.firstHeading,
.mw-body-content h1 {
font-size: 1.4em;
line-height: 1.3;
}
.mw-body-content h2 {
font-size: 1.25em;
line-height: 1.3;
}
.mw-body-content h3 {
font-size: 1.1em;
}
/* 2. Infobox stacking — right-floated wikitables/prettytables go
* full-width above the body text. NetHackWiki uses prettytable
* for monster/item infoboxes. Also forces width:100% for tables
* that have absurdly narrow inline widths (e.g. Oracle (level)
* has style="width:50px" which clips its dungeon-map content). */
.mw-parser-output > table.wikitable,
.mw-parser-output > table.prettytable,
.mw-parser-output table.wikitable[style*="float"],
.mw-parser-output table.prettytable[style*="float"],
.mw-parser-output table.wikitable[style*="width:"],
.mw-parser-output table.prettytable[style*="width:"] {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 1em 0 !important;
}
/* 3. Wide-table scrollers — pure CSS, table itself becomes
* horizontally scrollable. Tradeoff: display:block decouples
* column alignment across separate tables, but each table
* scrolls cleanly within the viewport. */
table.wikitable,
table.prettytable {
display: block;
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* 4. Code blocks — horizontal scroll, no wrap, tighter font.
* Used by Source: pages with SyntaxHighlight. */
.mw-highlight,
.mw-highlight pre,
pre {
overflow-x: auto;
white-space: pre;
-webkit-overflow-scrolling: touch;
font-size: 0.85em;
}
/* 5. Sidebar drawer tap targets — bump to 44px (Apple HIG /
* WCAG AAA tap target). Vector 2022 mobile drawer items are
* smaller than that by default. */
.mw-mf-page-sidebar a,
.vector-menu-content li a,
.mw-portlet-body li a,
.vector-main-menu .vector-menu-content li a {
padding: 12px 16px;
min-height: 44px;
box-sizing: border-box;
display: flex;
align-items: center;
}
/* 6. Thumbnails scale to viewport */
.thumb,
.thumbinner,
figure.mw-default-size {
max-width: 100% !important;
}
.thumbinner img,
figure.mw-default-size img {
max-width: 100%;
height: auto;
}
/* 7. Tighter line-height on body for mobile reading */
.mw-body-content {
line-height: 1.55;
}
/* 8. Trim the gap between site header and article header.
* Vector 2022 reserves space for the page tools sidebar
* even when collapsed; reclaim it on mobile. */
.mw-body-header,
.vector-page-titlebar {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
/* ---------- ≤ 480px : phones ---------- */
@media (max-width: 480px) {
/* Footer category list — stack vertically with breathing room */
#catlinks ul,
#mw-normal-catlinks ul {
display: flex !important;
flex-direction: column !important;
gap: 0.25em;
padding-left: 0;
}
#catlinks li,
#mw-normal-catlinks li {
border-left: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Even smaller body text for phones */
.mw-body-content {
font-size: 0.95em;
}
/* Slightly tighter heading sizes still */
.mw-body h1.firstHeading,
.mw-body-content h1 {
font-size: 1.3em;
}
}
/* ============================================================
* End NetHackWiki mobile responsive overlay
* ============================================================ */