kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-08 11:48:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Extend auto dark theme to all modern browsers

Browse Source 
Former-commit-id: 72725aab0c0cbaaaf4b289bc26f59a99a242fc27 [formerly f7caf4461cc2d75be599ed544c8887e8c952b184] [formerly 66213052f971493cf28fdca267097ce5cf8603f9] [formerly 7cc1e4e89616962748add62beaa1249c26d5cce8 [formerly d12e3886fbe26c2843845b0753d0b944aa49b11c [formerly 3be2996722a7033467d51e439689f27cd1f818a8]]]
Former-commit-id: cb22e9535c0c733372bdde7171ba1770c563e1ac [formerly 247c113f563181fafcc257e7a287927bd2c2abeb [formerly 403a9dcfad7b4de46ab93cb3ca3fdbaeb1c40b4d]]
Former-commit-id: 158ae87f15363a4c97e3bdbb30dbb482f3ac31c0 [formerly 064e7a6b95e1535bf41acba7d994f26a7b25eed6]
Former-commit-id: e058231684f58cdd5ac98089bbddf746ebc58bda
This commit is contained in:
Jaifroid 2021-06-06 11:03:19 +01:00
parent 419af2f7b4
commit 0c2dd603b2
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
www/index.html
View File

@ -100,13 +100,14 @@
</p>
</div>
<p style="padding-top:10px;">
This application (apart from the PWA version) is packaged with only a sample ZIM archive of the top 100 Wikipedia articles
so that you can get a feel for how offline Wikipedia browsing works. You will need to downloaded an offline ZIM archive and
store it on your device. You can do this from the <b>Configuration page&nbsp;<span class="glyphicon glyphicon-wrench"></span></b>,
This application may be packaged with a sample ZIM archive of the top 100 Wikipedia articles so that you can get a feel for how
offline Wikipedia browsing works. For the full experience you <strong>must download an offline ZIM archive</strong> and store it
on your device! You can do this from the <b>Configuration page&nbsp;<span class="glyphicon glyphicon-wrench"></span></b>,
or else see the <b>About page&nbsp;<span class="glyphicon glyphicon-info-sign"></span></b> for more information.
</p>
<p>
For the full experience you <strong>must</strong> download a ZIM archive and store it on your device! Alternatively, if you only want Wikivoyage or WikiMed in English, look for "Wikivoyage by Kiwix" or "WikiMed" in the Store and install those apps instead.
Alternatively, if you only want Wikivoyage or WikiMed in English, look for "Wikivoyage by Kiwix" or "WikiMed" in the Microsoft Store
(Windows 10) and install those apps instead.
</p>
<p>
Kiwix JS is <b>free</b> and <b>open source</b>. If you like it, please leave a positive review. Constructive feedback and help with
@ -619,7 +620,7 @@
<label class="checkbox" title="Tap three times for dark | auto | light">
<input type="checkbox" name="cssUIDarkTheme" id="cssUIDarkThemeCheck">
<span class="checkmark"></span>
<b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses UWP system Settings if available)
<b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses OS Settings if available)
</label>
<label class="checkbox" title="Tap three times for dark | auto | light">
<input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">

26
www/js/app.js
View File

@ -1246,6 +1246,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
function initializeUISettings() {
var checkAuto = params.cssUITheme == 'auto' || params.cssTheme == 'auto';
// Support for UWP
if (checkAuto && typeof Windows !== 'undefined' && Windows.UI && Windows.UI.ViewManagement) {
uiSettings = new Windows.UI.ViewManagement.UISettings();
uiSettings.oncolorvalueschanged = function () {
@ -1253,6 +1254,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
if (params.cssTheme == 'auto') switchCSSTheme();
};
}
// Support for other contexts (Firefox, Chromium, Electron, NWJS)
if (checkAuto && window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
uiSettings = window.matchMedia('(prefers-color-scheme:dark)');
uiSettings.onchange = function () {
if (params.cssUITheme == 'auto') cssUIThemeGetOrSet('auto');
if (params.cssTheme == 'auto') switchCSSTheme();
};
}
}
// Code below is needed on startup to show or hide the inverted dark theme checkbox;
// similar code also runs in switchCSSTheme(), but that is not evoked on startup
@ -1300,15 +1309,18 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
});
function cssUIThemeGetOrSet(value, getOnly) {
if (value == 'auto') {
if (value === 'auto') {
value = 'light'; // Default that most people expect
if (uiSettings) {
// We need to check the system theme
// Value 0 below is the 'background' constant in array Windows.UI.ViewManagement.UIColorType
var colour = uiSettings.getColorValue(0);
value = (colour.b + colour.g + colour.r) <= 382 ? 'dark' : 'light';
} else {
// There is no system default, so use light, as it is what most people will expect
value = 'light';
if (uiSettings.getColorValue) {
// Value 0 below is the 'background' constant in array Windows.UI.ViewManagement.UIColorType
var colour = uiSettings.getColorValue(0);
value = (colour.b + colour.g + colour.r) <= 382 ? 'dark' : 'light';
} else {
// Generic support for modern browser contexts
value = uiSettings.matches ? 'dark' : 'light';
}
}
}
if (getOnly) return value;