diff --git a/custom.js b/custom.js index f3c2d16..e9d1f5b 100644 --- a/custom.js +++ b/custom.js @@ -1,27 +1,31 @@ const darkModeDefault = false; -const darkModeSymbol = ` - +// 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 darkModeSymbol = ` + `; // moon icon -const lightModeSymbol = ` - - - - - - - - - +const lightModeSymbol = ` + `; // sun icon const darkModeToggleText = { 'en': 'Toggle Dark Mode', 'de': 'Dark Mode umschalten', - 'fr': 'Toggle Dark Mode', + 'fr': 'Activer le mode sombre', 'es': 'Alternar Modo Obscuro', 'hu': 'Sötét mód be/ki', - 'it': 'Toggle Dark Mode', + 'it': 'Attiva/Disattiva modalità scura', 'nl': 'Toggle Dark Mode', 'pl': 'Toggle Dark Mode', 'pt': 'Alternar Modo Escuro', @@ -30,27 +34,27 @@ const darkModeToggleText = { 'hi': 'डार्क मोड' }[defaultUserLanguage()] || 'Toggle Dark Mode'; -const toggleButton = ``; +const toggleButton = ``; function isDarkModeSet() { - return localStorage.getItem('dark-mode') === 'true'; + return localStorage.getItem(DARK_MODE_STORAGE) === 'true'; } function getDarkModeIcon() { return ``; } function toggleDarkMode() { - document.body.classList.toggle('dark-mode'); + document.body.classList.toggle(DARK_MODE_CSS); const setting = (!isDarkModeSet()).toString(); - localStorage.setItem('dark-mode', setting); + localStorage.setItem(DARK_MODE_STORAGE, setting); } function addDarkModeToggle() { - const sidebarToolbar = $('.rcx-\\@vi4iz8').first(); + 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 @@ -59,7 +63,7 @@ function addDarkModeToggle() { return; } - var darkModeButton = $('#dark-mode-button'); + var darkModeButton = $(`#${DARK_MODE_BUTTON}`); // do nothing if button is already on the screen if (darkModeButton.is(':visible')) { @@ -77,14 +81,14 @@ function addDarkModeToggle() { } if (darkModeDefault) { - if (localStorage.getItem("dark-mode") === null) { - localStorage.setItem('dark-mode', 'true'); + if (localStorage.getItem(DARK_MODE_STORAGE) === null) { + localStorage.setItem(DARK_MODE_STORAGE, 'true'); } } $(addDarkModeToggle); // Apply dark mode immediately if it's been set previously -if(localStorage.getItem('dark-mode') === 'true') { - document.body.classList.add('dark-mode'); -} \ No newline at end of file +if(localStorage.getItem(DARK_MODE_STORAGE) === 'true') { + document.body.classList.add(DARK_MODE_CSS); +}