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.
/* Change the background color of the entire page */
body {
background-color: #111111; /* Dark background color */
color: #AFACA8; /* Light font color for all text */
}
/* Change the main page title */
.firstHeading {
background-color: #111111; /* Background color (matches the body) */
color: #AFACA8; /* Text color */
padding: 10px; /* Optional: Add some padding */
}
/* Change the color and background of all headings (H1-H6) */
h1, h2, h3, h4, h5, h6 {
color: #AFACA8; /* Text color */
background-color: #111111; /* Background color */
padding: 5px; /* Optional: Add some padding */
}
/* Change the color of section headlines */
.mw-headline {
color: #AFACA8; /* Text color */
background-color: #111111; /* Background color */
padding: 5px; /* Optional: Add some padding */
}
/* Change link colors */
a {
color: #5C6969; /* Link color for empty links */
}
/* Change the color of visited links */
a:visited {
color: #89C5B7; /* Color for visited links */
}
/* Change link hover color */
a:hover {
color: #AFACA8; /* Light color on hover for visibility */
}
/* Change background color of the content area */
.mw-body {
background-color: #111111; /* Slightly different background for the content */
}
/* Change sidebar background color and text */
#mw-panel, #mw-portlets {
background-color: #111111; /* Background color */
color: #AFACA8; /* Text color */
}
/* Change the Tools section */
#mw-control-portal, #mw-tools {
background-color: #111111; /* Background color */
color: #AFACA8; /* Text color */
}
/* Change the appearance of the edit interface */
#wpTextbox1 {
background-color: #222222; /* Dark background for the editing text area */
color: #AFACA8; /* Text color for the editing area */
}
/* Change the button colors in the edit toolbar */
#mw-editform .mw-toolbar {
background-color: #111111; /* Background color for the toolbar */
color: #AFACA8; /* Text color for the toolbar */
}
/* Change the color of buttons */
button, input[type="submit"] {
background-color: #5C6969; /* Background color for buttons */
color: #AFACA8; /* Text color for buttons */
}
/* Change button hover color */
button:hover, input[type="submit"]:hover {
background-color: #89C5B7; /* Lighter background color on hover */
}
/* Change the background color of the editing summary box */
#wpSummary {
background-color: #222222; /* Dark background for the summary box */
color: #AFACA8; /* Text color for the summary box */
}
/* Change the sidebar portlet heading color */
.portlet-header {
background-color: #222222; /* Dark background for portlet headers */
color: #AFACA8; /* Text color for portlet headers */
}
/* Change the heading for the sidebar */
#p-personal, #p-namespaces, #p-views {
background-color: #111111; /* Background color */
color: #AFACA8; /* Text color */
}
/* Change the site title and icon area */
#siteSub, #mw-head, #mw-logo {
background-color: #111111; /* Dark background for site title and logo */
color: #AFACA8; /* Light text color */
}
/* Change the main page logo */
#mw-logo img {
max-height: 40px; /* Optional: Adjust the height of the logo */
}
/* Change the vector header background */
.vector-header {
background-color: #111111; /* Dark background for the header */
color: #AFACA8; /* Light text color */
}
/* Style the search bar */
#search {
background-color: #222222; /* Dark background for the search bar */
color: #AFACA8; /* Text color */
}
/* Style the search input field */
#searchInput {
background-color: #222222; /* Dark background for the input field */
color: #AFACA8; /* Text color for input field */
}
/* Style the search button */
#searchButton {
background-color: #5C6969; /* Button background color */
color: #AFACA8; /* Button text color */
}
/* Change the hover color for the search button */
#searchButton:hover {
background-color: #89C5B7; /* Button hover background color */
}
/* Change the background color of the 'what links here' section */
#mw-whatlinkshere {
background-color: #111111; /* Background color */
color: #AFACA8; /* Text color */
}
/* Change the appearance of all notification messages */
.mw-notice {
background-color: #222222; /* Dark background for notifications */
color: #AFACA8; /* Light text color */
}
/* Change the footer background */
#footer {
background-color: #111111; /* Dark background for footer */
color: #AFACA8; /* Light text color */
}
/* Style the right tools section */
#mw-tb {
background-color: #111111; /* Background color for the tools section */
color: #AFACA8; /* Text color for the tools section */
}
/* Change the background color of the MediaWiki logo section */
#mw-head {
background-color: #111111; /* Dark background for the header area */
}
/* Change the sidebar background for the main menu and other links */
#mw-panel {
background-color: #111111; /* Ensure sidebar background is dark */
color: #AFACA8; /* Ensure sidebar text is light */
}