User:Tollens/darkTheme

User script

Tollens' Dark Theme
Description	Dark mode for Wikipedia
Author(s)	Tollens
Status	Stable
Updated	October 11, 2024     (32 days ago)
Skins	Vector 2022, Vector legacy (2010), MonoBook, MinervaNeue
Source	User:Tollens/darkTheme.css

As there is currently no official dark theme available, I created this dark theme and plan to maintain it until a suitable official alternative is released. Installation instructions, an explanation of the customization options, and screenshots of the default colours of the enabled theme are available below.

Demo

• 
  Vector 2022
• 
  Vector 2010
• 
  MonoBook
• 
  MinervaNeue
• 
  Mobile

Installation

Installing this theme requires that you already have a Wikipedia account – if you don't, you can create one at Special:CreateAccount.

To install the dark theme for your account, add the following code to the top of your common.css page, creating the page if it does not exist already:

@import url("https://wiki.riteme.site/w/index.php?title=User:Tollens/darkTheme.css&action=raw&bcache=1&maxage=86400&ctype=text/css") screen; /* Backlink: [[User:Tollens/darkTheme.css]] */

If you want the theme to apply across all Wikimedia wikis, you can instead add the code to your global.css page at Meta-Wiki. The theme should work reasonably well on all wikis, but there will likely be issues here and there – I don't intend to add full support for other wikis any time in the near future.

Ensure that the skin you are using is one of the supported skins (Vector 2022, Vector 2010, Monobook, and MinervaNeue) - you can configure this in your preferences.

The theme will not work properly if other themes are trying to change big things at the same time – make sure that no other dark themes (or any other themes which make sweeping changes to the appearance of pages) are active. This includes the new built-in dark theme: make sure that the theme in your preferences is set to "Light" if you are using Vector 2022.

Customization

Nearly all colours used by the theme can be manually tweaked – this can be done by adding a small amount of code after the import statement. Making customization changes is not required for the theme to work; if any are omitted those options will use the default dark theme (like in the screenshots above). Each colour should be specified in RGB format (you'll probably want to use a colour picker such as Google's, which provides the RGB code for the selected colour). An example of how the file should look is below – the options are set to their default values.

@import url("https://wiki.riteme.site/w/index.php?title=User:Tollens/darkTheme.css&action=raw&bcache=1&maxage=86400&ctype=text/css") screen; /* Backlink: [[User:Tollens/darkTheme.css]] */
:root {
	--text-color: 240, 240, 240;               /* Used for nearly all text */
	--main-color: 24, 24, 24;                  /* Used as the primary background color */
	--accent-color: 38, 38, 38;                /* Used as the secondary background color */
	--unvisited-link-color: 107, 162, 250;     /* Used for the text color of all unvisited links */
	--visited-link-color: 115, 102, 255;       /* Used for the text color of all visited links */
	--redlink-color: 255, 51, 51;              /* Used for links to nonexistent pages (overrides other link colors) */
	--timestamp-link-color: 200, 200, 200;     /* Used for comment permalinks (timestamp of all talk page comments) */
	--header-background-color: 74, 74, 74;     /* Used behind titles of infoboxes, navigation boxes, some tables, etc. */
	--important-button-color: 51, 102, 204;    /* Used for important buttons such as 'Publish Changes' */
	--negative-color: 255, 37, 37;             /* Used on items associated with something negative (removed text in page histories, reverting, etc.) */
	--positive-color: 41, 202, 44;             /* Used on items associated with something positive (added text in page histories, accepting a change, etc.) */
	--diff-added-color: 128, 193, 255;         /* Used as the background behind added text in diffs */
	--diff-deleted-color: 251, 200, 80;        /* Used as the background behind removed text in diffs */
	--accented-border-color: 170, 170, 170;    /* Used for many borders, including tables, navigation boxes, etc. */
}

Issues

In the event that you experience any issues related to this theme, please contact me on my talk page with a detailed explanation of the problem.