Various dark mode and css handling improvements

Former-commit-id: d0a080bec32427dcf2b1b388ad3229ce8620f5b9 [formerly 3839a0289d22484a6c53c0ed5d3f5a952a85de88] Former-commit-id: ec3b64d503e20a4e11f8def1b84e86fddee2496f
2025-09-08 19:57:46 -04:00 · 2017-08-03 17:34:46 +01:00 · 2017-08-03 17:34:46 +01:00 · 6ff69e590c
commit 6ff69e590c
parent 6f30761378
14 changed files with 113 additions and 66 deletions
--- a/bin/Release/AppX/vs.appxrecipe
+++ b/bin/Release/AppX/vs.appxrecipe
@ -32,7 +32,7 @@
    <AppXManifest Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\bin\Release\AppxManifest.xml">
      <PackagePath>AppxManifest.xml</PackagePath>
      <ReRegisterAppIfChanged>true</ReRegisterAppIfChanged>
-      <Modified>2017-08-03T06:44:44.458</Modified>
+      <Modified>2017-08-03T16:11:24.322</Modified>
    </AppXManifest>
  </ItemGroup>
  <ItemGroup>
@ -371,7 +371,7 @@
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-dark.css">
      <PackagePath>www\-\s\style-dark.css</PackagePath>
-      <Modified>2017-08-03T06:44:19.647</Modified>
+      <Modified>2017-08-03T14:46:32.147</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-mobile.css">
      <PackagePath>www\-\s\style-mobile.css</PackagePath>
@ -379,7 +379,7 @@
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style.css">
      <PackagePath>www\-\s\style.css</PackagePath>
-      <Modified>2017-07-27T16:49:07.370</Modified>
+      <Modified>2017-08-03T13:54:24.424</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\vector.css">
      <PackagePath>www\-\s\vector.css</PackagePath>
@ -387,7 +387,7 @@
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\app.css">
      <PackagePath>www\css\app.css</PackagePath>
-      <Modified>2017-08-02T13:58:13.045</Modified>
+      <Modified>2017-08-03T16:01:31.768</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\bootstrap-theme.css">
      <PackagePath>www\css\bootstrap-theme.css</PackagePath>
@ -403,7 +403,7 @@
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\index.html">
      <PackagePath>www\index.html</PackagePath>
-      <Modified>2017-08-02T11:08:14.747</Modified>
+      <Modified>2017-08-03T14:16:34.242</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\favicon.ico">
      <PackagePath>www\favicon.ico</PackagePath>
@ -443,11 +443,11 @@
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\app.js">
      <PackagePath>www\js\app.js</PackagePath>
-      <Modified>2017-08-02T13:37:50.968</Modified>
+      <Modified>2017-08-03T13:25:41.310</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\init.js">
      <PackagePath>www\js\init.js</PackagePath>
-      <Modified>2017-07-31T12:00:36.763</Modified>
+      <Modified>2017-08-03T13:13:48.797</Modified>
    </AppxPackagedFile>
    <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\lib\abstractFilesystemAccess.js">
      <PackagePath>www\js\lib\abstractFilesystemAccess.js</PackagePath>
--- a/bin/Release/AppX/www/-/s/style-dark.css
+++ b/bin/Release/AppX/www/-/s/style-dark.css
@ -3,6 +3,14 @@
 * https://github.com/StylishThemes/Wikipedia-Dark
 * http://userstyles.org/styles/
 * Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded
+ * In turn, the styles have been modified to work with Kiwix JS and Kiwix JS Windows.
+ * The source file for this adapted version can be found at:
+ * https://github.com/kiwix/kiwix-js-windows/
+ *
+ * This CSS file is licensed with a CC-BY-SA Creative Commons Free Culture Licence:
+ * https://creativecommons.org/licenses/by-sa/4.0/ 
+ * This licence applies *only* to this CSS file within the Kiwix JS and Kiwix JS Windows projects.
+ *
 */

  /* transparent background */
@ -132,8 +140,14 @@ a, .CategoryTreeToggle, #toc a, #toc a span, body .ui-button {
    background-color: #222 !important;
  }

-.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor], tr[bgcolor] {
-    background-color: darkslategray !important
+.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor] {
+    background-color: darkslategray !important;
+    border-color: #555 !important;
+}
+
+tr[bgcolor] {
+    background-color: #2F3F4F !important;
+    border-color: #524B4B !important;
 }

  body .ui-button
@ -174,7 +188,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
  }
  /* add a white background to transparent images; see
   * https://forum.userstyles.org/discussion/48549/x */
-  img[data-kiwixsrc$=".svg"], a.image img, a[href*=".svg"] img {
+  img[data-kiwixsrc$=".svg"], img[data-kiwixsrc*="Kiwix_logo"], a.image img, a[href*=".svg"] img {
    background: #ddd !important;
  }

@ -183,7 +197,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
    background: #fff !important;
  }

-blockquote[style*="background-color: white"] {
+blockquote[style*="white"] {
    background-color: black !important;
    color: lightgray !important;
 }
@ -207,16 +221,16 @@ blockquote[style*="background-color: white"] {
    background: #244024 !important;
  }

-/* Blue 
-  div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
-  .navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
-  div[style*="background: #444444;"], div[style*="background: #444444;"] *,
-  ol.references li:target, sup.reference:target, span.citation:target,
-  ol.references li:target *, sup.reference:target *, span.citation:target *,
-  td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
-  div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
-    background-color: #182030 !important;
-  } */
+  /* Blue */
+div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
+.navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
+div[style*="background: #444444;"], div[style*="background: #444444;"] *,
+ol.references li:target, sup.reference:target, span.citation:target,
+ol.references li:target *, sup.reference:target *, span.citation:target *,
+td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
+div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
+    background-color: black !important;
+}

  .navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title,
  .navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * {
@ -324,16 +338,16 @@ td[style*="border-bottom"] {
  }

  /*** invert images ***/
-  img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
-  #mw-wsmfinal-close, img[src*="Speaker_Icon"], .infobox img[alt*="structure"][src*=".svg"], img[src*=".png"]:active,
-  img[src*=".svg"][height="16"], img[src*=".svg"][height="17"], img[src*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix"],
-  .oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
-  #pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
-  #pt-notifications-alert .mw-echo-notifications-badge:before {
+img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
+#mw-wsmfinal-close, img[data-kiwixsrc*="Speaker_Icon"], .infobox img[alt*="structure"][data-kiwixsrc*=".svg"], .infobox img[data-file-type*="drawing"][data-kiwixsrc*=".svg"], img[data-kiwixsrc*=".png"]:active,
+img[data-kiwixsrc*=".svg"][height="16"], img[data-kiwixsrc*=".svg"][height="17"], img[data-kiwixsrc*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"],
+.oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
+#pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
+#pt-notifications-alert .mw-echo-notifications-badge:before {
    -webkit-filter: invert(100%) !important;
-            filter: invert(100%) !important;
+    filter: invert(100%) !important;
    background-color: transparent !important;
-  }
+}
  .oo-ui-icon-bell {
    opacity: 0.7 !important;
  }
--- a/bin/Release/AppX/www/-/s/style.css
+++ b/bin/Release/AppX/www/-/s/style.css
--- a/bin/Release/AppX/www/css/app.css
+++ b/bin/Release/AppX/www/css/app.css
@ -88,7 +88,7 @@
    float: left;
    margin: 5px;
    padding: 10px;
-    max-width: 300px;
+    max-width: 500px;
    min-height: 150px;
    border: 1px solid black;
 }
--- a/bin/Release/AppX/www/index.html
+++ b/bin/Release/AppX/www/index.html
@ -205,12 +205,16 @@
                            <div id="cssSettingsDiv" class="settings">
                                <p>Please select the display style:</p>
                                <p style="text-indent: -22px; margin-left: 20px;">
-                                    <input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" checked="checked" value="desktop">
-                                    <b>&nbsp;Use Wikimedia desktop display style</b> (for Wikipedia files)
+                                    <input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
+                                    <b>&nbsp;Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
+                                </p>
+                                <p style="text-indent: -22px; margin-left: 20px;">
+                                    <input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
+                                    <b>&nbsp;Use Wikimedia desktop display style</b> (and transform if necessary)
                                </p>                               
                                <p style="text-indent: -22px; margin-left: 20px;">
                                    <input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio">
-                                    <b>&nbsp;Use Wikimedia mobile display style</b> (for Wikipedia files)
+                                    <b>&nbsp;Use Wikimedia mobile display style</b> (and transform if necessary)
                                </p>
                            </div>
                            <div id="displaySettingsDiv" class="settings">
@ -239,6 +243,7 @@
                        </td>
                    </tr>
                </table>
+                <div id="returntoArticle_bottom" style="text-align: center;"></div>
                <h2>Expert settings</h2>
                <div id="contentInjectionModeDiv">
                    Do not touch unless you know what you're doing. <br />
@ -250,7 +255,6 @@
                <div id="serviceWorkerStatus"></div>
                <div id="messageChannelStatus"></div>
                <br />
-                <div id="returntoArticle_bottom" style="text-align: center;"></div>
            </div>
            <div id="welcomeText" class="container category-padding">
                You can search the content of your ZIM archive by typing in the above search field.
--- a/bin/Release/AppX/www/js/app.js
+++ b/bin/Release/AppX/www/js/app.js
@ -895,6 +895,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
            var testCSS = arr.join();
            zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType;
            zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType;
+            cssSource = cssSource == "auto" ? zimType : cssSource; //Default to in-built zimType if user has selected automatic detection of styles
            if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) {
                //Substitute ridiculously long style name TODO: move this code to transformStyles
                for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles
--- a/bin/Release/AppX/www/js/init.js
+++ b/bin/Release/AppX/www/js/init.js
@ -23,7 +23,7 @@
 'use strict';
 var params = {};
 var results = params['results'] || 10; //Number of search results to display
-params['cssSource'] = params['cssSource'] || "desktop"; //Set default to "desktop" or "mobile"
+params['cssSource'] = params['cssSource'] || "auto"; //Set default to "auto", "desktop" or "mobile"
 params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only
 params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
 params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI
--- a/www/-/s/style-dark.css
+++ b/www/-/s/style-dark.css
@ -3,6 +3,14 @@
 * https://github.com/StylishThemes/Wikipedia-Dark
 * http://userstyles.org/styles/
 * Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded
+ * In turn, the styles have been modified to work with Kiwix JS and Kiwix JS Windows.
+ * The source file for this adapted version can be found at:
+ * https://github.com/kiwix/kiwix-js-windows/
+ *
+ * This CSS file is licensed with a CC-BY-SA Creative Commons Free Culture Licence:
+ * https://creativecommons.org/licenses/by-sa/4.0/ 
+ * This licence applies *only* to this CSS file within the Kiwix JS and Kiwix JS Windows projects.
+ *
 */

  /* transparent background */
@ -132,8 +140,14 @@ a, .CategoryTreeToggle, #toc a, #toc a span, body .ui-button {
    background-color: #222 !important;
  }

-.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor], tr[bgcolor] {
-    background-color: darkslategray !important
+.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor] {
+    background-color: darkslategray !important;
+    border-color: #555 !important;
+}
+
+tr[bgcolor] {
+    background-color: #2F3F4F !important;
+    border-color: #524B4B !important;
 }

  body .ui-button
@ -183,7 +197,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
    background: #fff !important;
  }

-blockquote[style*="background-color: white"] {
+blockquote[style*="white"] {
    background-color: black !important;
    color: lightgray !important;
 }
@ -207,16 +221,16 @@ blockquote[style*="background-color: white"] {
    background: #244024 !important;
  }

-/* Blue 
-  div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
-  .navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
-  div[style*="background: #444444;"], div[style*="background: #444444;"] *,
-  ol.references li:target, sup.reference:target, span.citation:target,
-  ol.references li:target *, sup.reference:target *, span.citation:target *,
-  td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
-  div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
-    background-color: #182030 !important;
-  } */
+  /* Blue */
+div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
+.navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
+div[style*="background: #444444;"], div[style*="background: #444444;"] *,
+ol.references li:target, sup.reference:target, span.citation:target,
+ol.references li:target *, sup.reference:target *, span.citation:target *,
+td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
+div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
+    background-color: black !important;
+}

  .navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title,
  .navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * {
@ -324,16 +338,16 @@ td[style*="border-bottom"] {
  }

  /*** invert images ***/
-  img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
-  #mw-wsmfinal-close, img[src*="Speaker_Icon"], .infobox img[alt*="structure"][src*=".svg"], img[src*=".png"]:active,
-  img[src*=".svg"][height="16"], img[src*=".svg"][height="17"], img[src*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"],
-  .oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
-  #pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
-  #pt-notifications-alert .mw-echo-notifications-badge:before {
+img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
+#mw-wsmfinal-close, img[data-kiwixsrc*="Speaker_Icon"], .infobox img[alt*="structure"][data-kiwixsrc*=".svg"], .infobox img[data-file-type*="drawing"][data-kiwixsrc*=".svg"], img[data-kiwixsrc*=".png"]:active,
+img[data-kiwixsrc*=".svg"][height="16"], img[data-kiwixsrc*=".svg"][height="17"], img[data-kiwixsrc*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"],
+.oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
+#pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
+#pt-notifications-alert .mw-echo-notifications-badge:before {
    -webkit-filter: invert(100%) !important;
-            filter: invert(100%) !important;
+    filter: invert(100%) !important;
    background-color: transparent !important;
-  }
+}
  .oo-ui-icon-bell {
    opacity: 0.7 !important;
  }
--- a/www/-/s/style-darkSimple.css
+++ b/www/-/s/style-darkSimple.css
@ -0,0 +1,8 @@
+html, img, video {
+   -webkit-filter: invert(1) hue-rotate(180deg);
+   filter: invert(1) hue-rotate(180deg);
+ }
+
+body {
+  background: black;
+}
--- a/www/-/s/style.css
+++ b/www/-/s/style.css
--- a/www/css/app.css
+++ b/www/css/app.css
@ -88,7 +88,7 @@
    float: left;
    margin: 5px;
    padding: 10px;
-    max-width: 300px;
+    max-width: 500px;
    min-height: 150px;
    border: 1px solid black;
 }
--- a/www/index.html
+++ b/www/index.html
@ -205,12 +205,16 @@
                            <div id="cssSettingsDiv" class="settings">
                                <p>Please select the display style:</p>
                                <p style="text-indent: -22px; margin-left: 20px;">
-                                    <input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" checked="checked" value="desktop">
-                                    <b>&nbsp;Use Wikimedia desktop display style</b> (for Wikipedia files)
+                                    <input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
+                                    <b>&nbsp;Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
+                                </p>
+                                <p style="text-indent: -22px; margin-left: 20px;">
+                                    <input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
+                                    <b>&nbsp;Use Wikimedia desktop display style</b> (and transform if necessary)
                                </p>                               
                                <p style="text-indent: -22px; margin-left: 20px;">
                                    <input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio">
-                                    <b>&nbsp;Use Wikimedia mobile display style</b> (for Wikipedia files)
+                                    <b>&nbsp;Use Wikimedia mobile display style</b> (and transform if necessary)
                                </p>
                            </div>
                            <div id="displaySettingsDiv" class="settings">
@ -232,13 +236,13 @@
                                </p>
                                <p style="text-indent: -22px; margin-left: 20px;">
                                    <input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">
-                                    <b>&nbsp;Use a dark theme for Wikimedia articles</b> (this may not work on non-Wikipedia ZIM files)
+                                    <b>&nbsp;Use a dark theme for Wikimedia articles</b> (<i>experimental</i> and may only work for Wikipedia ZIM files)
                                </p>
                            </div>
-
                        </td>
                    </tr>
                </table>
+                <div id="returntoArticle_bottom" style="text-align: center;"></div>
                <h2>Expert settings</h2>
                <div id="contentInjectionModeDiv">
                    Do not touch unless you know what you're doing. <br />
@ -250,7 +254,6 @@
                <div id="serviceWorkerStatus"></div>
                <div id="messageChannelStatus"></div>
                <br />
-                <div id="returntoArticle_bottom" style="text-align: center;"></div>
            </div>
            <div id="welcomeText" class="container category-padding">
                You can search the content of your ZIM archive by typing in the above search field.
--- a/www/js/app.js
+++ b/www/js/app.js
@ -895,6 +895,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
            var testCSS = arr.join();
            zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType;
            zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType;
+            cssSource = cssSource == "auto" ? zimType : cssSource; //Default to in-built zimType if user has selected automatic detection of styles
            if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) {
                //Substitute ridiculously long style name TODO: move this code to transformStyles
                for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles
--- a/www/js/init.js
+++ b/www/js/init.js
@ -23,7 +23,7 @@
 'use strict';
 var params = {};
 var results = params['results'] || 10; //Number of search results to display
-params['cssSource'] = params['cssSource'] || "desktop"; //Set default to "desktop" or "mobile"
+params['cssSource'] = params['cssSource'] || "auto"; //Set default to "auto", "desktop" or "mobile"
 params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only
 params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
 params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI