/* ==UserStyle== @name Wikipedia Catppuccin @namespace github.com/catppuccin/userstyles/styles/wikipedia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia @version 2025.09.06 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia @description Soothing pastel theme for Wikipedia @author Catppuccin @license MIT @preprocessor less @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] @var checkbox highlight-redirect "Highlight redirect links" 0 ==/UserStyle== */ @import "https://userstyles.catppuccin.com/lib/lib.less"; @-moz-document domain("wikipedia.org"), domain("wiktionary.org"), domain("www.mediawiki.org"), domain("auth.wikimedia.org"), domain("wikiversity.org"), domain("wikisource.org"), domain("meta.wikimedia.org"), domain("wikidata.org"), domain("wikibooks.org"), domain("species.wikimedia.org"), domain("commons.wikimedia.org"), domain("wikivoyage.org"), domain("wikinews.org"), domain("wikiquote.org") { @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); :root.skin-theme-clientpref-os, .vector-feature-night-mode-enabled, .skin-invert, .notheme { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } :root.skin-theme-clientpref-night { #catppuccin(@darkFlavor); } :root.skin-theme-clientpref-day { #catppuccin(@lightFlavor); } html.skin-theme-clientpref-night, html.skin-theme-clientpref-os { /* Logo */ .skin-invert-image img, .skin-invert, .oo-ui-iconElement-icon:not( .oo-ui-image-progressive, .oo-ui-image-destructive, .oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-invert, .mw-no-invert ), .oo-ui-indicatorElement-indicator { filter: none; } } /* MediaWiki only applies the following overrides on dark and automatic appearance settings, leaving broken elements with the light appearance. */ .hatnote:not(.notheme), .dablink:not(.notheme), .rellink:not(.notheme), .infobox:not(.notheme) { color: var(--color-base) !important; background-color: var(--background-color-interactive-subtle) !important; } .infobox td:not(.notheme), .infobox th:not(.notheme), .infobox-above:not(.notheme), .infobox p:not(.notheme), .infobox > div:not(.notheme), .infobox caption:not(.notheme), .infobox--frwiki td:not(.notheme), .infobox--frwiki th:not(.notheme), .infobox--frwiki p:not(.notheme), .infobox--frwiki > div:not(.notheme), .infobox--frwiki caption:not(.notheme), .sinottico th:not(.notheme), .infobox-header:not(.notheme), .skin-nightmode-reset-color:not(.notheme), .navigation-box:not(.notheme), .metadata:not(.notheme), .quotebox:not(.notheme), .side-box:not(.notheme), .side-box div:not(.notheme), .navbox:not(.notheme), .navbox-subgroup:not(.notheme), .navbox-group:not(.notheme), .navbox-even:not(.notheme), .navbox-abovebelow:not(.notheme), .navbox-title:not(.notheme) { background: inherit !important; color: inherit !important; border-color: var(--border-color-subtle) !important; } .ns-100 .mw-parser-output :not(.notheme, a) { background: inherit !important; color: inherit !important; border-color: var(--border-color-subtle) !important; } #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); #lib.css-variables(); --color-base: @text; --color-base--hover: @text; --color-emphasized: @text; --color-subtle: @subtext0; --color-inverted: @crust; --color-inverted-fixed: @crust; --color-progressive: @accent; --color-progressive--hover: darken(@accent, 5%); --color-progressive--active: darken(@accent, 5%); --color-progressive--focus: darken(@accent, 5%); --color-destructive: @red; --color-destructive--hover: @maroon; --color-destructive--active: @maroon; --color-visited: @lavender; --color-destructive--visited: #b97876; --color-error: @red; --color-warning: @yellow; --color-success: @green; --color-notice: @text; --color-icon-error: @red; --color-icon-warning: @yellow; --color-icon-success: @green; --color-icon-notice: @subtext0; --color-content-added: @green; --color-content-removed: @maroon; --color-placeholder: @subtext0; --color-disabled: @overlay2; --box-shadow-color-base: #fff; --box-shadow-color-inverted: #000; --box-shadow-color-progressive--focus: @accent; --background-color-interactive: @surface0; --background-color-interactive-subtle: @surface0; --background-color-interactive-subtle--hover: @surface1; --background-color-disabled: @overlay2; --background-color-disabled-subtle: @surface0; --background-color-progressive: @accent; --background-color-progressive-subtle: fade(@accent, 10%); --background-color-destructive-subtle: #421211; --background-color-progressive--active: fade(@accent, 70%); --background-color-progressive--hover: fade(@accent, 70%); --background-color-progressive--focus: fade(@accent, 70%); --background-color-error: @red; --background-color-error--hover: @maroon; --background-color-error--active: @maroon; --background-color-error-subtle: fade(@red, 20%); --background-color-warning-subtle: fade(@yellow, 20%); --background-color-success-subtle: fade(@green, 20%); --background-color-notice-subtle: @surface0; --background-color-content-added: #2a4b8d; --background-color-content-removed: #a66200; --background-color-backdrop-light: rgba(0, 0, 0, 0.65); --background-color-backdrop-dark: rgba(255, 255, 255, 0.65); --background-color-base: @base; --background-color-neutral: @base; --background-color-neutral-subtle: @surface0; --background-color-inverted: @text; --background-color-input-binary--checked: @accent; --border-base: 1px solid @surface0; --border-subtle: 1px solid @surface0; --border-color-base: @surface0; --border-color-interactive: @surface2; --border-color-interactive--hover: @overlay0; --border-color-disabled: #54595d; --border-color-subtle: @surface1; --border-color-muted: @surface0; --border-color-inverted: #101418; --border-color-error: @red; --border-color-error--hover: @maroon; --border-color-warning: @yellow; --border-color-success: @green; --border-color-notice: @surface2; --border-color-content-added: @blue; --border-color-content-removed: @peach; --border-color-progressive: @accent; --border-color-progressive--active: @accent; --border-color-progressive--hover: @accent; --border-color-progressive--focus: @accent; /* Wiktionary */ --wikt-palette-indigo: @lavender; --wikt-palette-lightindigo: fade(@lavender, 40%); --wikt-palette-lighterblue: fade(@blue, 20%); --wikt-palette-dulllightblue: fade(@blue, 40%); --wikt-palette-grey: @subtext0; --wikt-palette-lightergrey: fade(@subtext0, 40%); /* Other */ .infobox { border-color: @surface2; } [style="color:white;"], [style*="color:#ffffff"] { color: @text !important; } .mw-collapsible-toggle-default { &::before, &::after { color: @subtext0; } } a { &:focus { outline-color: @accent; } } .mw-parser-output { a.external { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } /* Wikipedia Home */ #mp-topbanner { background-color: @base; border-color: @surface1; } #mp-left { background-color: fade(@green, 20%); border-color: @green; .mp-h2 { background-color: fade(@green, 40%); border-color: fade(@green, 40%); } } #mp-right { background-color: fade(@blue, 20%); border-color: @blue; .mp-h2 { background-color: fade(@blue, 40%); border-color: fade(@blue, 40%); } } #mp-lower { background-color: fade(@lavender, 20%); border-color: @lavender; .mp-h2 { background-color: fade(@lavender, 40%); border-color: fade(@lavender, 40%); } } #mp-bottom { border-color: @overlay0; .mp-h2 { background-color: fade(@accent, 40%); border-color: fade(@accent, 40%); } } .wikipedia-languages-prettybars { background-color: @surface2; } /* MediaWiki Home */ .mainpage_box { border-color: @surface2; .header_icon { filter: @text-filter; } .items { border-top-color: @surface1; } } .nmbox { background-color: @surface0; border-color: @surface2; .nmbox-header { background-color: @base; border-color: @surface1; } } /* MediaWiki Pages */ .tpl-downloadmediawiki-icon { filter: @crust-filter; } .note-info { filter: @blue-filter; color: @text; background-color: fade(@blue, 20%); } .note-warn { filter: @yellow-filter; color: @text; background-color: fade(@yellow, 20%); } } /* Math equations */ .mwe-math-element img.skin-invert { filter: @text-filter; } /* OOUI */ .oo-ui-indicator-down { filter: @text-filter !important; } .oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert::before { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } /* View source */ textarea { background-color: @mantle; color: @text; } /* View history */ .flaggedrevs-color-1 { background-color: fade(@blue, 10%); } /* Language search and settings */ .uls-search, .uls-filtersuggestion, .uls-lcd, #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, #language-settings-dialog, #languagesettings-settings-panel, .uls-language-settings-close-block { background-color: @mantle; } .uls-language-block a { color: @accent; } .uls-search-label, #uls-settings-block.uls-settings-block--vector-2022 > button.uls-add-languages-button, #uls-settings-block.uls-settings-block--vector-2022 > button.uls-language-settings-button, #uls-settings-block.uls-settings-block--vector-2022 > button.uls-language-settings-button:hover, .uls-icon-close, .uls-languagefilter-clear { filter: @text-filter; } .uls-sub-panel, .language-settings-buttons { border-color: @surface1; } .uls-language-block > ul > li:hover { background-color: @surface0; } .languagesettings-menu .menu-section.active { background-color: @surface1; } /* Page preview */ .mwe-popups .mwe-popups-extract[dir="ltr"]::after { background-image: linear-gradient(to right, transparent, @base 50%); } .mwe-popups .mwe-popups-extract[dir="rtl"]::after { background-image: linear-gradient(to left, transparent, @base 50%); } /* Icons */ img[alt="Edit this on Wikidata"], img[alt="Edit this at Wikidata"] { filter: @accent-filter; } /* Logos */ .mw-logo-wordmark[alt="Wikipedia"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); + .mw-logo-tagline { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } } .mw-logo-icon { &[src$="wikidatawiki.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[src$="commonswiki.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[src$="wikivoyage.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[src$="wikiquote.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[src$="wikiversity.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[src$="mediawikiwiki.svg"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } } .mw-logo-wordmark { &[alt="Wikidata"], &[alt="Wikimedia Commons"] { filter: @text-filter; } &[alt="Wikivoyage"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[alt="Wikinews"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[alt="Wikiquote"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[alt="Wikiversity"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &[alt="MediaWiki"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } } .vector-page-titlebar .mw-portlet-lang .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; filter: none; } .vector-icon { filter: none !important; &.mw-ui-icon-wikimedia-menu { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-ellipsis { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-appearance { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-expand { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.mw-ui-icon-wikimedia-language-progressive { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.mw-ui-icon-wikimedia-language { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.mw-ui-icon-wikimedia-listBullet { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.mw-ui-icon-wikimedia-fullScreen { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-userAvatar { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-watchlist { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-tray { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-bell { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-star { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-userTalk { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-sandbox { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-settings { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-unStar { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-labFlask { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-userContributions { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-logOut { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-search { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-edit { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-history { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-speechBubbles { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } &.mw-ui-icon-wikimedia-editLock { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } } } /* Root */ :root:has(.central-featured) { #catppuccin(@lightFlavor); &, body { color: @text; background-color: @base; .svg-Wikipedia_wordmark { filter: @text-filter; } .central-featured-lang small, .other-project-tagline, .site-license, .footer-sidebar-text { color: @subtext1; } .central-featured-lang :hover { background-color: @surface1; } .other-project-link:hover { background-color: @surface1; } .search-container { #searchInput { color: @text; background-color: @mantle; border-color: @overlay2; box-shadow: none; &:focus { border-color: @accent; } } .js-langpicker-label { color: @subtext0; } .styled-select:hover { background-color: @surface1; } .sprite.svg-arrow-down { filter: @text-filter; } button[type="submit"] { background-color: @accent; border-color: @accent; .svg-search-icon { filter: @crust-filter; } } .suggestions-dropdown { background-color: @mantle; border-color: @overlay2; .suggestion-link { border-bottom-color: @overlay0; &.active { background-color: fade(@accent, 10%); } .suggestion-thumbnail { @svg: escape( '', ); background-image: url("data:image/svg+xml,@{svg}"); } .suggestion-title { color: @text; } } } } hr { border-bottom-color: @surface1; } .lang-list-border { background-color: @surface2; } .lang-list-button { background-color: @mantle; color: @accent; outline-color: @mantle; border-color: @surface2; .svg-language-icon, .svg-arrow-down-blue { filter: @accent-filter; } &:focus { box-shadow: inset 0 0 0 1px @accent; } } .lang-list-container { background-color: @surface0; .bookshelf { border-top-color: @overlay1; box-shadow: none; .text { color: @text; background-color: @surface2; } } } } } }