MediaWiki:Common.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.
/* ==============================================================
MediaWiki:Common.css – Clean Dark Theme for RoatPKZ Wiki
==============================================================
*/
/* ----------------------------
1. Body & Background Colors
----------------------------- */
:root {
--body-background-color: #071022; /* main page background */
--body-main: #172136;
--body-light: #313e59;
--body-mid: #222e45;
--body-dark: #222e45;
--body-border: #596e96;
/* Sidebar / Buttons */
--sidebar: #cfc08d;
--button-background: #313e59;
--button-color: #ffffff;
--button-border: #222e45;
/* Background images */
--body-background-image: url('filepath://Roat Pkz Wiki background darkmode1.jpg');
}
/* ----------------------------
2. Text & Link Colors
----------------------------- */
:root {
--text-color: #cbd9f4;
--background-text-color: #cbd9f4;
--link-color: #8cabe6;
--background-link-color: var(--link-color);
--redlink-color: #f26d60;
--byline-color: #98a2b6;
--subtle-color: var(--byline-color);
}
/* ----------------------------
3. Source Editor / Ace Colors
----------------------------- */
:root {
--sourceeditor-input-background: var(--body-mid);
--sourceeditor-background: var(--body-light);
--sourceeditor-background-secondary: var(--body-mid);
--sourceeditor-border: var(--body-main);
--codemirror-gutter-background: var(--body-light);
}
/* Ace Editor Syntax Token Overrides */
.ace_tmlanguage .ace_keyword { color: #c586c0 !important; } /* purple */
.ace_tmlanguage .ace_string { color: #ce9178 !important; } /* orange */
.ace_tmlanguage .ace_comment { color: #6a9955 !important; font-style: italic; } /* green */
.ace_tmlanguage .ace_numeric { color: #b5cea8 !important; } /* light green */
.ace_tmlanguage .ace_identifier { color: #9cdcfe !important; } /* light blue */
.ace_tmlanguage .ace_support.ace_function { color: #dcdcaa !important; } /* yellow */
/* ----------------------------
4. Syntaxhighlight / mw-highlight Blocks
----------------------------- */
.mw-highlight {
background: none; /* keep page background */
color: var(--text-color);
}
.mw-highlight .linenos {
background-color: var(--body-mid);
color: var(--byline-color);
}
/* Pygments token classes */
.mw-highlight .k { color: #c586c0 !important; } /* keyword */
.mw-highlight .nf { color: #ffd700 !important; } /* function name */
.mw-highlight .s { color: #ce9178 !important; } /* string */
.mw-highlight .c { color: #6a9955 !important; } /* comment */
.mw-highlight .mi { color: #b5cea8 !important; } /* number */
.mw-highlight .nb { color: #4fc1ff !important; } /* builtin/constant */
/* ----------------------------
5. Buttons & UI Elements
----------------------------- */
.ace_button {
color: var(--text-color);
}
.ace_button:hover {
background-color: rgba(0,23,70,0.086);
}
.ace_button:active {
background-color: rgba(0,23,70,0.06);
}
.ace_button.checked {
border-color: #0078d7;
}
/* Search boxes */
.ace_search {
background-color: var(--body-light);
color: var(--text-color);
border-color: var(--body-mid);
}
.ace_search_field {
background-color: #222e45;
color: var(--text-color);
border-color: #444;
}
.ace_searchbtn {
border-color: #444;
background-color: #222e45;
color: var(--text-color);
}
.ace_searchbtn:hover {
background-color: #313e59;
}