Создайте модуль HTML для панели управления в позиции status и вставите туда код
Create an HTML module for the control panel in the 'status' position and insert the code there.
<div class="header-item-content dms-button" data-color-scheme-changer="container"> | |
<button type="button" class="header-item-icon bg-transparent border-0" data-color-scheme-changer="light"> | |
<span style="margin: 3px; font-size: 1.2rem; transition: all .6s ease;">☀️</span> | |
</button> | |
<button type="button" class="header-item-icon bg-transparent border-0" data-color-scheme-changer="dark"> | |
<span style="margin: 3px; font-size: 1.2rem; transition: all .6s ease;">🌙</span> | |
</button> | |
<button type="button" class="header-item-icon bg-transparent border-0" data-color-scheme-changer="auto"> | |
<span style="margin: 3px; font-size: 1.2rem; transition: all .6s ease;">🌓</span> | |
</button> | |
</div> | |
<script> | |
(() => { | |
'use strict'; | |
let documentElement = document.documentElement; | |
function changeScheme(colorScheme = 'light') { | |
if (colorScheme !== 'light' && colorScheme !== 'dark') { | |
return; | |
} | |
if (documentElement.dataset.colorScheme === colorScheme) { | |
return; | |
} | |
documentElement.dataset.colorScheme = colorScheme; | |
document.cookie = 'userColorScheme=' + colorScheme + '; SameSite=Strict;'; | |
documentElement.dataset.colorScheme = colorScheme; | |
document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', {bubbles: true})); | |
} | |
function initialization() { | |
checkButtons(); | |
loadAutoScheme(); | |
document.querySelectorAll('button[data-color-scheme-changer]').forEach((button) => { | |
let buttonScheme = button.getAttribute('data-color-scheme-changer'); | |
button.addEventListener('click', (event) => { | |
event.preventDefault(); | |
if (buttonScheme === 'dark' || buttonScheme === 'light') { | |
setLocalStorageValue(buttonScheme); | |
changeScheme(buttonScheme); | |
checkButtons(); | |
} else if (buttonScheme === 'auto') { | |
setLocalStorageValue('auto'); | |
loadAutoScheme(); | |
checkButtons(); | |
} | |
}) | |
}); | |
} | |
function loadAutoScheme() { | |
if (getLocalStorageValue() !== 'auto') { | |
return; | |
} | |
let hour = new Date().getHours(), | |
scheme = (hour >= 7 && hour < 19) ? 'light' : 'dark'; | |
changeScheme(scheme); | |
} | |
function checkButtons() { | |
let currentScheme = getLocalStorageValue(); | |
document.querySelectorAll('button[data-color-scheme-changer]').forEach((button) => { | |
if (button.getAttribute('data-color-scheme-changer') === currentScheme) { | |
button.style.opacity = 1; | |
} else { | |
button.style.opacity = 0.3; | |
} | |
}) | |
} | |
function getLocalStorageValue() { | |
let storageValue = localStorage.getItem('colorSchemeChanger'); | |
if (!storageValue && documentElement.dataset.colorScheme) { | |
storageValue = documentElement.dataset.colorScheme; | |
setLocalStorageValue(storageValue) | |
} else if (!storageValue) { | |
storageValue = 'light'; | |
} | |
if (!documentElement.dataset.colorScheme && storageValue !== 'auto') { | |
changeScheme(storageValue); | |
} | |
return storageValue; | |
} | |
function setLocalStorageValue(value) { | |
localStorage.setItem('colorSchemeChanger', value); | |
} | |
document.addEventListener('DOMContentLoaded', initialization); | |
document.addEventListener('joomla:color-scheme-change', () => { | |
getLocalStorageValue(); | |
checkButtons(); | |
}); | |
})(); | |
</script> |