| Tollens' Dark Theme | |
|---|---|
| Description | Dark mode for Wikipedia |
| Author(s) | Tollens |
| Status | Stable |
| Updated | May 2, 2024 (0 days ago) |
| Browser support | Modern browsers with CSS filter support |
| Skin support | 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
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://en.wikipedia.org/?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.
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://en.wikipedia.org/?title=User:Tollens/darkTheme.css&action=raw&bcache=1&maxage=86400&ctype=text/css") screen; /* Backlink: [[User:Tollens/darkTheme.css]] */
:root {
--text-color: 255, 255, 255; /* 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) */
--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.
| Tollens' Dark Theme | |
|---|---|
| Description | Dark mode for Wikipedia |
| Author(s) | Tollens |
| Status | Stable |
| Updated | May 2, 2024 (0 days ago) |
| Browser support | Modern browsers with CSS filter support |
| Skin support | 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
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://en.wikipedia.org/?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.
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://en.wikipedia.org/?title=User:Tollens/darkTheme.css&action=raw&bcache=1&maxage=86400&ctype=text/css") screen; /* Backlink: [[User:Tollens/darkTheme.css]] */
:root {
--text-color: 255, 255, 255; /* 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) */
--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.