App/UI/Night mode

As of v4.4, XOWA offers night mode.

Enabling

Night mode can be enabled in the following ways:

• Main Menu: Choose View -> Toggle Night mode
• Options: Go to Special:XowaCfg?grp=xowa.gui.nightmode and check Enabled

Color control

Colors for night mode are controlled by three different UI components:

Operating System

Colors for the following must be changed at the Operating System level:

• The window title bar
• The main menu bar
• The vertical scroll-bar

For example, on Windows 7, they can be changed at Control Panel -> Personalization.

Note that these can not be changed within XOWA, as the underlying UI framework library (SWT) does not allow it.

SWT

Colors for the following are controlled by SWT:

• All button backgrounds
• The url bar
• The tab buttons
• The find box
• The progress box

By default, a simple white on black theme is chosen. Exact colors can be chosen through Special:XowaCfg?grp=xowa.gui.nightmode.

CSS

Colors for all HTML content are specified through the CSS. By default, XOWA uses a global css at C:\xowa_release\bin\any\xowa\html\css\nightmode\xowa_night.css.

Generating a night-mode CSS from scratch

The night-mode CSS can be generated using the following process:

• Go to http://userstyles.org
• Search for Wikipedia
• Pick a user-style. For the current global CSS, I used https://userstyles.org/styles/105844/wikipedia-dark-st
• Click the "Show CSS" link
• Copy the CSS and place it in C:\xowa_release\bin\any\xowa\html\css\nightmode\xowa_night.css.
• Remove any line that starts with "@-moz-document"
• Remove any line that loads external urls (for example, loading images from http://imgur.com)

Specifying a night-mode CSS per wiki

The night-mode CSS is chosen using the following priority list:

• Wiki-specific: XOWA first checks for a night-mode CSS in this location: C:\xowa_release\user\anonymous\wiki\your_wiki_name\html\xowa_night.css
• User global: If XOWA doesn't find a wiki-specific file, it checks for a user-defined global file here: C:\xowa_release\user\anonymous\app\overrides\bin\any\xowa\html\css\nightmode\xowa_night.css.
• XOWA global: If XOWA still doesn't find a CSS file, it uses the global file that is distributed with the XOWA application package here: C:\xowa_release\bin\any\xowa\html\css\nightmode\xowa_night.css

Note that the XOWA global file should not be modified. Any modifications here will be lost in the next update.

The above logic also applies to the night-mode logo: logo_night.png.

Known issues

White border around tab buttons

The tab buttons have white borders. Unfortunately these are specified thru SWT and cannot be changed.

Flashing white background when viewing new pages

The HTML browser can sometimes flash white when viewing new pages. This seems to be an issue with the SWT browser control. It can be mitigated through the following

• Go to Special:XowaCfg?xowa.app.security
• Change Load HTML to browser method to url

Note that this option is not changed automatically because it has a minor privacy implication (pages are saved temporarily to the disk instead of being set directly through memory)

Flashing white background when opening new tabs

The HTML browswer can still flash sometimes when opening new tabs (Ctrl+T). This is an issue with the SWT tab control. Unfortunately, this cannot be changed

Various icons are hard to see in night mode

For example, the save button on the New Personal Wikis screen is a black floppy disk. This is hard to distinguish against a black background.

By default, XOWA is designed for a non-night-mode setting ("day mode"). Most icons will look fine for day mode. Unfortunately, resources are not available to always support both a "day mode" and a "night mode" theme.

Of course, contributions are always welcome. If you want to contribute a unified night mode theme, please contact me via Help/Feedback