Recre Design

Ceci est un titre

Ceci est un titre

Ceci est un titre

Ceci est un titre

Ajoutez votre titre ici

Id bouton : fontIncrease

Id bouton : fontDecrease

CSS Class : cursor

A+
A- 
				
					<script>
    let currentSize = 100;

document.getElementById("fontIncrease").onclick = function() {
  currentSize += 10;
  document.querySelectorAll("p");
  document.body.style.fontSize = currentSize + "%";
};

document.getElementById("fontDecrease").onclick = function() {
  currentSize -= 10;
  document.body.style.fontSize = currentSize + "%";
};
</script>
				
			
				
					.cursor {
	cursor: pointer;
	user-select: none;
}
				
			
				
					<button id="toggleDarkMode">Mode sombre</button>
				
			
				
					<script>
   document.getElementById("toggleDarkMode").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>
				
			
				
					body.dark-mode {
  background: #111;
  color: #eee;
}

body.dark-mode a {
  color: #4da3ff;
}

Script Clair Sombre 

				
					<script>
let darkToggle = document.querySelector('#darkToggle');
let isDarkMode = localStorage.getItem('darkMode');

// Check if dark mode was previously enabled and set the initial state
if (isDarkMode === 'true') {
  document.body.classList.add('dark');
  document.querySelector('#lightModeImg').style.display = 'none';
  document.querySelector('#darkModeImg').style.display = 'block';
}

darkToggle.addEventListener('click', () => {
  if (document.body.classList.contains('dark')) {
    document.body.classList.remove('dark');
    document.querySelector('#lightModeImg').style.display = 'block';
    document.querySelector('#darkModeImg').style.display = 'none';
    localStorage.setItem('darkMode', 'false'); // Store the dark mode state
  } else {
    document.body.classList.add('dark');
    document.querySelector('#lightModeImg').style.display = 'none';
    document.querySelector('#darkModeImg').style.display = 'block';
    localStorage.setItem('darkMode', 'true'); // Store the dark mode state
  }
});
</script>

CSS Clair Sombre 

				
					#darkModeImg {display: none;}
#darkToggle {cursor: pointer;}
.dark {color: #ffffff;background: #333333;}
body.dark .headerbg {background-color: #5D9CC7;}
.wickylogo {fill:#333333;}
body.dark .wickylogo {fill:#ffffff;}
body.dark h1,h2,h3,h4{color:#ffffff;}
body.dark {
  --e-global-color-primary: #fff;
  --e-global-color-secondary: #fff;
  --e-global-color-text: #fff;
  --e-global-color-accent: #fff;
}
body.dark .elementor-button{background-color:#F9C059;}
body.dark .elementor-button:hover{background-color:#F9C059;}
body.dark .elementor-field{background-color:#fff;}
body.dark .bottomfooter {background-color: #5D9CC7!important;}
body.dark .footerright div{background-color: #333333!important;}
body.dark i{color:#ffffff;}

Faire un conteneur avec comme Id : darkToggle

Id : lightModeImg

Id : darkModeImg

Ceci est un

Saisissez ici votre

Test

fehf_ehfehf_hef_

isndisndidsnd

dsdsdisdin