Skip to content

Instantly share code, notes, and snippets.

@naclsn
Last active April 30, 2022 15:20
Show Gist options
  • Save naclsn/ab022b6d63d9ebb1deecf2c63c6197e1 to your computer and use it in GitHub Desktop.
Save naclsn/ab022b6d63d9ebb1deecf2c63c6197e1 to your computer and use it in GitHub Desktop.
Quick and dirty custom CSS / user style for Wikipedia's "Vector" skin (tested on en.wikipedia.org and fr.wikipedia.org).
.mw-page-container {
background-color: #1e1e1e;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
#mw-panel {
border-right: 1px solid #333;
}
#mw-page-base {
background: #151515;
}
.mw-body {
border-color: #54595d;
border-top: 1px solid #333;
color: #d4d4d4;
background-color: #1e1e1e;
}
.mw-footer li {
color: #93999f;
}
.mwe-popups {
background-color: #1e1e1e !important;
border-radius: 0px;
}
.mwe-popups .mwe-popups-container, .mwe-popups .mwe-popups-extract {
background-color: #252526 !important;
color: #d4d4d4;
}
.mwe-popups .mwe-popups-extract[dir='ltr']:after, .mwe-popups .mwe-popups-extract[dir='rtl']:after {
left: 0;
background-image: unset;
}
.mwe-popups .mwe-popups-settings-icon:hover {
background-color: #333;
}
.mwe-popups .mwe-popups-settings-icon:active {
background-color: #1e1e1e;
}
.rt-tooltip, .rt-tooltipTail::after, .rt-tooltipTail:after {
background-color: #252526;
border-color: #333;
color: #d4d4d4;
}
.rt-tooltipTail {
background: linear-gradient(to top right,#333 50%,rgba(0,0,0,0) 50%) !important;
}
.mw-sidebar, .sidebar, .toc, .toccolours, .sidebar-toc, .thumb, .thumbinner, .mp-bordered, table.fmbox, .bandeau-container, .catlinks {
background: #252526 !important;
border: 1px solid #333 !important;
}
.sidebar-toc:after {
background: revert;
}
.mw-prefs-buttons {
background-color: #1e1e1e !important;
border-color: #333 !important;
}
.mw-ui-button.mw-ui-quiet, .mw-ui-button.mw-ui-quiet.mw-ui-progressive, .mw-ui-button.mw-ui-quiet.mw-ui-destructive {
color: #54595d;
}
.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif { /* @thx https://www.magicpattern.design/tools/css-backgrounds */
background-color: #888;
background-image: repeating-linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%, #777), repeating-linear-gradient(45deg, #777 25%, #888 25%, #888 75%, #777 75%, #777);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
.mw-mmv-post-image, .mw-message-box {
background-color: #333;
border-color: #54595d;
color: #ccc;
}
.mw-mmv-image-metadata {
background-color: #1e1e1e
}
.oo-ui-panelLayout-framed {
border-color: #333 !important;
}
.oo-ui-tabSelectWidget-framed {
background-color: #2d2d2d;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: #54595d;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: #54595d;
}
.oo-ui-tabOptionWidget > .oo-ui-labelElement-label {
color: #888;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle, .oo-ui-menuSelectWidget {
background-color: #54595d;
color: #000;
}
.thumbimage {
background-color: #888;
border: 1px solid #888;
}
.infobox, .infobox_v2, .wikitable, .metadata, .sistersitebox, .autres-projets {
background-color: #252526 !important;
border: 1px solid #333 !important;
color: #93999f;
}
.infobox-header, .wikitable > tr > th, .wikitable > * > tr > th {
background-color: #37373d !important;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
border: 1px solid #54595d;
}
body {
color: #d4d4d4;
background-color: #151515;
}
a, .sidebar-toc .sidebar-toc-list-item a {
color: #36c;
}
a:visited, .sidebar-toc .sidebar-toc-list-item a {
color: #2a4b8d;
}
h1, h2 {
border-bottom: 1px solid #2d2d2d;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
hr {
border-bottom: 1px solid #333;
}
.lang-list-border {
background-color: #93999f;
}
.lang-list-container {
background-color: #333;
}
.lang-list-button, .lang-list-active .lang-list-button, .lang-list-button:hover {
outline: #151515;
background-color: #ccc;
}
.lang-list-content, .bookshelf .text {
background-color: #333;
}
.uls-menu {
border-color: #333 !important;
}
.uls-menu div {
background-color: #252526 !important;
border-color: #333 !important;
border-radius: unset !important;
}
.uls-menu input {
background-color: #252526;
color: #d4d4d4;
}
.uls-language-block > ul > li:hover {
background-color: #1e1e1e !important;
}
.bookshelf {
border-top: 1px solid #3c3c3c;
}
.other-project-link:hover {
background-color: #37373d;
}
.app-badges .footer-sidebar-content {
background-color: #1e1e1e;
}
.cbnnr-main {
background-color: #333;
}
.cbnnr-message {
color: #93999f;
}
.vector-menu-tabs li {
background: #2d2d2d;
}
.vector-menu-tabs .selected {
background-color: #333;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
background-image: linear-gradient(to bottom,#333 0,#1e1e1e 100%);
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
color: #93999f;
}
.vector-menu-portal h3 {
color: #93999f !important;
background-image: linear-gradient(to right,#252526 0,#858585 33%,#858585 66%,#252526 100%);
}
#vector-sticky-header {
background-color: #252526;
border-color: #333;
}
#searchInput, .wvui-typeahead-search, .wvui-input__input, .wvui-button--framed {
background-color: #3c3c3c !important;
border: 1px solid #333 !important;
color: #c4c4c4 !important;
}
.wvui-typeahead-search__suggestions, .suggestions-dropdown {
background-color: #252526;
border: 1px solid #333;
}
.wvui-typeahead-search__suggestions__footer, .suggestion-link {
border: 1px solid #333;
color: #ccc;
}
.wvui-typeahead-suggestion__title, .suggestion-title, .suggestion-link.active .suggestion-title {
color: #ccc;
}
.wvui-typeahead-suggestion__description, .suggestion-description {
color: #93999f !important;
}
.wvui-typeahead-suggestion--active, .wvui-typeahead-search__suggestions__footer--active, .suggestion-link.active {
background-color: #094771;
color: #fff;
}
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a {
color: #93999f
}
.navbox {
background-color: #3c3c3c !important;
border-color: #54595d !important;
}
.navbox-even {
background-color: #333 !important;
}
.navbox-title {
background-color: #2a2a51 !important;
}
.navbox-group {
background-color: #353564 !important;
}
.navbox-list, .navbox-group {
border-color: #3c3c3c !important;
}
img.mwe-math-fallback-image-inline {
filter: invert(.84);
}
pre, code, .mw-code {
background-color: #272822; color: #f8f8f2;
border: 1px solid #37373d;
}
/* Monokai (@thx https://help.fandom.com/wiki/Extension:SyntaxHighlight/Styling) */
.mw-highlight .hll { background-color: #49483e }
.mw-highlight { background: #272822; color: #f8f8f2 }
.mw-highlight .c { color: #75715e }
.mw-highlight .err { color: #960050; background-color: #1e0010 }
.mw-highlight .k { color: #66d9ef }
.mw-highlight .l { color: #ae81ff }
.mw-highlight .n { color: #f8f8f2 }
.mw-highlight .o { color: #f92672 }
.mw-highlight .p { color: #f8f8f2 }
.mw-highlight .ch { color: #75715e }
.mw-highlight .cm { color: #75715e }
.mw-highlight .cp { color: #75715e }
.mw-highlight .cpf { color: #75715e }
.mw-highlight .c1 { color: #75715e }
.mw-highlight .cs { color: #75715e }
.mw-highlight .gd { color: #f92672 }
.mw-highlight .ge { font-style: italic }
.mw-highlight .gi { color: #a6e22e }
.mw-highlight .gs { font-weight: bold }
.mw-highlight .gu { color: #75715e }
.mw-highlight .kc { color: #66d9ef }
.mw-highlight .kd { color: #66d9ef }
.mw-highlight .kn { color: #f92672 }
.mw-highlight .kp { color: #66d9ef }
.mw-highlight .kr { color: #66d9ef }
.mw-highlight .kt { color: #66d9ef }
.mw-highlight .ld { color: #e6db74 }
.mw-highlight .m { color: #ae81ff }
.mw-highlight .s { color: #e6db74 }
.mw-highlight .na { color: #a6e22e }
.mw-highlight .nb { color: #f8f8f2 }
.mw-highlight .nc { color: #a6e22e }
.mw-highlight .no { color: #66d9ef }
.mw-highlight .nd { color: #a6e22e }
.mw-highlight .ni { color: #f8f8f2 }
.mw-highlight .ne { color: #a6e22e }
.mw-highlight .nf { color: #a6e22e }
.mw-highlight .nl { color: #f8f8f2 }
.mw-highlight .nn { color: #f8f8f2 }
.mw-highlight .nx { color: #a6e22e }
.mw-highlight .py { color: #f8f8f2 }
.mw-highlight .nt { color: #f92672 }
.mw-highlight .nv { color: #f8f8f2 }
.mw-highlight .ow { color: #f92672 }
.mw-highlight .w { color: #f8f8f2 }
.mw-highlight .mb { color: #ae81ff }
.mw-highlight .mf { color: #ae81ff }
.mw-highlight .mh { color: #ae81ff }
.mw-highlight .mi { color: #ae81ff }
.mw-highlight .mo { color: #ae81ff }
.mw-highlight .sa { color: #e6db74 }
.mw-highlight .sb { color: #e6db74 }
.mw-highlight .sc { color: #e6db74 }
.mw-highlight .dl { color: #e6db74 }
.mw-highlight .sd { color: #e6db74 }
.mw-highlight .s2 { color: #e6db74 }
.mw-highlight .se { color: #ae81ff }
.mw-highlight .sh { color: #e6db74 }
.mw-highlight .si { color: #e6db74 }
.mw-highlight .sx { color: #e6db74 }
.mw-highlight .sr { color: #e6db74 }
.mw-highlight .s1 { color: #e6db74 }
.mw-highlight .ss { color: #e6db74 }
.mw-highlight .bp { color: #f8f8f2 }
.mw-highlight .fm { color: #a6e22e }
.mw-highlight .vc { color: #f8f8f2 }
.mw-highlight .vg { color: #f8f8f2 }
.mw-highlight .vi { color: #f8f8f2 }
.mw-highlight .vm { color: #f8f8f2 }
.mw-highlight .il { color: #ae81ff }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment