const darkModeDefault = 'auto';
// CSS class used to set Dark Mode properties
const DARK_MODE_CSS = 'dark-mode';
// LocalStorage key used to store Dark Mode state
const DARK_MODE_STORAGE = 'dark-mode';
// CSS id used for Dark Mode icon
const DARK_MODE_ICON = "icon-darkmode"; // could be `icon-${DARK_MODE_CSS}`;
// CSS id used for Dark Mode button
const DARK_MODE_BUTTON = "dark-mode-button"; // could be `button-${DARK_MODE_CSS}`;
const DARK_MODE_MODES = ["auto", "dark", "light"];
const systemModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const modeSymbols = {
'dark': ``, // moon icon
'light': ``, // sun icon
'auto': `` // sun / moon icon
}
const darkModeToggleText = {
'en': 'Toggle Dark Mode',
'de': 'Dark Mode umschalten',
'fr': 'Activer le mode sombre',
'es': 'Alternar Modo Obscuro',
'hu': 'Sötét mód be/ki',
'it': 'Attiva/Disattiva modalità scura',
'nl': 'Toggle Dark Mode',
'pl': 'Toggle Dark Mode',
'pt': 'Alternar Modo Escuro',
'ru': 'Смена оформления',
'he': 'מצב לילה',
'hi': 'डार्क मोड'
}[defaultUserLanguage()] || 'Toggle Dark Mode';
const toggleButton = ``;
function getDarkModeSetting() {
let mode = localStorage.getItem(DARK_MODE_STORAGE);
if (mode === null || DARK_MODE_MODES.indexOf(mode) == -1) {
// If the setting is missing or not one of the valid options initialize storage to the default
localStorage.setItem(DARK_MODE_STORAGE, darkModeDefault);
}
return localStorage.getItem(DARK_MODE_STORAGE);
}
function getDarkModeIcon() {
return ``;
}
function toggleDarkMode() {
// Cycle through modes
const nextMode = DARK_MODE_MODES[(DARK_MODE_MODES.indexOf(getDarkModeSetting()) + 1) % DARK_MODE_MODES.length];
localStorage.setItem(DARK_MODE_STORAGE, nextMode);
maybeModeChange();
updateButton(nextMode);
}
function switchToMode(targetMode) {
if (targetMode == 'dark') {
document.body.classList.add(DARK_MODE_CSS);
} else {
document.body.classList.remove(DARK_MODE_CSS);
}
}
function maybeModeChange() {
const userMode = getDarkModeSetting();
const systemMode = (systemModeMediaQuery.matches ? 'dark' : 'light');
if (userMode === "auto") {
switchToMode(systemMode);
} else {
switchToMode(userMode);
}
}
function updateButton(mode) {
const darkModeButton = $(`#${DARK_MODE_BUTTON}`);
darkModeButton.html(getDarkModeIcon());
darkModeButton.attr('data-title', `${darkModeToggleText}, current: ${mode}`);
}
function addDarkModeToggle() {
const sidebarToolbar = $('.rcx-sidebar-topbar .rcx-button-group').first();
// wait for the sidebar toolbar to be visible
// this will also be false if the toolbar doesn't exist yet
if(!sidebarToolbar.is(':visible')) {
setTimeout(addDarkModeToggle, 250);
return;
}
var darkModeButton = $(`#${DARK_MODE_BUTTON}`);
// do nothing if button is already on the screen
if (darkModeButton.is(':visible')) {
return;
}
darkModeButton = $(toggleButton).prependTo(sidebarToolbar);
updateButton(getDarkModeSetting());
darkModeButton.on('click', function() {
toggleDarkMode();
$(this).blur();
});
// Switch mode on system theme changes
systemModeMediaQuery.addEventListener("change", maybeModeChange);
// Trigger initial mode change if necessary
maybeModeChange();
}
$(addDarkModeToggle);