kiwix/kiwix-js
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js.git synced 2025-09-09 15:21:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Auto Dark mode Theme added (#793)

Browse Source 
* Add auto options to index.html

* update app.js

* update uiUtil.js

* testing

* Update app.js

* fixed bug in app.js

* Update app.js

* removed extra spaces

* removed extra spaces

* Fixes autoTheme eventListener in app.js and removed spaced in index.html

* app.js

* removed extra spaces

* updated app,js and uiUtil.js

* fixed bug when browser doesn't support color-schemes

* added removeChild() instead of remove() and renamed class

* parentElement to parentNode 

As the parentElement is new to firefox and IE

* parentElement to parentNode

* fixes options for theme and some for wikimedia theme

* fixes help for the wikimedia theme

* update uiUtil.js

* moved code back to previous place

* displays auto theme description

* added auto description <p>

* removed space added again

* Update uiUtil.js

Defined `oldDescription` earlier before using it

* fixes oldDescription

* Update uiUtil.js

Co-authored-by: Mossroy <mossroy@mossroy.fr>
This commit is contained in:
Manjit Kaur Khaira 2022-02-21 17:16:59 +05:30 committed by GitHub
parent 236907aa06
commit 26490f4469
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
www/index.html
View File

@ -483,10 +483,14 @@
<select class="form-control" id="appThemeSelect">
<option value="light">Light</option>
<option value="dark">Dark (app only)</option>
<option value="dark_invert">Dark + invert (generic)</option>
<option value="dark_mwInvert">Dark + invert (Wikimedia)*</option>
<option value="dark_invert">Dark (generic invert)</option>
<option value="dark_mwInvert">Dark (wikimedia invert)*</option>
<option class="auto" value="auto">Auto (app only)</option>
<option class="auto" value="auto_invert">Auto (generic invert)</option>
<option class="auto" value="auto_mwInvert">Auto (wikimedia invert)*</option>
</select>
<p id="dark_mwInvert-help" class="appThemeInfo form-text text-muted">* Implements workarounds specific to Wikimedia ZIMs. Try generic option if there are display errors with recent ZIMs.</p>
<p class="text-muted" id="kiwix-auto-description" style="margin-bottom: 0;">&emsp;(Auto themes match the dark/light mode of your device.)</p>
<p id="mwInvert-help" class="appThemeInfo form-text text-muted">* Implements workarounds specific to Wikimedia ZIMs. Try generic option if there are display errors with recent ZIMs.</p>
<a id="viewArticle" class="appThemeInfo form-text" href="#">[&nbsp;Show article with applied theme&nbsp;]</a>
</div>
</div>

20
www/js/app.js
View File

@ -87,7 +87,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// Turns caching of the PWA's code on or off and deletes the cache (it defaults to true unless the bypass option is set in Expert Settings)
params['appCache'] = settingsStore.getItem('appCache') !== 'false';
// A parameter to set the app theme and, if necessary, the CSS theme for article content (defaults to 'light')
params['appTheme'] = settingsStore.getItem('appTheme') || 'light'; // Currently implemented: light|dark|dark_invert|dark_mwInvert
params['appTheme'] = settingsStore.getItem('appTheme') || 'light'; // Currently implemented: light|dark|dark_invert|dark_mwInvert|auto|auto_invert|auto_mwInvert|
// A global parameter to turn on/off the use of Keyboard HOME Key to focus search bar
params['useHomeKeyToFocusSearchBar'] = settingsStore.getItem('useHomeKeyToFocusSearchBar') === 'true';
// A parameter to access the URL of any extension that this app was launched from
@ -158,7 +158,6 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
document.getElementById('titleSearchRange').value = params.maxSearchResultsSize;
document.getElementById('titleSearchRangeVal').textContent = params.maxSearchResultsSize;
document.getElementById('appThemeSelect').value = params.appTheme;
uiUtil.applyAppTheme(params.appTheme);
document.getElementById('useHomeKeyToFocusSearchBarCheck').checked = params.useHomeKeyToFocusSearchBar;
switchHomeKeyToFocusSearchBar();
document.getElementById('bypassAppCacheCheck').checked = !params.appCache;
@ -172,6 +171,23 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// Unique identifier of the article expected to be displayed
var expectedArticleURLToBeDisplayed = "";
// define and store dark preference for matchMedia
var darkPreference = window.matchMedia('(prefers-color-scheme:dark)');
// if 'prefers-color-scheme' is not supported in the browser, then the "auto" options are not displayed to the user
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
var optionsToBeRemoved = document.getElementById("appThemeSelect").querySelectorAll('.auto');
for (var i = 0; i < optionsToBeRemoved.length; i++) {
optionsToBeRemoved[i].parentNode.removeChild(optionsToBeRemoved[i]);
}
}
// Apply previously stored appTheme
uiUtil.applyAppTheme(params.appTheme);
// Whenever the system theme changes, call applyAppTheme function
darkPreference.onchange = function() {
uiUtil.applyAppTheme(params.appTheme);
}
/**
* Resize the IFrame height, so that it fills the whole available height in the window
*/

24
www/js/lib/uiUtil.js
View File

@ -431,17 +431,20 @@ define(rqDef, function(settingsStore) {
* For each contentTheme, a stylesheet must be provided in www/css that is named 'kiwixJS' + contentTheme
* A rule may additionally be needed in app.css for full implementation of contentTheme
*
* @param {String} theme The theme to apply (light|dark[_invert|_mwInvert])
* @param {String} theme The theme to apply (light|dark[_invert|_mwInvert]|auto[_invert|_mwInvert])
*/
function applyAppTheme(theme) {
var darkPreference = window.matchMedia('(prefers-color-scheme:dark)');
// Resolve the app theme from the matchMedia preference (for auto themes) or from the theme string
var appTheme = /^auto/.test(theme) ? darkPreference.matches ? 'dark' : 'light' : theme.replace(/_.*$/, '');
// Get contentTheme from chosen theme
var contentTheme = theme.replace(/^[^_]*/, '');
var htmlEl = document.querySelector('html');
var footer = document.querySelector('footer');
var oldTheme = htmlEl.dataset.theme || '';
var iframe = document.getElementById('articleContent');
var doc = iframe.contentDocument;
var kiwixJSSheet = doc ? doc.getElementById('kiwixJSTheme') || null : null;
var appTheme = theme.replace(/_.*$/, '');
var contentTheme = theme.replace(/^[^_]*/, '');
var oldAppTheme = oldTheme.replace(/_.*$/, '');
var oldContentTheme = oldTheme.replace(/^[^_]*/, '');
// Remove oldAppTheme and oldContentTheme
@ -454,14 +457,21 @@ define(rqDef, function(settingsStore) {
// is not dark (but we want it applied when the content is dark or inverted)
footer.classList.add(contentTheme || '_light');
// Embed a reference to applied theme, so we can remove it generically in the future
htmlEl.dataset.theme = theme;
htmlEl.dataset.theme = appTheme + contentTheme;
// Hide any previously displayed help
var oldHelp = document.getElementById(oldTheme + '-help');
var oldHelp = document.getElementById(oldContentTheme.replace(/_/, '') + '-help');
if (oldHelp) oldHelp.style.display = 'none';
// Show any specific help for selected contentTheme
var help = document.getElementById(theme + '-help');
var help = document.getElementById(contentTheme.replace(/_/, '') + '-help');
if (help) help.style.display = 'block';
// Remove the contentTheme for auto themes whenever system is in light mode
if (/^auto/.test(theme) && appTheme === 'light') contentTheme = null;
// Hide any previously displayed description for auto themes
var oldDescription = document.getElementById('kiwix-auto-description');
if (oldDescription) oldDescription.style.display = 'none';
// Show description for auto themes
var description = document.getElementById('kiwix-' + theme.replace(/_.*$/, '') + '-description');
if (description) description.style.display = 'block';
// If there is no ContentTheme or we are applying a different ContentTheme, remove any previously applied ContentTheme
if (oldContentTheme && oldContentTheme !== contentTheme) {
iframe.classList.remove(oldContentTheme);