Skip to content

Wikipedia Flexoki by KraXen72

Screenshot of Wikipedia Flexoki

Details

AuthorKraXen72

LicenseMIT

Categorywikipedia.org

Created

Updated

Size5.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Flexoki (kepano's theme) for Wikipedia. Supports both light & dark mode. Includes custom fonts (Inter for body text & Lora for headings)

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); }

}

Reviews

No reviews yet.