Flexoki (kepano's theme) for Wikipedia. Supports both light & dark mode. Includes custom fonts (Inter for body text & Lora for headings)
Wikipedia Flexoki by KraXen72
Details
AuthorKraXen72
LicenseMIT
Categorywikipedia.org
Created
Updated
Size5.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
original theme here: https://github.com/kepano/flexoki
maybe someday this theme will be linked there as well.
does not work with old wikipedia theme, only the new (default) one.
Source code
/* ==UserStyle==
@name Wikipedia Flexoki
@namespace github.com/openstyles/stylus
@version 1.1.0
@description Flexoki theme for wikipedia
@author KraXen72
==/UserStyle== */
@-moz-document domain("wikipedia.org") {
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
:root, html, html.skin-theme-clientpref-day {
--flexoki-bg: #FFFCF0;
--flexoki-bg-2: #F2F0E5;
--flexoki-ui: #E6E4D9;
--flexoki-ui-2: #DAD8CE;
--flexoki-ui-3: #CECDC3;
--flexoki-tx-3: #B7B5AC;
--flexoki-tx-2: #6F6E69;
--flexoki-tx: #100F0F;
--flexoki-red: #AF3029;
--flexoki-orange: #BC5215;
--flexoki-yellow: #AD8301;
--flexoki-green: #66800B;
--flexoki-cyan: #24837B;
--flexoki-blue: #205EA6;
--flexoki-purple: #5E409D;
--flexoki-magenta: #A02F6F;
--p-normal: .5rem;
--p-small: .25rem;
--br: .3rem;
}
:root.skin-theme-clientpref-night, html.skin-theme-clientpref-night {
--flexoki-bg: #100F0F;
--flexoki-bg-2: #1C1B1A;
--flexoki-ui: #282726;
--flexoki-ui-2: #343331;
--flexoki-ui-3: #403E3C;
--flexoki-tx-3: #575653;
--flexoki-tx-2: #878580;
--flexoki-tx: #CECDC3;
--flexoki-red: #D14D41;
--flexoki-orange: #DA702C;
--flexoki-yellow: #D0A215;
--flexoki-green: #879A39;
--flexoki-cyan: #3AA99F;
--flexoki-blue: #4385BE;
--flexoki-purple: #8B7EC8;
--flexoki-magenta: #CE5D97;
}
:root, html, html.skin-theme-clientpref-day, html.skin-theme-clientpref-night {
--color-base: var(--flexoki-tx);
--color-base-fixed: var(--flexoki-tx);
--background-color-base: var(--flexoki-bg);
--background-color-interactive: var(--flexoki-ui);
--background-color-neutral-subtle: var(--flexoki-bg-2);
.infobox {
background-color: var(--flexoki-bg-2);
}
/* figure */
--background-color-interactive-subtle: var(--flexoki-bg-2);
--color-progressive: var(--flexoki-blue) !important;
--color-destructive: var(--flexoki-red) !important;
--color-visited: var(--flexoki-purple) !important;
--color-emphasized: var(--flexoki-tx) !important;
}
html, body {
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.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,
.mw-body .mw-heading3,
.mw-body h3,
.mw-body .mw-heading4,
.mw-body h4 {
font-family: "Lora", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.infobox {
padding: var(--p-normal);
border-color: var(--flexoki-ui-3) !important;
}
.infobox:not(:has(> caption)) {
border-radius: var(--br);
}
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
border-top-left-radius: var(--br) !important;
border-top-right-radius: var(--br) !important;
border-collapse: unset;
}
figure > a {
padding: var(--p-normal) var(--p-normal) var(--p-small) var(--p-normal) !important;
}
figure > figcaption {
padding: var(--p-small) var(--p-normal) var(--p-normal) var(--p-normal) !important;
border-bottom-left-radius: var(--br);
border-bottom-right-radius: var(--br);
}
.mw-parser-output .ombox,
.mw-parser-output .ambox {
width: 100%;
margin-inline: 0;
margin-block: var(--p-normal);
border-color: var(--flexoki-ui-3) !important;
}
.mw-parser-output .ombox {
border-collapse: initial !important;
border-radius: var(--br) !important;
}
.mw-parser-output .ambox {
background-color: var(--flexoki-bg-2);
}
.mw-parser-output .ombox {
.mbox-text {
padding: var(--p-normal);
}
.mbox-image {
padding: var(--p-normal) 0 var(--p-normal) var(--p-normal);
}
.mbox-imageright {
padding: var(--p-normal) var(--p-normal) var(--p-normal) 0;
}
}
.mw-parser-output .side-box,
div.thumbinner {
border-radius: var(--br) !important;
border-color: var(--flexoki-ui-3) !important;
}
div.thumbinner {
padding: var(--p-normal);
}
.mw-parser-output .portalborder {
padding: var(--p-small);
border-radius: var(--br) !important;
}
.catlinks { border-radius: var(--br); }
}