Jump to content

User:DavidL/DarkTheme

From Meta, a Wikimedia project coordination wiki

Skin compatibility

[edit]

This dark theme should be compatible with all available skins (2022):

  • Vector
  • Vector-2022
  • Monobook
  • Moderne
  • Timeless
  • MinervaNeue (theme used on mobile)

Screenshots

[edit]

Style sheet

[edit]

The stylesheet is available here: User:DavidL/darktheme.css but don't copy this file, just add a line to @import this file like indicated in "Usage" section below, otherwise you won't use the lastest version.

It covers most of the pages and special pages, but there may be some problems:

  • Mediawiki CSS and HTML are constantly changing, it needs constant update, stability seems impossible for Mediawiki developers,
  • it may be incomplete for specific parts,
  • it cannot work on the special preferences pages where no user stylesheet/javascript is loaded,
  • it may not work well with some images, particularly with transparent image expecting a white background,
  • it may not manage local CSS override (wiki pages or using templates), it need specific adaptation for each wiki project. In particular, any element changing colors should have a CSS class name or a unique CSS selector usable to customize the colors.

You can also modify colors used in pages and templates of wikimedia projects to use color with alpha. For example: Instead of #f0f0f0 which appears as a color near white whatever is the background color, you can replace it with color having an alpha component, like #7272721b which will still appear as #f0f0f0 on white background and as #2a2a2a on dark background #222222.

Usage

[edit]
  • Edit your global CSS for all wiki projects, or your local common.css file at User:username/common.css
  • Add the following line at start of the CSS page. It is important to place it at start, otherwise the CSS import has no effect.
  • Don't forget the screen at end of line, to apply it for screen media only (not for printable version for example).
@import url("https://meta.wikimedia.org/w/index.php?title=User:DavidL/darktheme.css&ctype=text/css&action=raw") screen;