Toggle search
Toggle menu
4.5K
459
368
46.8K
Net 7 Portal Wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Dark Mode

From Net 7 Portal Wiki
More actions

Overview

The wiki has been updated to MediaWiki v1.41.2 and the Citizen skin has been installed and made the default.

This will require some adjustments as many parts of the wiki are not currently dark mode friendly. I've been working through these things and I've made quite a bit of progress. I'll also be continuing to correct these things as quickly as I can. See #Known Issues for a complete list of the remaining issues identified so far.

Why Dark Mode?

This was both an accessibility choice for those affected by extremely bright backgrounds (e.g. migraines from the blinding white background) and made the default because dark mode is more on theme for a dark game about space! Hopefully having the wiki up next to the game won't be quite so blinding anymore!

An additional option to help those who get eye-ache from glary screens is to enable or install blue-light reduction software. This is built into Windows 10 and up (go to Settings -> Display -> Brightness and Color" -> Night Light). If your operating system does not have this feature, various review websites (e.g. 1, 2, 3) recommend a program called F.lux, which has been around for more than 15 years (it's free, for personal use).

Guidelines for Dark Mode

It can be challenging to support both dark and light backgrounds for the same content but that is what we're going to do by trying to follow the MediaWiki guidelines in the resources section below.

Common Issues I've Had To Fix

  1. Pages which specify a foreground color or a background color, but not both. You should always specify both if you specify either one! This stylesheet is a quick fix for a lot of these issues:
    • Template:DarkMode/styles.css
    • Simply add it to a page with <templatestyles src="DarkMode/styles.css" />
    • Module:Documentation/styles.css (not directly related, but this stylesheet also required a lot of dark mode related hacks which have caused other problems, so if something doesn't look right on Template pages with documentation in particular, this is another good place to look)
  2. Pages which use rgba to calculate colors which are then relative to the background; this yields very different results for alpha on white than alpha on black... use absolute colors instead
  3. Images with white backgrounds or black borders rather than transparent backgrounds with white borders; always create images with transparency (png) and white borders around black objects
  4. The background has a large effect on how colors are perceived and highly saturated colors tend to reproduce more faithfully when viewed on both black and white backgrounds; the more gray you introduce into the color the more it will blend in with white or black, depending on the amount of gray. For this reason I've been switching over to HSL color values with S=100% (and adjusting L as necessary to get a similar color while keeping H constant). There are some tools to help with this below.

Useful Resources

I Hate This... Turn It Off!

The skin that is in use is a preference and while the default changed to Citizen which has dark mode by default, you have options.

If you like the new organization and just prefer a white background you can keep the current skin and switch to "Light" mode, see #Skin Preferences below.

If you just want to go back to the way things were, you can change the skin in your profile preferences under:

https://www.net-7.org/wiki/index.php?title=Special:Preferences#mw-prefsection-rendering

"Vector legacy (2010)" is the skin we were using before the update and "Vector (2022)" is the current default MediaWiki skin.

However, the new Citizen skin also has some preferences you can modify so before you kick it to the curb, see the next section and give it a chance.

Skin Preferences

The Citizen skin has built-in preferences for Text size (Small, Standard, Large), Color (Auto[Browser/OS setting], Light, Dark), Pure Black mode, and Width (Standard, Wide, Full).

These options can be accessed using the gear icon in the lower left corner:

Hey, Where Did X Go?!

With this new skin some things moved around and are often hidden behind context menus to reduce clutter. Here's where to find them.

Search Box

The search box which was previously in the upper right corner can now be toggled using the magnifying glass in the upper left corner:

The search box can also be brought up immediately by hitting '/' (forward slash).

Main Navigation

The main navigation menu is now under the three horizontal bars menu in the upper left:

and this is where MOST of the links that used to be in the left sidebar went:

This also shows some neat stats for the wiki including the number of articles, files, users, and edits:

Notably the What links here option moved to the three dots "More actions" menu in the upper-right (see below).

More actions

While the names of Talk pages have not changed, they are now accessed via the "Discussion" button in the upper right corner.

Several actions moved into the "three dots" menu in the upper right corner (what you see here is context sensitive so it will vary by page and your role, e.g. you may not see Delete and Protect if you don't have those permissions and many of the others won't show up if you're viewing an unpublished page, etc.)

This is also where the What links here option was moved to from the left sidebar.

There are a few brand new and useful options here including:

  • Printable version
  • Permanent link (oldid link to the current version of the page being viewed)
  • Page information (takes you to the action=info page of the current page)

Known Issues

  1. Item Families with Info Boxes that need re-work (Template created in Category:Subpages For Items in a Family, and dark mode templatestyles above added)
Retrieved from "http://net7wiki.bmsite.net/index.php?title=Dark_Mode&oldid=46527"
Contents
Last modified
This page was last edited on 2 February 2025, at 20:22.