# App/UI/Night mode

From XOWA: the free, open-source, offline wiki application

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\bin\any\xowa\html\css\nightmode\xowa_night.css.

This 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\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)

Note that the global night mode css file should not be modified (C:\xowa\bin\any\xowa\html\css\nightmode\xowa_night.css). Any modifications here will be lost in the next update.

If you want to customize the CSS, it must be done per wiki. Place the modified css file at C:\xowa\user\anonymous\wiki\your_wiki_name\html\xowa_night.css

## 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

Categories:

- Global config

Hidden categories:

### XOWA

- Main page
- Screenshots
- Video
- Download XOWA
- Download wikis

### Getting started

- Requirements
- Installation
- Simple Wikipedia
- English Wikipedia
- Other Wikipedias

### Android

- Setup
- Video

### Help

- About
- Contents
- Media
- Feedback

### Blog

- Current

### Links

- Wikimedia dumps
- XOWA @ archive.org
- English Wikipedia

### Donate

- archive.org
- Wikipedia
- XOWA