Skip to content

Wikipedia Deep Dark + Noto Fonts by elendil03

Details

Authorelendil03

LicenseCCO

Categoryuserstyles

Created

Updated

Size51 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Based on the "Wikipedia Deep Dark Theme" by n0x, replaced the fonts used with the Google Noto Superfamily for Latin, Greek, Cyrillic, Hebrew and Arabic scripts (more can be added in the CSS with very little effort). The result is still not compatible with right-to-left (RTL, R2L) languages, that's why I'd advise overriding this style with the "Material Dark Wikipedia" theme for all RTL language Wikipedia domains

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Wikipedia Deep Dark Theme
@version      1.0.0
@description  Dark Wikipedia theme. Get a cleaner, easier-to-read wiki at night to focus on content while browsing a beautiful dark website.
@namespace    http://www.w3.org/1999/xhtml
@author       n0x
@homepageURL  https://github.com/n0x-styles/wikipedia-dark
@supportURL   https://github.com/n0x-styles/wikipedia-dark/issues
@license      CC0
@preprocessor default
==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain('wikipedia.org')
{
body {
        font-family: "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif !important;
        color: #ddd;
        background-color: #222 !important;
    }

    a,
    .tocnumber {
        color: #608dff !important;
        text-decoration: none;
    }

    a:hover {
        color: #637ab5 !important;
        text-decoration: underline;
    }
  
    .b, div, th {
    color : white !important;
    }

    h1 {
        border: 0px !important;
        font-family: "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 36px !important;
        color: #fff !important;
    }

    h2 {
        border: 0px !important;
        font-family: "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif !important;
        font-weight: 400 !important;
        font-size: 26px !important;
        color: #eee !important;
    }

    h3 {
        border: 0px !important;
        font-family: "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        color: #ddd !important;
    }

    h4 {
        color: #ccc !important;
    }

    [style*="color: black"] {
        color: white !important;
    }

    [style*="background:#f8f9fa"] {
        background: #2d2c2b !important;
        border: none !important;
    }

    .reflist,
    .refbegin {
        background-color: #282828 !important;
    }

    .thumbcaption {
        color: #888 !important;
    }

    #content h3 {
        font-size: 20px !important;
    }

    p {
        font-family: "Noto Serif", "Noto Serif Hebrew", "Noto Naskh Arabic", Times New Roman, serif !important;
        font-weight: 300 !important;
        line-height: 1.7 !important;
        color: #ddd !important;
    }

    .portal-column-right span,
    .portal-column-left span,
    body.ns-100 .mw-body-content h2,
    .mw_metadata th,
    .tracklist th,
    #mp-tfl-h2 {
        color: #ddd !important;
        background-color: #444 !important;
    }

    body.ns-100 .mw-body-content th,
    body.ns-100 .mw-body-content div,
    body.ns-100 #portal td,
    .mw_metadata td,
    .tracklist td,
    .tracklist div {
        color: #ddd !important;
        border-width: 0px !important;
        background-color: #333 !important;
    }

    .portal-column-right,
    .portal-column-left,
    body.ns-100 .mw-body-content .subpages {
        color: #ddd !important;
        background-color: #222 !important;
        border-width: 0 !important;
    }

    .mw-highlight {
        background-color: #222 !important;
    }

    .mw-highlight .nc,
    .mw-highlight .nf {
        color: #068dff;
    }

    .mw-highlight .no {
        color: #dd0000;
    }

    .mw-notification {
        background-color: #333 !important;
    }

    #Example {
        color: #ddd !important;
    }

    #disambigbox {
        width: 99% !important;
        border-width: 1px 0 1px 0 !important;
        border-style: solid !important;
        border-color: #777 !important;
    }

    .hlist.hlist-separated.inline {
        background-color: transparent !important;
    }

    table,
    td,
    th {
        border: 0 !important;
        border-collapse: collapse !important;
        padding: 5px !important;
        /* color: #333 !important; */

        background-color: #444 !important;
        /* With this feature enabled, you loose visibility on colored table cells */
    }

    ul,
    .skin-vector .compact-ambox table .mbox-text-span {
        list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='9' r='2.5' fill='%23ddd'/%3E%3C/svg%3E");
    }

    /* Table of Contents */

    .toc {
        background: #333 !important;
        border: none !important;
        display: block !important;
        max-width: 300px !important;
        padding: 7px 14px !important
    }

    .tocnumber {
        color: #ddd !important;
    }

    .tocnumber:hover {
        text-decoration: none !important;
    }

    .toctogglelabel {
        color: #608dff !important;
        outline: 0 !important;
    }

    .toctogglespan {
        float: right !important;
        margin-top: 11px !important;
        margin-left: 10px !important;
    }

    .toctogglespan::before, .toctogglespan::after {
        content: "" !important;
    }

    .toc a:hover {
        text-decoration: none !important;
    }

    a:hover .toctext {
        color: #637ab5 !important;
        text-decoration: underline;
    }

    /* End */

    ul,
    li,
    caption {
        background: transparent !important;
        border: 0px !important;
        line-height: 1.8 !important;
        font-size: 14px !important;
        font-weight: 300 !important;
    }

    li span {
        background: transparent !important;
        border: 0 !important;
        font-size: 14px !important;
    }

    .referencetooltip {
        background-color: #282828 !important;
    }

    dl {
        font-weight: 300 !important;
    }

    dt {
        font-style: italic;
        font-size: 16px !important;
        margin-top: 10px !important;
    }

    dd {
        font-size: 15px !important;
    }

    #p-logo a {
        background-image: var(--wiki-logo) !important;
        background-color: #222 !important;
        background-size: 125px 150px;
    }

    .mw-wiki-logo {
        padding-left: 15px !important;
        padding-top: 10px !important;
        border: 0 !important;
        outline: 0 !important;
    }

    code {
        padding: 3px !important;
        background: transparent !important;
        color: #39892f !important;
        border: 1px solid #555 !important;
    }

    .hatnote span {
        color: #888 !important;
        background-color: #222 !important;
    }

    tt {
        font-family: 'Source Code Pro', 'Lucida Sans Unicode', 'Courier New' !important;
        font-size: 16px !important;
    }

    .new,
    .new:link,
    .new:visited {
        color: #cd5b45 !important;
    }

    blockquote {
        border: 0 !important;
        font-style: italic !important;
        font-size: 20px !important;
        margin: 35px 75px !important;
        line-height: 1.5 !important;
        font-weight: 300 !important;
        background: transparent !important;
    }

    select {
        padding: 0 10px;
    }

    .mw-ui-button,
    .mw-ui-progressive {
        border: 1px solid #888 !important;
        color: #347Bff !important;
        background: #222 !important;
        text-shadow: 0 0 0;
    }

    .mw-ui-button.mw-ui-progressive:hover,
    .mw-ui-button.mw-ui-progressive:focus,
    .mw-ui-button.mw-ui-progressive:active,
    .mw-ui-button:hover,
    .mw-ui-progressive:hover,
    .mw-ui-button:focus,
    .mw-ui-progressive:focus {
        box-shadow: 0 0 0 !important;
        text-shadow: 0 0 0 !important;
        border: 1px solid #347Bff !important;
    }

    .mw-helplink {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm1 16H9v-2h2zm2.71-7.6a2.64 2.64 0 0 1-.33.74 3.16 3.16 0 0 1-.48.55l-.54.48c-.21.18-.41.35-.58.52a2.54 2.54 0 0 0-.47.56A2.3 2.3 0 0 0 11 12a3.79 3.79 0 0 0-.11 1H9.08a8.9 8.9 0 0 1 .07-1.25 3.28 3.28 0 0 1 .25-.9 2.79 2.79 0 0 1 .41-.67 4 4 0 0 1 .58-.58c.17-.16.34-.3.51-.44a3 3 0 0 0 .43-.44 1.83 1.83 0 0 0 .3-.55 2 2 0 0 0 .11-.72 2.06 2.06 0 0 0-.17-.86 1.71 1.71 0 0 0-1-.9 1.7 1.7 0 0 0-.5-.1 1.77 1.77 0 0 0-1.53.68 3 3 0 0 0-.5 1.82H6.16a4.74 4.74 0 0 1 .28-1.68 3.56 3.56 0 0 1 .8-1.29 3.88 3.88 0 0 1 1.28-.83A4.59 4.59 0 0 1 10.18 4a4.44 4.44 0 0 1 1.44.23 3.51 3.51 0 0 1 1.15.65 3.08 3.08 0 0 1 .78 1.06 3.54 3.54 0 0 1 .29 1.45 3.39 3.39 0 0 1-.13 1.01z' fill='%23ddd'/%3E%3C/svg%3E") !important;
    }

    /* Media Viewer, image preview */

    .mw-mmv-above-fold  {
        background-color: #333 !important;
    }

    .mw-mmv-image-metadata {
        background-color: #111 !important;
    }

    .mw-mmv-dialog,
    .mw-mmv-dialog-down-arrow,
    .mw-mmv-download-attribution,
    .mw-mmv-download-pane,
    .mw-mmv-download-pane:hover {
        background-color: #333 !important;
    }

    /* End */

    /* Language Settings modal */
    .language-settings-dialog, .languagesettings-menu .menu-section:hover, #uls-display-settings-font-selectors .uls-font-item {
        background-color: #333 !important;
    }

    .languagesettings-menu .menu-section:focus {
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    #languagesettings-settings-panel, .uls-language-settings-close-block, .uls-input-settings .uls-input-settings-inputmethods-list {
        background-color: #444 !important;
    }

    .uls-language-settings-close-block .uls-icon-close {
        filter: invert(100%);
    }

    .language-settings-dialog h1 {
        font-size: 30px !important;
    }

    #display-panel-trigger.active, #input-panel-trigger.active {
        background-color: #444 !important;
    }

    .languagesettings-menu .menu-section .settings-text {
        color: #bbb !important;
    }

    #uls-display-settings-language-tab.mw-ui-pressed, #uls-display-settings-fonts-tab.mw-ui-pressed, #languagesettings-panels .mw-ui-pressed {
        background-col...

Reviews

No reviews yet.