Joomla! 5.1 Control panel change color scheme.

README.md

Русский

Создайте модуль HTML для панели управления в позиции status и вставите туда код

English

Create an HTML module for the control panel in the 'status' position and insert the code there.

joomla-cp_color_scheme_change.html

<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>