Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
WIKIPARTNER
LIGHT / DARK THEME SYSTEM
============================================================ */
(function () {
'use strict';
var STORAGE_KEY = 'wikipartner-theme';
var LIGHT = 'light';
var DARK = 'dark';
/* ========================================================
STORAGE
======================================================== */
function getSavedTheme() {
try {
var saved = window.localStorage.getItem(STORAGE_KEY);
if (saved === DARK || saved === LIGHT) {
return saved;
}
} catch (e) {
/* localStorage unavailable */
}
return LIGHT;
}
function saveTheme(theme) {
try {
window.localStorage.setItem(STORAGE_KEY, theme);
} catch (e) {
/* localStorage unavailable */
}
}
/* ========================================================
APPLY THEME
======================================================== */
function applyTheme(theme, shouldSave) {
var html = document.documentElement;
var isDark = theme === DARK;
html.classList.toggle('wp-theme-dark', isDark);
html.classList.toggle('wp-theme-light', !isDark);
/*
* Also expose standard MediaWiki-style theme classes.
* This allows extensions/components that understand
* these classes to respond too.
*/
html.classList.remove(
'skin-theme-clientpref-day',
'skin-theme-clientpref-night',
'skin-theme-clientpref-os'
);
html.classList.add(
isDark
? 'skin-theme-clientpref-night'
: 'skin-theme-clientpref-day'
);
html.setAttribute(
'data-wikipartner-theme',
isDark ? DARK : LIGHT
);
if (shouldSave !== false) {
saveTheme(theme);
}
updateThemeButton();
}
/* ========================================================
CURRENT THEME
======================================================== */
function getCurrentTheme() {
return document.documentElement.classList.contains(
'wp-theme-dark'
) ? DARK : LIGHT;
}
/* ========================================================
ICONS
======================================================== */
function getMoonIcon() {
return [
'<svg viewBox="0 0 24 24" aria-hidden="true">',
'<path ',
'd="M20.3 15.2A8.4 8.4 0 0 1 8.8 3.7 ',
'8.5 8.5 0 1 0 11.5 11.5Z"',
'></path>',
'<path ',
'class="wp-theme-star" ',
'd="M17.5 4v3M16 5.5h3"',
'></path>',
'<path ',
'class="wp-theme-star wp-theme-star-small" ',
'd="M20.2 8.8v1.8M19.3 9.7h1.8"',
'></path>',
'</svg>'
].join('');
}
function getSunIcon() {
return [
'<svg viewBox="0 0 24 24" aria-hidden="true">',
'<circle cx="12" cy="12" r="3.8"></circle>',
'<path d="M12 2.3v2.1"></path>',
'<path d="M12 19.6v2.1"></path>',
'<path d="M4.93 4.93l1.5 1.5"></path>',
'<path d="M17.57 17.57l1.5 1.5"></path>',
'<path d="M2.3 12h2.1"></path>',
'<path d="M19.6 12h2.1"></path>',
'<path d="M4.93 19.07l1.5-1.5"></path>',
'<path d="M17.57 6.43l1.5-1.5"></path>',
'</svg>'
].join('');
}
/* ========================================================
UPDATE BUTTON
======================================================== */
function updateThemeButton() {
var button = document.getElementById(
'wikipartner-theme-toggle'
);
if (!button) {
return;
}
var isDark = getCurrentTheme() === DARK;
button.innerHTML =
'<span class="wp-theme-icon">' +
(isDark ? getSunIcon() : getMoonIcon()) +
'</span>';
button.setAttribute(
'aria-label',
isDark
? 'Switch to light mode'
: 'Switch to dark mode'
);
button.setAttribute(
'title',
isDark
? 'Light mode'
: 'Dark mode'
);
}
/* ========================================================
CREATE BUTTON
======================================================== */
function createThemeToggle() {
if (
document.getElementById(
'wikipartner-theme-toggle'
)
) {
return;
}
/*
* WikiPartner's MediaWiki user menu.
*/
var list = document.querySelector(
'.wp-user-menu-list'
);
if (!list) {
return;
}
var item = document.createElement('li');
item.id = 'wikipartner-theme-item';
item.className =
'mw-list-item wikipartner-theme-item';
var button = document.createElement('button');
button.id = 'wikipartner-theme-toggle';
button.className =
'wikipartner-theme-toggle';
button.type = 'button';
button.addEventListener(
'click',
function () {
var nextTheme =
getCurrentTheme() === DARK
? LIGHT
: DARK;
applyTheme(nextTheme, true);
}
);
item.appendChild(button);
/*
* LOGGED OUT:
*
* Create account | Theme | Log in
*
* The requested position is immediately
* to the LEFT of Log in.
*/
var loginItem = list.querySelector('#pt-login');
if (loginItem) {
list.insertBefore(
item,
loginItem
);
} else {
/*
* LOGGED IN:
*
* Put theme button at beginning of
* account controls.
*/
list.insertBefore(
item,
list.firstChild
);
}
updateThemeButton();
}
/* ========================================================
INITIAL THEME
======================================================== */
/*
* Apply saved preference as soon as Common.js runs.
*/
applyTheme(
getSavedTheme(),
false
);
/* ========================================================
INITIALIZE HEADER BUTTON
======================================================== */
function initialize() {
createThemeToggle();
updateThemeButton();
}
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
initialize
);
} else {
initialize();
}
})();