Refined Vector 2022

Refinements for Wikipedia’s Vector 2022 skin

Features

• Fonts
  • More modern system font stacks for sans-serif and monospace fonts
  • Serif font for article body
  • Improved visual differentiation of inline monospaced text
• Support Safari’s ‘show color in tab bar’ feature

Before	After

Usage

1. Log in to Wikipedia
2. Go to Preferences → Appearance
3. Make sure the Vector (2022) skin is active
4. Choose which of your user styles you want to apply the refinements to
   • Wikipedia only, desktop only: ‘Skin → Vector 2022 (…Custom CSS…)’
   • Wikipedia only, desktop and mobile ‘Shared CSS/JavaScript for all skins → Custom CSS’
   • Wikipedia and all other Wikimedia projects, e.g. Wiktionary, etc.: ‘Shared CSS/JavaScript for all wikis → Custom CSS’
   • See Wikipedia’s Help:User style for more information
5. Copy the CSS and paste it into the editor
6. Follow the Help: User style instructions for saving the changes

CSS

:root {
	/* tailwind 4.2 font stacks - https://tailwindcss.com/docs/font-family */
	--font-sans:
		ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol', 'Noto Color Emoji';
	--font-serif: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
	--font-mono:
		ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono',
		'Courier New', monospace;
}

/* copies of original selectors */

/* base font: sans-serif */
html,
body {
	font-family: var(--font-sans);
}

/*
 * apply background color to body
 *
 * vector applies this to `.mw-page-container`
 *
 * applying it to `body` allows safari to use it as the tab bar color when
 * safari's 'show color in tab bar' setting is enabled
 */
body {
	background-color: var(--background-color-base);
}

/* heading font: serif */
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.pre-content h1,
.content .mw-heading1,
.content h1,
.content .mw-heading2,
.content h2 {
	font-family: var(--font-serif);
}

.mw-body .mw-heading3,
.mw-body h3,
.mw-body .mw-heading4,
.mw-body h4,
.mw-body .mw-heading5,
.mw-body h5,
.mw-body .mw-heading6,
.mw-body h6 {
	font-family: var(--font-serif);
}

/* body font: serif */
.mw-body p {
	font-family: var(--font-serif);
}

/* monospace elements font: mono */
pre,
code,
tt,
kbd,
samp,
.mw-code,
.content kbd,
.content samp,
.content code,
.content pre {
	font-family: var(--font-mono);
}

/* inline monospaced text: copy styles from other monospaced elements */
.mw-parser-output .monospaced {
	/* copied from `code` selector */
	border-radius: 2px;
	padding: 1px 4px;

	/* copied from `pre, code, .mw-code` selector */
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	color: var(--color-emphasized, #101418);
	border: 1px solid var(--border-color-muted, #dadde3);
}

/* /copies of original selectors */

/* new selectors */

/* body list items font: serif */
.mw-body-content li:not(.infobox li, .navbox li) {
	font-family: var(--font-serif);
}

/* /new selectors */