stylishthemes / wikipedia-dark

:mortar_board: Dark Wikipedia

Applies to all Wikimedia wikis (wikipedia.org, wikidata.org, wiktionary.org, etc.), Wikidot wikis and the Arch Linux wiki.

Maintainers needed

Please read this announcement.

Preview

This theme also works with the mobile sites (Minerva skin). For more comparisons, see the image gallery.

Installation

A userstyle extension is required, common ones include

🎨 Stylus for Firefox, Chrome or Opera.

Then install using one of these methods

📦 Install the usercss with Stylus or xStyle. Supports automatic updates.

Additional Userstyles

⚙️ Overlay-Scrollbars
⚙️ Wikipedia Dark Gray Text Colors
⚙️ Wikipedia Dark IMG Styles

Note: With exception of the Overlay Scrollbars style the Wiki additional styles are NOT to be used on their own without the Wikipedia Dark style also installed ;)

Limitations

Wikipedia Dark only supports the default wikipedia vector theme.

Support for other themes are graciously accepted via a pull request... If interested please open a new issue to discuss your intentions before proceeding.

• Many of the table cells have inline styling to add a background colors.
  • Some of the very common stylings have been replaced using attribute selectors ( e.g. th[style*="background:#eee" i] ).
  • But due to the sheer number of possibilities, the replaced css style would also need to include selectors such as th[style*="background-color: #eee" i] and th[style*="background-color:#eee" i], th[bgcolor="eee" i] and th[style*="background-color: #eeeeee" i], etc.
  • It would be a daunting task to find and replace all of these colors. I hope you see my point.
  • If you really want a background color to be fixed, please share a pull request of the fix. We may not always have time to get to it.
• Not all images can be made readable.
  • This style uses a css filter to invert the images, but this really only works on basic black-and-white images.

Contributions

If you would like to contribute to this repository, please...

1. 👓 Read the contribution guidelines.
2. Fork or download this repository.
3. 👌 Create a pull request!

Thanks to all that have contributed so far!

wikipedia-dark's Issues

White table headbars in Russian Wikipedia

https://ru.wikipedia.org/wiki/Мосс,_Стирлинг

Some table cells have a white background

• Browser: Version 77.0.3831.6 (Offizieller Build) dev (64-Bit)
• Operating System: Windows 10 64-bit, German, 1903
• Link to page with the issue: https://de.wikipedia.org/wiki/Liste_von_Wiki-Software
• Screenshot:

Restore the color scheme of .mbox and other warning boxes

Wikipedia and its sister sites, have a complex system of notice and warning templates of varying severity, which make use of a color scheme to distinguish between message type and severity.

Right now, most of the warning and notice message boxes are all reduced to the same color (--gray-2/#222222) instead of a darker variation of the original color scheme. This removes essential contextual data when using our dark theme, and should get corrected eventually.

This may take a bit of doing in the style's current state though.

Arch Linux Wiki tables text broken

• Browser: Firefox
• Operating System: Arch Linux
• Link to page with the issue: https://wiki.archlinux.org/index.php/Mkinitcpio#Common_hooks
• Screenshot:
  
• How I expect it to look:
  
• Code I added to fix this specific issue, I am not good at CSS:

@-moz-document domain("wiki.archlinux.org") {
  #content td[style*="background: inherit"] {
    color: #ddd !important
  }
}

I can't find any other page that has this specific problem.

Remove generic selectors from rules using !important

Generally speaking, we should not be applying !important to generic selectors like div or span (the two biggest pain points in this style), as this causes cascading !important rules all over the style, creating an unmaintainable mess.

This is even more problematic when said selectors have multiple :not() pesudoclasses appended, increasing their specificity beyond the capability to be overridden.

I've already (mostly) remedied the div problem, but we still need to deal with span, among others. Even after this is fixed, the majority of the existing rules will still be using an unnecessary !important flag, and it will be difficult to weed out the cases where it's no longer needed.

Perhaps the long-term solution to this might be a rewrite of the desktop style.

White gradient at the end of the preview's text [having the "Page previews" wikipedia beta feature enabled]

It's about the 'Page previews' beta feature of wikipedia (login to your wikipedia account|Preferences|'Beta features and enable 'Page previews').

When hovering on a link, there's a white gradient at the end of the preview's text.
Example link: https://en.wikipedia.org/wiki/Jeff_Loomis
Screenshot:

PS. Yes, it's a beta feature, but I believe it's super useful to have it enabled,

Some backgrounds are still white

https://fr.wiktionary.org/wiki/superlatif

.ns-0 #mw-content-text div:not(.toctitle) > h2 elements have a white background
.ns-0 ol li, .ns-0 ol li li too, same with ul's

Mobile editing background

If the edit box for the mobile site could be returned to white or a light background (or lighten the font) that would be great.

Image description losing color descriptions

You can't see the color squares that describe the map in this example:

https://en.wikipedia.org/wiki/Abortion_law#/media/File:Abortion_Laws.svg

Formulars are unreadable

Hi,

I had the problem, that all formulars are unreadable using this dark theme, cause per default wikipedia uses an svg image with grey font color to display that.

Following this advice:
https://www.mediawiki.org/wiki/Extension:Math/advancedSettings#CSS_for_the_MathML_with_SVG_fallback_mode
I could make use of the MathML rendering of firefox, so the right color is used and all formulars are visible.
I thought that this could be usefull for all users of this dark theme, so maybe you want to include it?

Thanks!

Width wrapping

Could you add an option to be able to wrap the text on the page based on some width value (900px or something like this)?

German Wikipedia Background Image

Unfortunately the German branch of Wikipedia uses a very slightly different CSS that sets a header background image when logged in to edit.

It would be great if a workaround for this could be added, the relevant CSS is:

div#globalWrapper {
    background-image: none;
}

After:

Wikipedia design change

Wikipedia-Dark usercss

I just converted this userstyle into a usercss that should work on freestyler (not verified) and Stylus.

I added a notice on USO that we will no longer be updating Wikipedia Dark on that site.

Their HTML doesn't appear to allow header tags (h1, etc), so I capitalized the message.

What do you guys think? Too soon? Too harsh? Not harsh enough?

White on portuguese Main Page

On the portuguese Main Page of Wikipedia, there are a lot of boxes that has white background. Could you fix it?
Here is a screenshot:

Thank you.

White table in Russian Wikipedia

https://ru.wikipedia.org/wiki/Вулканцы

Just A Few Issues But Basically Perfect!

I really like this theme! I needed just a simple dark theme for Wikipedia and this is it! It's great so far I just have a few issues. For example, the visited link text is a dark blue color and it's a little less readable since it's dark on dark. If I could offer a suggestion, maybe a purple color for visited links could help make it more readable? Also, for charts whenever there's an "N/A" in a column, the column is grey with black text which I cannot read at all and only knew it was saying "N/A" when I highlighted the text. You can see what I mean in the images below. Other than that it's great!

White blocks in Russian Wiktionary

https://ru.wiktionary.org/wiki/директивный

Table headers still light

The table in question is here.

Again, using style version 2.0.1 and I have read the limitations section of the readme.

White background on Spanish versions of pages

On this Spanish page the text inside a table has white background so it's hard to read.
https://es.wikipedia.org/wiki/Anexo:Episodios_de_Digimon_Adventure

On this other page, the infobox titles have white background:
https://es.wikipedia.org/wiki/Digimon_Adventure

Some rows in tables not themed

Please check https://pl.wikipedia.org/wiki/Wu-Tang_Forever
Even trs has background-color:#f7f7f7;.
I do not know if above page styling is correct, maybe it should be changed on Wikipedia's side?

Also button (th on top right of table) to hide table has background-color:#ffffff;.

• Browser:
  Firefox & Waterfox
• Operating System:
  Windows 10
• Link to page with the issue:
  https://pl.wikipedia.org/wiki/Wu-Tang_Forever
• Screenshot:
  

edit box/WikEd backgrounds

I added the following CSS to make the background white when editing wikitext (it's hard to use WikEd with a gray background)

.mw-editfont-monospace {background: #ffffff !important;}
 
div#wikEdFrameInner {background: #ffffff !important;}

White headers in Russian Wiktionary

https://ru.wiktionary.org/wiki/Заглавная_страница

table.navbox.collapsible main content area background

I want to sit on this one for a little while to see if it breaks anything, since I'm not sure how reliable this selector is.

Adding table.navbox.collapsible tr:nth-child(2) > td to this line does the trick - .collapsible seems to be key here.

Offending element in question

On/Off switch

Hey guys!

I'm an avid user of your wikipedia dark theme. Thanks for that! I don't know if I'm in the right place for this, but I would like to suggest something: It is really complicated to switch between the light and the dark mode of wikipedia, but sometimes it's necessary. So it would be awesome to have an on/off switch for the theme. E. g. next to the wikipedia logo.

Felix

links aren't distinguishable from normal text

The color of the link text in Wikipedia-Dark is the same as normal non-link text. When the cursor is over the link text it becomes a brighter white color and gets and underline which is nice but it would be more useful to be able to see what is a link and what is just normal text without having to drag the cursor over all the text.

Thanks

Mobile styling

This needs more work.

See: https://en.m.wikipedia.org

Table not themed

From the same article as my last report but it's a different type of table.

Again, using style version 2.0.1 and I have read the limitations section of the readme.

Overrides background-colored table header foreground colors making text hard to read

The style forces table headers' foreground color to be white, even the background color is different and white is unreadable on it, such as this yellow (from the The Thundermans article):

#bodycontent pre has no color defined and appears black

line 83

add color :

#bodyContent pre, #bodyContent code, span.plainlinks * {
background-color: #111 !important;
->color: #b9b9b9;
}

example: https://en.wikipedia.org/wiki/Single-precision_floating-point_format
notice the content boxes

Color of visited hyperlinks is very hard to distinguish

Hi, I'm having the same issue with this skin as with the Stackexchange one. The issue is that the visited hyperlinks look almost identical to regular text. Sorry for nagging about the same thing on a different skin :P

Found a table that doesn't play well with the theme

Found a table that doesn't seem to conform to the dark theme.

Let me know if you require any further details. I don't know any CSS but I'll try to help as much as I can.

Thanks!

Unstyled wikitable elements

Unstyled element

Wasn't sure where to go with this one either so I need a second opinion - I was thinking that the bright yellow header could be brown (#321) and the off-white rows could be #282828. I'm not sure about the brown as it might be better to just ignore the default yellow color and go for a more basic dark background variant.

Wikitable header

https://en.wikipedia.org/wiki/Mambo_Nassau

The background of "Review scores" in the table on the right of the page is unstyled. This could be solved with just the addition of !important to the background color rule for wikitable headers. Vanilla Wikipedia has a unique color for this row in order to differentiate it from the bordering headers so maybe that should be considered as well.

Didn't want to propose a pull without discussing this first.

Random light table cell

The tracklist in question is here. The same can be found in the tracklists of other albums.

Again, using style version 2.0.1 and I have read the limitations section of the readme.

Infobox table not skinned

In this page https://en.wikipedia.org/wiki/BioShock_Infinite
The table in the infobox on the right is partially skinned.

Question: How to make saka hints visible

Hi,

I am Stylish and Saka-Key user. When I use wikipedia-dark I can't see my saka-key hints, but it's okay when I use github-dark.

Github dark:

Wikipedia dark:

Can wikipedia-dark style solve this issue ?

Thanks

Related : lusakasa/saka-key#239

Navigation popups are broken

You can see them, but they're transparent, and they look bad. Here's what navigation popups are: https://en.wikipedia.org/wiki/Wikipedia:Tools/Navigation_popups

Found another table that doesn't play well with the theme

Found another table where the notes footer doesn't seem to conform to the dark theme.

Let me know if you require any further details.

Thanks!

Remove 'v' prefix from version

Currently this repo is set up to have v added to the tag (and tag message). Now I don't want to force my style on anyone, but I prefer tags to not include the 'v', so I'd like to change it, even if it's inconsistent with old tags. Anyone with me?

Wikipedia-Dark/package.json

Lines 24 to 26 in f870779

	"patch": "npx ver -p patch wikipedia-dark.user.css",
	"minor": "npx ver -p minor wikipedia-dark.user.css",
	"major": "npx ver -p major wikipedia-dark.user.css",

Incorrect text color on .new tabs

Tabs that do not exist show up as blue instead of red. Pretty sure it wasn't always like this (as I would've noticed earlier). Maybe some new change made to MediaWiki or this theme broke it.

• Browser: Chrome
• Operating System: Windows
• Link to page with the issue: Any page without a talk page (I recommend going to the user talk page in MediaWiki when not logged in

Screenshot:
Without theme -

With theme -

Some tables not themed properly

There are several tables like the one in the screenshot here and here.

Using style version 2.0.1 and I have read the limitations section of the readme.

More bugs in Russian Wikipedia

There are white boxes in search pages (https://ru.wikipedia.org/w/index.php?search=чайф&title=Служебная%3AПоиск&fulltext=Найти&ns0=1)...

...and correction warnings (https://ru.wikipedia.org/wiki/Чайф).

White background in Russian Wikipedia

Wikipedia in Russian has white background in boxes (https://ru.wikipedia.org/wiki/Заглавная_страница). English version is alright.

Notification icons hard to read

The notification icons are black on a dark background and hard to read. (And also the Wikipedia logo, but that's a smaller issue.) Oh, and the Alerts/Notices headers have the default bright background while they are loading.

Screenshots

---

---

Table that doesn't adapt to dark theme

Found another table where the cells don't conform to the dark theme.

As per your instructions in the previous issue post, I've switched to Stylus and obtained the theme from usercss. So I guess this should be the latest version.

Do let me know if I should provide any further details.

Thanks!

Country flags' colors are inverted

In the page https://en.wikipedia.org/wiki/Greek_language the colors of the country flags gets inverted.
The issue gets fixed by removing the following code:
.infobox img[src*=".svg"]
Is there a reason to keep that code in place/

Table theming issues

Bright greys:

A weird grey bar:

https://en.wikipedia.org/wiki/Myst_(series)

Add wiki.archlinux.org

we could add the domain, but there is a bit more work to do to have the dark style's customization work on the archlinux site

#69 (comment)

FWIW the theme looks fine to me. Perhaps the domain could be added, and then cleaned up in the future.

Sitenotice texts are black

Browser:

Version 74.0.3702.0 (Offizieller Build) dev (64-Bit)

OS:

Windows 10 German 64-bit

Screenshot normal:

Screenshot with all text selected:

(Still not visible, even when selected all: The black close-X top right).

Code snippet:

<div id="siteNotice" class="mw-body-content"><div id="centralNotice" class="cn-WikiLovesLove2019">
<style>

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  src: local('Montserrat'), local('Montserrat'), url(https://upload.wikimedia.org/wikipedia/donate/c/cd/Montserrat.woff2) format('woff2');}

/* Main banner container. Banner: background, border colour and width and adding a margin between banner and article header*/
.cnotice {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    margin-bottom: 1em;
    cursor: pointer;
    color: #222;
    font-weight: 500;
}

/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/
#cnotice-main {
    display: table;
    width: 100%;
    height: 80px; /* need to set height for height 100% to work on elements within it */
}

/*MOBILE - Adjust mobile height of banner*/
body.skin-minerva #cnotice-main {
    height: 100px;
}

/*IMPORTANT - don't touch*/
.cnotice-message-container,
.cnotice-logo-container,
.cnotice-misc-container {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

/* --- Main message --- */
.cnotice-message {
    position: relative;
    margin: 0;
    line-height: 1.2;
    padding: 5px 5px 5px 5px;
}

@media (min-width: 1200px) {
    .cnotice-message {
         padding: 15px 0px 11px 30px;
    }
}

body.rtl .cnotice-message {
    padding: 5px 5px 5px 5px;
}

.cnotice-message p {
    margin: 0;
    color: #222;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 100%;
    opacity: 1;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (min-width: 1200px) {
    .cnotice-message p { font-size: 120%; }
}


/* --- Logo Image text --- */
.cnotice-logo-container {
    width: 10%;
}

body.rtl .cnotice-logo-container {
    padding: 0 .25em 0 .9em;
}

.cnotice-logo-container img {
    opacity: 1;
    display: block;
    margin-left: 15%;
    margin-top: 2px;
    margin-bottom: 1px;
}

/*Misc containter stuff starts here*/
.cnotice-misc-container {
    width: 10%;
    padding-right: 40px;
}

/*Detects and adjusts for mobile skin */
body.skin-minerva .cnotice-misc-container {
    padding-right: 10px;
}


/* --- Close Options --- */

#cnotice-toggle-box-options {
    display: table-cell;
    font-size: .8em;
    text-transform: uppercase;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    vertical-align: middle;
}

#cnotice-toggle-box {
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 3px;
    z-index: 1;
    opacity: .8;
}

body.rtl #cnotice-toggle-box {
    left: 3px;
    right: unset;
}

#cnotice-toggle-box:hover { 
    opacity: 1;
}

#cnotice-toggle-icon{
    background: 
       linear-gradient(transparent,transparent),
       url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E");
    height: 100%;
    width: 17px;
    min-width: 17px;
    min-height: 17px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.8;
}

#cnotice-toggle-icon:hover { 
    opacity: 1;
}

/* --- Full Banner Link --- */
.cnotice a.cnotice-full-banner-click {
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}

.cnotice a.cnotice-full-banner-click:hover {
    text-decoration: underline;
}

.cnotice-button {
    display: inline-block;
    border: 2px solid #36c;
    border-radius: 2px;
    color: #fff;
    padding: 5px 5px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    margin: 4px 2px;
    -moz-transition-duration: 100ms; /* Firefox */
    -webkit-transition-duration: 100ms; /* Safari */
    transition-duration: 100ms;
    cursor: pointer;
    z-index: 1;
    min-width: 80px;
}

@media (min-width: 1100px) {
    .cnotice-button {
        min-width: 110px;
        width: 25%;
        margin: auto;
    }
}

/* --- Buttons --- */
.cnotice a.cnotice-buttonlink {
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

.cnotice a.cnotice-buttonlink:hover {
    color: #fff;
}

.cnotice-button1 {
    background-color: #36c;
    border-color: #36c;
    color: #fff;
}

.cnotice-button1:hover {
    background-color: #447ff5;
    border-color: #447ff5;
}

.cnotice-button1:active {
    background-color: #2a4b8d;
    border-color: #2a4b8d;
}

.rtl .cnotice-button1 {
    left: 23px;
    right: auto;
    margin-left: 20px;
}

#cnotice-translation-link {
    position: absolute;
    right: 65px;
    bottom: 0px;
    font-size: 0.8em;
    white-space: nowrap;
}

#cnotice-translation-link:hover {
    text-decoration: underline;
}

.rtl #cnotice-translation-link {
    text-align: left;
    left: 65px;
}
</style>

<div class="cnotice" id="wikiloveslove2019banner">
    <a class="cnotice-full-banner-click external text" href="//commons.wikimedia.org/wiki/Special:MyLanguage/Commons:Wiki_Loves_Love_2019">
        <div id="cnotice-main">
            <div class="cnotice-logo-container">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wiki-Loves-Love-logo.svg" alt="Wiki Loves Love logo" width="55px">
            </div>
            <div class="cnotice-message-container">
                <div class="cnotice-message">
                    <p>Wiki Loves Love: Sendet Fotos rund um das Thema Liebe ein und gewinnt tolle Preise.<br>
                    Hauptthema dieses Jahr sind Festivals, Feiern und Zeremonien rund um die Liebe.</p>
                </div>
            </div>
        </div>
    </a>
    <div id="cnotice-toggle-box">
        <div id="cnotice-toggle-icon" href="#" title="Ausblenden" onclick="mw.centralNotice.hideBanner();return false;"></div>
    </div>
</div></div><!-- CentralNotice --></div>

To get a repro:

1. Open https://de.wikipedia.org/wiki/Unicodeblock_Smileys on a desktop PC
2. Clear all cookies
3. Refresh the page

You should see the site notice banner similar to the above.

My suggestion:

Please make the text and the closing X readable by adding more contrast.

Alternatively, hide the site notice altogether (since I consider it as unwanted advertising anyway).