mirror of https://github.com/gnosygnu/xowa
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
360 lines
15 KiB
360 lines
15 KiB
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<title>App/UI/Night mode - XOWA</title>
|
|
<link rel="shortcut icon" href="https://gnosygnu.github.io/xowa/xowa_logo.png" />
|
|
<link rel="stylesheet" href="https://gnosygnu.github.io/xowa/xowa_common.css" type="text/css">
|
|
|
|
</head>
|
|
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject skin-vector action-submit vector-animateLayout" spellcheck="false">
|
|
<div id="mw-page-base" class="noprint"></div>
|
|
<div id="mw-head-base" class="noprint"></div>
|
|
<div id="content" class="mw-body">
|
|
<h1 id="firstHeading" class="firstHeading"><span>App/UI/Night mode</span></h1>
|
|
<div id="bodyContent" class="mw-body-content">
|
|
<div id="siteSub">From XOWA: the free, open-source, offline wiki application</div>
|
|
<div id="contentSub"></div>
|
|
<div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr">
|
|
|
|
<p>
|
|
As of v4.4, XOWA offers night mode.
|
|
</p>
|
|
<div id="toc" class="toc">
|
|
<div id="toctitle" class="toctitle">
|
|
<h2>
|
|
Contents
|
|
</h2>
|
|
</div>
|
|
<ul>
|
|
<li class="toclevel-1 tocsection-1">
|
|
<a href="#Enabling"><span class="tocnumber">1</span> <span class="toctext">Enabling</span></a>
|
|
</li>
|
|
<li class="toclevel-1 tocsection-2">
|
|
<a href="#Color_control"><span class="tocnumber">2</span> <span class="toctext">Color control</span></a>
|
|
<ul>
|
|
<li class="toclevel-2 tocsection-3">
|
|
<a href="#Operating_System"><span class="tocnumber">2.1</span> <span class="toctext">Operating System</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-4">
|
|
<a href="#SWT"><span class="tocnumber">2.2</span> <span class="toctext">SWT</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-5">
|
|
<a href="#CSS"><span class="tocnumber">2.3</span> <span class="toctext">CSS</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-6">
|
|
<a href="#Generating_a_night-mode_CSS_from_scratch"><span class="tocnumber">2.4</span> <span class="toctext">Generating a night-mode CSS from scratch</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-7">
|
|
<a href="#Specifying_a_night-mode_CSS_per_wiki"><span class="tocnumber">2.5</span> <span class="toctext">Specifying a night-mode CSS per wiki</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toclevel-1 tocsection-8">
|
|
<a href="#Known_issues"><span class="tocnumber">3</span> <span class="toctext">Known issues</span></a>
|
|
<ul>
|
|
<li class="toclevel-2 tocsection-9">
|
|
<a href="#White_border_around_tab_buttons"><span class="tocnumber">3.1</span> <span class="toctext">White border around tab buttons</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-10">
|
|
<a href="#Flashing_white_background_when_viewing_new_pages"><span class="tocnumber">3.2</span> <span class="toctext">Flashing white background when viewing new pages</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-11">
|
|
<a href="#Flashing_white_background_when_opening_new_tabs"><span class="tocnumber">3.3</span> <span class="toctext">Flashing white background when opening new tabs</span></a>
|
|
</li>
|
|
<li class="toclevel-2 tocsection-12">
|
|
<a href="#Various_icons_are_hard_to_see_in_night_mode"><span class="tocnumber">3.4</span> <span class="toctext">Various icons are hard to see in night mode</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<h2>
|
|
<span class="mw-headline" id="Enabling">Enabling</span>
|
|
</h2>
|
|
<p>
|
|
Night mode can be enabled in the following ways:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<b>Main Menu</b>: Choose <code>View</code> -> <code>Toggle Night mode</code>
|
|
</li>
|
|
<li>
|
|
<b>Options</b>: Go to <a href="/wiki/Special:XowaCfg%3Fgrp%3Dxowa.gui.nightmode" id="xolnki_2" title="Special:XowaCfg?grp=xowa.gui.nightmode">Special:XowaCfg?grp=xowa.gui.nightmode</a> and check <code>Enabled</code>
|
|
</li>
|
|
</ul>
|
|
<h2>
|
|
<span class="mw-headline" id="Color_control">Color control</span>
|
|
</h2>
|
|
<p>
|
|
Colors for night mode are controlled by three different UI components:
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="Operating_System">Operating System</span>
|
|
</h3>
|
|
<p>
|
|
Colors for the following must be changed at the Operating System level:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
The window title bar
|
|
</li>
|
|
<li>
|
|
The main menu bar
|
|
</li>
|
|
<li>
|
|
The vertical scroll-bar
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
For example, on Windows 7, they can be changed at <code>Control Panel</code> -> <code>Personalization</code>.
|
|
</p>
|
|
<p>
|
|
Note that these can not be changed within XOWA, as the underlying UI framework library (SWT) does not allow it.
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="SWT">SWT</span>
|
|
</h3>
|
|
<p>
|
|
Colors for the following are controlled by SWT:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
All button backgrounds
|
|
</li>
|
|
<li>
|
|
The url bar
|
|
</li>
|
|
<li>
|
|
The tab buttons
|
|
</li>
|
|
<li>
|
|
The find box
|
|
</li>
|
|
<li>
|
|
The progress box
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
By default, a simple white on black theme is chosen. Exact colors can be chosen through <a href="/wiki/Special:XowaCfg%3Fgrp%3Dxowa.gui.nightmode" id="xolnki_3" title="Special:XowaCfg?grp=xowa.gui.nightmode">Special:XowaCfg?grp=xowa.gui.nightmode</a>.
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="CSS">CSS</span>
|
|
</h3>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="Generating_a_night-mode_CSS_from_scratch">Generating a night-mode CSS from scratch</span>
|
|
</h3>
|
|
<p>
|
|
The night-mode CSS can be generated using the following process:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Go to <a href="http://userstyles.org" rel="nofollow" class="external free">http://userstyles.org</a>
|
|
</li>
|
|
<li>
|
|
Search for Wikipedia
|
|
</li>
|
|
<li>
|
|
Pick a user-style. For the current global CSS, I used <a href="https://userstyles.org/styles/105844/wikipedia-dark-st" rel="nofollow" class="external free">https://userstyles.org/styles/105844/wikipedia-dark-st</a>
|
|
</li>
|
|
<li>
|
|
Click the "Show CSS" link
|
|
</li>
|
|
<li>
|
|
Copy the CSS and place it in C:\xowa_release\bin\any\xowa\html\css\nightmode\xowa_night.css.
|
|
</li>
|
|
<li>
|
|
Remove any line that starts with "@-moz-document"
|
|
</li>
|
|
<li>
|
|
Remove any line that loads external urls (for example, loading images from <a href="http://imgur.com" rel="nofollow" class="external free">http://imgur.com</a>)
|
|
</li>
|
|
</ul>
|
|
<h3>
|
|
<span class="mw-headline" id="Specifying_a_night-mode_CSS_per_wiki">Specifying a night-mode CSS per wiki</span>
|
|
</h3>
|
|
<p>
|
|
The night-mode CSS is chosen using the following priority list:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<b>Wiki-specific</b>: XOWA first checks for a night-mode CSS in this location: C:\xowa_release\user\anonymous\wiki\your_wiki_name\html\xowa_night.css
|
|
</li>
|
|
<li>
|
|
<b>User global</b>: 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.
|
|
</li>
|
|
<li>
|
|
<b>XOWA global</b>: 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
|
|
</li>
|
|
</ul>
|
|
<dl>
|
|
<dd>
|
|
<b>Note that the XOWA global file should not be modified. Any modifications here will be lost in the next update.</b>
|
|
</dd>
|
|
</dl>
|
|
<p>
|
|
The above logic also applies to the night-mode logo: logo_night.png.
|
|
</p>
|
|
<h2>
|
|
<span class="mw-headline" id="Known_issues">Known issues</span>
|
|
</h2>
|
|
<h3>
|
|
<span class="mw-headline" id="White_border_around_tab_buttons">White border around tab buttons</span>
|
|
</h3>
|
|
<p>
|
|
The tab buttons have white borders. Unfortunately these are specified thru SWT and cannot be changed.
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="Flashing_white_background_when_viewing_new_pages">Flashing white background when viewing new pages</span>
|
|
</h3>
|
|
<p>
|
|
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
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Go to <a href="/wiki/Special:XowaCfg%3Fxowa.app.security" id="xolnki_4" title="Special:XowaCfg?xowa.app.security">Special:XowaCfg?xowa.app.security</a>
|
|
</li>
|
|
<li>
|
|
Change <code>Load HTML to browser method</code> to <code>url</code>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
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)
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="Flashing_white_background_when_opening_new_tabs">Flashing white background when opening new tabs</span>
|
|
</h3>
|
|
<p>
|
|
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
|
|
</p>
|
|
<h3>
|
|
<span class="mw-headline" id="Various_icons_are_hard_to_see_in_night_mode">Various icons are hard to see in night mode</span>
|
|
</h3>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
Of course, contributions are always welcome. If you want to contribute a unified night mode theme, please contact me via <a href="/wiki/Help/Feedback" id="xolnki_5" title="Help/Feedback">Help/Feedback</a>
|
|
</p>
|
|
<div id="catlinks" class="catlinks">
|
|
<div id="mw-normal-catlinks" class="mw-normal-catlinks">
|
|
<a href="/wiki/Special:Categories" title="Special:Categories">Category</a>:
|
|
<ul>
|
|
<li>
|
|
<a href="/wiki/Category:Global_config" title="Category:Global config">Global config</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-user-shown">Hidden categories:
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="mw-head" class="noprint">
|
|
<div id="left-navigation">
|
|
<div id="p-namespaces" class="vectorTabs">
|
|
<h3>Namespaces</h3>
|
|
<ul>
|
|
<li id="ca-nstab-main" class="selected"><span><a id="ca-nstab-main-href" href="index.html">Page</a></span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='mw-panel' class='noprint'>
|
|
<div id='p-logo'>
|
|
<a style="background-image: url(https://gnosygnu.github.io/xowa/xowa_logo.png);" href="http://xowa.org/" title="Visit the main page"></a>
|
|
</div>
|
|
<div class="portal" id='xowa-portal-home'>
|
|
<h3>XOWA</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://xowa.org/index.html" title='Visit the main page'>Main page</a></li>
|
|
<li><a href="http://xowa.org/screenshots.html" title='See screenshots of XOWA'>Screenshots</a></li>
|
|
<li><a href="https://www.youtube.com/watch?v=q0qbXYXEH6M" title="See a video of XOWA Desktop in action">Video</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Help/Download_XOWA.html" title='Download the XOWA application'>Download XOWA</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Dashboard/Image_databases.html" title='Download offline wikis and image databases'>Download wikis</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-started'>
|
|
<h3>Getting started</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://xowa.org/home/wiki/App/Setup/System_requirements.html" title='Get XOWA's system requirements'>Requirements</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/App/Setup/Installation.html" title='Get instructions for installing XOWA'>Installation</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/App/Import/Simple_Wikipedia.html" title='Learn how to set up Simple Wikipedia'>Simple Wikipedia</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/App/Import/English_Wikipedia.html" title='Learn how to set up English Wikipedia'>English Wikipedia</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/App/Import/Other_wikis.html" title='Learn how to set up other Wikipedias'>Other Wikipedias</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-android'>
|
|
<h3>Android</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://xowa.org/home/wiki/Android/Setup.html" title='Setup XOWA on your Android device'>Setup</a></li>
|
|
<li><a href="https://www.youtube.com/watch?v=jsMTBxGweUw" title="See a video of XOWA Android in action">Video</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-help'>
|
|
<h3>Help</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://xowa.org/home/wiki/Help/About.html" title='Get more information about XOWA'>About</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Help/Contents.html" title='View a list of help topics'>Contents</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Help/Media.html" title='Read what others have written about XOWA'>Media</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Help/Feedback.html" title='Questions? Comments? Leave feedback for XOWA'>Feedback</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-blog'>
|
|
<h3>Blog</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://xowa.org/home/wiki/Blog.html" title='Follow XOWA''s development process'>Current</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-links'>
|
|
<h3>Links</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="http://dumps.wikimedia.org/backup-index.html" title="Get wiki datababase dumps directly from Wikimedia">Wikimedia dumps</a></li>
|
|
<li><a href="https://archive.org/search.php?query=xowa" title="Search archive.org for XOWA files">XOWA @ archive.org</a></li>
|
|
<li><a href="http://en.wikipedia.org" title="Visit Wikipedia (and compare to XOWA!)">English Wikipedia</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portal" id='xowa-portal-donate'>
|
|
<h3>Donate</h3>
|
|
<div class="body">
|
|
<ul>
|
|
<li><a href="https://archive.org/donate/index.php" title="Support archive.org!">archive.org</a></li><!-- listed first due to recent fire damages: http://blog.archive.org/2013/11/06/scanning-center-fire-please-help-rebuild/ -->
|
|
<li><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector" title="Support Wikipedia!">Wikipedia</a></li>
|
|
<li><a href="http://xowa.org/home/wiki/Help/Donate.html" title="Support XOWA!">XOWA</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |