Pour Joomla 5.1

Voici une solution alternative car la solution est déjà dans le profil. Cela consiste à créer un module personnalisé en backend et de coller le code fourni ici.

1. Modifier votre compte en haut à droite (menu utilisateur) afin de choisir l'éditeur CodeMirror dans l'onglet "paramètres de base" ( L'éditeur TinyMCE ou similaire pourrait potentiellement endommager le code lors de l'enregistrement).


2. Dans l'administration de joomla, choisissez système, module 'administration' puis Module personnalisé, cliquer sur le bouton "nouveau"

3. Donner un titre : 🌓 Commutateur de mode sombre

4. Choisissez la position "status" et masquer le titre.

5. copier et coller le code suivant

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

6. Enregistrer et tester !
Vous avez désormais le bouton switch pour atum. Votre choix est conservé dans le navigateur en localstorage.