diff --git a/i18n/en.jsonp.js b/i18n/en.jsonp.js
index 4f1a3069..d6a22dc2 100644
--- a/i18n/en.jsonp.js
+++ b/i18n/en.jsonp.js
@@ -57,11 +57,13 @@ document.localeJson = {
"configure-display-themeoption-dark-apponly": "Dark (app only)",
"configure-display-themeoption-dark-invert": "Dark (generic invert)",
"configure-display-themeoption-dark-mwinvert": "Dark (wikimedia invert)",
+ "configure-display-themeoption-dark-wikivector": "Dark (wikipedia vector)",
"configure-display-themeoption-auto-apponly": "Auto (app only)",
"configure-display-themeoption-auto-invert": "Auto (generic invert)",
"configure-display-themeoption-auto-mwinvert": "Auto (wikimedia invert)",
"configure-display-apptheme-auto-description": " (Auto themes match the dark/light mode of your device.)",
"configure-display-apptheme-mwinvert-description": "* Implements workarounds specific to Wikimedia ZIMs. Try generic option if there are display errors with recent ZIMs.",
+ "configure-display-apptheme-wikivector-description": "* Only applies to Wikimedia ZIMs. Falls back to generic inversion when other archives are loaded.",
"configure-display-apptheme-info": "[ Show article with applied theme ]",
"configure-display-libzimsearchtype": "Add snippets to libzim fulltext search (if available)",
"configure-display-libzimsearchtype-tip": "If checked, uses libzim fulltext search with snippet previews if available, otherwise just gets fulltext titles. Hover, click or press enter on keyboard to expand the snippet.",
diff --git a/i18n/es.jsonp.js b/i18n/es.jsonp.js
index 0d824b21..033b7240 100644
--- a/i18n/es.jsonp.js
+++ b/i18n/es.jsonp.js
@@ -57,11 +57,13 @@ document.localeJson = {
"configure-display-themeoption-dark-apponly": "Oscuro (sólo aplicación)",
"configure-display-themeoption-dark-invert": "Oscuro (inversión genérica)",
"configure-display-themeoption-dark-mwinvert": "Oscuro (inversión wikimedia)",
+ "configure-display-themeoption-dark-wikivector": "Oscuro (estilo vector de wikipedia)",
"configure-display-themeoption-auto-apponly": "Auto (sólo aplicación)",
"configure-display-themeoption-auto-invert": "Auto (inversión genérica)",
"configure-display-themeoption-auto-mwinvert": "Auto (inversión wikimedia)",
"configure-display-apptheme-auto-description": " (Temas automáticos se adaptan al modo oscuro/claro de su dispositivo.)",
"configure-display-apptheme-mwinvert-description": "* Implementa soluciones específicas para ZIMs de Wikimedia. Pruebe la opción genérica si hay errores de visualización con otros ZIMs.",
+ "configure-display-apptheme-wikivector-description": "* Solo se aplica a los ZIM de Wikimedia. Se revierte a la inversión genérica cuando se cargan otros archivos.",
"configure-display-apptheme-info": "[ Mostrar artículo con tema seleccionado ]",
"configure-display-libzimsearchtype": "Agregar fragmentos a la búsqueda de texto completo libzim (si están disponibles)",
"configure-display-libzimsearchtype-tip": "Si está marcado, usa la búsqueda de texto completo libzim con vistas previas de fragmentos si están disponibles, de lo contrario solo obtiene títulos de texto completo. Pase el cursor, haga clic o presione enter en el teclado para expandir el fragmento.",
diff --git a/i18n/fr.jsonp.js b/i18n/fr.jsonp.js
index cc8d76da..6af804fe 100644
--- a/i18n/fr.jsonp.js
+++ b/i18n/fr.jsonp.js
@@ -57,11 +57,13 @@ document.localeJson = {
"configure-display-themeoption-dark-apponly": "Sombre (application uniquement)",
"configure-display-themeoption-dark-invert": "Sombre (inversion générique)",
"configure-display-themeoption-dark-mwinvert": "Sombre (inversion Wikimédia)",
+ "configure-display-themeoption-dark-wikivector": "Sombre (style vector de Wikipédia)",
"configure-display-themeoption-auto-apponly": "Automatique (application uniquement)",
"configure-display-themeoption-auto-invert": "Automatique (inversion générique)",
"configure-display-themeoption-auto-mwinvert": "Automatique (inversion Wikimédia)",
"configure-display-apptheme-auto-description": " (Les thèmes automatiques s'adaptent au mode sombre/clair de votre appareil.)",
"configure-display-apptheme-mwinvert-description": "* Implémente des solutions spécifiques aux ZIM de Wikimédia. Essayez l'option générique si vous rencontrez des problèmes d'affichage avec d'autres ZIM.",
+ "configure-display-apptheme-wikivector-description": "* S’applique uniquement aux ZIMs de Wikimédia. Revient à l’inversion générique lorsque d’autres archives sont chargées.",
"configure-display-apptheme-info": "[ Afficher l'article avec le thème sélectionné ]",
"configure-display-libzimsearchtype": "Ajouter des extraits à la recherche en texte intégral libzim (si disponible)",
"configure-display-libzimsearchtype-tip": "Si coché, utilise la recherche en texte intégral libzim avec des aperçus d'extraits si disponibles, sinon obtient seulement les titres en texte intégral. Survolez, cliquez ou appuyez sur Entrée au clavier pour développer l'extrait.",
diff --git a/service-worker.js b/service-worker.js
index c96183ab..c0ddb2bc 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -116,6 +116,7 @@ const precacheFiles = [
'www/css/app.css',
'www/css/kiwixJS_invert.css',
'www/css/kiwixJS_mwInvert.css',
+ 'www/css/kiwixJS_wikiVector.css',
'www/css/transition.css',
'www/img/icons/kiwix-256.png',
'www/img/icons/kiwix-32.png',
diff --git a/www/css/app.css b/www/css/app.css
index a494aa1f..295390f4 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -550,3 +550,4 @@ button {
}
}
+
diff --git a/www/css/kiwixJS_wikiVector.css b/www/css/kiwixJS_wikiVector.css
new file mode 100644
index 00000000..67d39da6
--- /dev/null
+++ b/www/css/kiwixJS_wikiVector.css
@@ -0,0 +1,1247 @@
+:root {
+ --default-text-color: 240, 240, 240;
+ --default-main-color: 24, 24, 24;
+ --default-accent-color: 38, 38, 38;
+ --default-header-background-color: 74, 74, 74;
+ --default-redlink-color: 255, 51, 51;
+ --default-important-button-color: 51, 102, 204;
+ --default-unvisited-link-color: 107, 162, 250;
+ --default-visited-link-color: 115, 102, 255;
+ --default-timestamp-link-color: 200, 200, 200;
+ --default-negative-color: 255, 37, 37;
+ --default-positive-color: 41, 202, 44;
+ --default-diff-added-color: 128, 193, 255;
+ --default-diff-deleted-color: 251, 200, 80;
+ --default-accented-border-color: 170, 170, 170;
+ --background-color-interactive-subtle: rgb(var(--accent-color, var(--default-accent-color)));
+}
+
+:not(
+ .legend-color,
+ .legend-content,
+ body,
+ .diffchange,
+ [role="img"] *,
+ .vjs-control,
+ .vjs-control *,
+ .mw-tmh-player *,
+ .minerva-icon,
+ .cdx-table *,
+ .kiwixtooltip,
+ .kiwixtooltip *
+) {
+ box-shadow: none !important;
+ background-color: transparent !important;
+}
+
+/* popover code */
+.kiwixtooltip,
+.kiwixtooltip > div,
+.kiwixtooltip > div > div
+{
+ background-color: rgb(var(--accent-color, var(--default-accent-color))) !important;
+ color: rgb(var(--text-color, var(--default-text-color))) !important;
+}
+
+.kiwixtooltip > div > div[style*="background: black"] {
+ background: rgb(var(--header-background-color, var(--default-header-background-color))) !important;
+ opacity: 1 !important;
+}
+
+.kiwixtooltip > span[style*="border-bottom"] {
+ border-bottom-color: rgb(var(--accent-color, var(--default-accent-color))) !important;
+}
+
+.kiwixtooltip p,
+.kiwixtooltip b,
+.kiwixtooltip a,
+.kiwixtooltip sup {
+ color: rgb(var(--text-color, var(--default-text-color))) !important;
+ background-color: transparent !important;
+}
+
+.kiwixtooltip a {
+ color: rgb(var(--unvisited-link-color, var(--default-unvisited-link-color))) !important;
+}
+.kiwixtooltip a:visited {
+ color: rgb(var(--visited-link-color, var(--default-visited-link-color))) !important;
+}
+
+* {
+ color: rgb(var(--text-color, var(--default-text-color))) !important;
+}
+
+body.mediawiki {
+ background-image: none !important;
+ background-color: rgb(var(--accent-color, var(--default-accent-color))) !important;
+}
+body.mediawiki.skin-vector-2022 {
+ background-color: rgb(var(--main-color, var(--default-main-color))) !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: rgb(var(--text-color, var(--default-text-color))) !important;
+}
+
+td,
+tr {
+ background: transparent !important;
+}
+
+th {
+ background-color: rgb(var(--header-background-color, var(--default-header-background-color))) !important;
+ color: rgb(var(--text-color, var(--default-text-color))) !important;
+}
+
+ul {
+ list-style-image: url('data:image/svg+xml;utf8,Dark (app only)
Dark (generic invert)
Dark (wikimedia invert)*
+ Dark (Wikipedia Vector)*
Auto (app only)
Auto (generic invert)
Auto (wikimedia invert)*
(Auto themes match the dark/light mode of your device.)
* Implements workarounds specific to Wikimedia ZIMs. Try generic option if there are display errors with recent ZIMs.
+ * Only applies to Wikimedia ZIMs. Falls back to generic inversion when other archives are loaded.
[ Show article with applied theme ]
diff --git a/www/js/app.js b/www/js/app.js
index a40ad568..af5cbe7d 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -126,6 +126,50 @@ darkPreference.onchange = function () {
uiUtil.applyAppTheme(params.appTheme);
}
+// Vector Dark theme update the Dropdown UI State
+function updateThemeOptions() {
+ const vectorOption = document.getElementById('theme-vector-option');
+ if (vectorOption) {
+ // Only disable if a ZIM is loaded and it's not a Wikimedia ZIM
+ const zimLoaded = selectedArchive && selectedArchive.file && selectedArchive.file.name;
+ vectorOption.disabled = zimLoaded && !params.isWikimediaZim;
+ vectorOption.title = (!zimLoaded || params.isWikimediaZim) ? "" : "Vector style only available for Wikimedia ZIMs";
+
+ // Check that dropdown matches actual theme
+ const currentTheme = document.getElementById('appThemeSelect')?.value;
+ if (currentTheme && currentTheme.includes('_wikiVector') && !params.isWikimediaZim) {
+ // If somehow Vector is selected for non Wikimedia ZIM then correct it
+ handleThemeFallback();
+ }
+ }
+}
+
+function handleThemeFallback() {
+ const themeSelect = document.getElementById('appThemeSelect');
+ if (!themeSelect) return;
+ const currentTheme = themeSelect.value || settingsStore.getItem('appTheme') || 'light';
+
+ // When switching to Wikimedia ZIM
+ if (params.isWikimediaZim) {
+ // If current theme is invert then try to restore Vector if it was previously used
+ if (currentTheme.includes('_invert')) {
+ const baseTheme = currentTheme.replace('_invert', '_wikiVector');
+ if (themeSelect.querySelector(`option[value="${baseTheme}"]`)) {
+ themeSelect.value = baseTheme;
+ uiUtil.applyAppTheme(baseTheme);
+ }
+ }
+ }
+
+ // When switching from Wikimedia ZIM
+ else if (currentTheme.includes('_wikiVector')) {
+ const newTheme = currentTheme.replace('_wikiVector', '_invert');
+ themeSelect.value = newTheme;
+ uiUtil.applyAppTheme(newTheme);
+ }
+ updateThemeOptions();
+}
+
/**
* Resize the IFrame height, so that it fills the whole available height in the window
*/
@@ -1868,6 +1912,9 @@ async function archiveReadyCallback (archive) {
}
// This flag will be reset each time a new archive is loaded
appstate.wikimediaZimLoaded = /wikipedia|wikivoyage|mdwiki|wiktionary/i.test(archive.file.name);
+ params.isWikimediaZim = /wikipedia|wikimedia|wikivoyage|wiktionary|wikibooks|wikiquote|wikisource|wikinews|wikiversity/i.test(archive.file.name);
+ updateThemeOptions();
+ handleThemeFallback();
// Set contentInjectionMode to serviceWorker when opening a new archive in case the user switched to Restricted Mode/jquery Mode when opening the previous archive
if (params.contentInjectionMode === 'jquery') {
params.contentInjectionMode = settingsStore.getItem('contentInjectionMode');
@@ -2306,6 +2353,7 @@ function articleLoadedSW (iframeArticleContent) {
// Display the iframe content
iframeArticleContent.style.display = '';
articleContainer.style.display = '';
+
// Deflect drag-and-drop of ZIM file on the iframe to Config
if (!params.disableDragAndDrop) {
var doc = iframeArticleContent.contentDocument ? iframeArticleContent.contentDocument.documentElement : null;
@@ -2720,6 +2768,7 @@ function displayArticleContentInIframe (dirEntry, htmlArticle) {
if (!isDirEntryExpectedToBeDisplayed(dirEntry)) {
return;
}
+
// Display Bootstrap warning alert if the landing page contains active content
if (!params.hideActiveContentWarning && params.isLandingPage) {
if (regexpActiveContent.test(htmlArticle) || /zimit/.test(selectedArchive.zimType)) {
diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
index 455f781e..f197d9a7 100644
--- a/www/js/lib/uiUtil.js
+++ b/www/js/lib/uiUtil.js
@@ -853,10 +853,21 @@ function tabTransitionToSection (toSection, isAnimationRequired = false) {
* @param {String} theme The theme to apply (light|dark[_invert|_mwInvert]|auto[_invert|_mwInvert])
*/
function applyAppTheme (theme) {
+ // Validate the theme parameter to prevent XSS
+ // Only allow specific valid theme formats
+ if (!theme.match(/^(light|dark|auto)(_invert|_mwInvert|_wikiVector)?$/)) {
+ console.error('Invalid theme format:', theme);
+ theme = 'light';
+ }
+
// Resolve the app theme from the matchMedia preference (for auto themes) or from the theme string
var appTheme = isDarkTheme(theme) ? 'dark' : 'light';
// Get contentTheme from chosen theme
var contentTheme = theme.replace(/^[^_]*/, '');
+ // Revert to '_invert' or default dark theme if trying to use '_wikiVector' on non-Wikimedia ZIMs
+ if (contentTheme === '_wikiVector' && !params.isWikimediaZim) {
+ contentTheme = '_invert';
+ }
var htmlEl = document.querySelector('html');
var footer = document.querySelector('footer');
var oldTheme = htmlEl.dataset.theme || '';
@@ -877,19 +888,28 @@ function applyAppTheme (theme) {
footer.classList.add(contentTheme || '_light');
// Embed a reference to applied theme, so we can remove it generically in the future
htmlEl.dataset.theme = appTheme + contentTheme;
+
+ // Safely handle help element IDs
+ var safeOldContentTheme = oldContentTheme.replace(/[^a-zA-Z0-9-]/g, '');
+ var safeContentTheme = contentTheme.replace(/[^a-zA-Z0-9-]/g, '');
+
// Hide any previously displayed help
- var oldHelp = document.getElementById(oldContentTheme.replace(/_/, '') + '-help');
+ var oldHelp = document.getElementById(safeOldContentTheme.replace(/_/, '') + '-help');
if (oldHelp) oldHelp.style.display = 'none';
// Show any specific help for selected contentTheme
- var help = document.getElementById(contentTheme.replace(/_/, '') + '-help');
+ var help = document.getElementById(safeContentTheme.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';
+
+ // Safely handle description element IDs
+ var safeThemeBase = theme.replace(/_.*$/, '').replace(/[^a-zA-Z0-9-]/g, '');
+
// Show description for auto themes
- var description = document.getElementById('kiwix-' + theme.replace(/_.*$/, '') + '-description');
+ var description = document.getElementById('kiwix-' + safeThemeBase + '-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) {
@@ -913,7 +933,8 @@ function applyAppTheme (theme) {
link.setAttribute('id', 'kiwixJSTheme');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
- link.setAttribute('href', prefix + '/css/kiwixJS' + contentTheme + '.css');
+ var safeContentThemeForURL = contentTheme.replace(/[^a-zA-Z0-9_-]/g, '');
+ link.setAttribute('href', prefix + '/css/kiwixJS' + safeContentThemeForURL + '.css');
doc.head.appendChild(link);
}
}