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 main menu sidebar */
#mw-panel {
    background-color: #111111; /* Dark background for sidebar */
    color: #AFACA8; /* Light text color */
}

/* Change the color of the links in the main menu sidebar */
#mw-panel a {
    color: #5C6969; /* Link color for the main menu */
}

/* Change the visited link color in the main menu sidebar */
#mw-panel a:visited {
    color: #89C5B7; /* Color for visited links in the sidebar */
}

/* Change link hover color in the main menu sidebar */
#mw-panel a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}

/* Change the background color of portlet headers in the sidebar */
.portlet-header {
    background-color: #222222; /* Dark background for portlet headers */
    color: #AFACA8; /* Light text color for portlet headers */
}

/* Change the background color and text for the pinned tools navigation */
.vector-pinned-container {
    background-color: #111111; /* Dark background for pinned tools */
    color: #AFACA8; /* Light text color for pinned tools */
}

/* Change the color of the links in the pinned tools navigation */
.vector-pinned-container a {
    color: #5C6969; /* Link color for pinned tools */
}

/* Change the visited link color in the pinned tools navigation */
.vector-pinned-container a:visited {
    color: #89C5B7; /* Color for visited links in pinned tools */
}

/* Change link hover color in the pinned tools navigation */
.vector-pinned-container a:hover {
    color: #AFACA8; /* Light color on hover for visibility */
}

/* Ensure the text color is consistent for all other elements in the sidebar */
#mw-panel .mw-portlet-header,
#mw-panel .mw-portlet-body {
    background-color: #111111; /* Dark background for all portlet sections */
    color: #AFACA8; /* Light text color for all portlet sections */
}

/* Style the search bar in the sidebar */
#search {
    background-color: #222222; /* Dark background for the search bar */
    color: #AFACA8; /* Text color for the search bar */
}

/* Style the input field in the search bar */
#searchInput {
    background-color: #222222; /* Dark background for 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 */
}

/* General reset for all other elements in the sidebar with old backgrounds */
#mw-panel * {
    background-color: #111111 !important; /* Force dark background for all elements in the sidebar */
    color: #AFACA8 !important; /* Force light text color for all elements in the sidebar */
}

/* General reset for all other elements with old backgrounds in the pinned tools */
.vector-pinned-container * {
    background-color: #111111 !important; /* Force dark background for all elements in pinned tools */
    color: #AFACA8 !important; /* Force light text color for all elements in pinned tools */
}