Dark mode checkbox on home page for all users

  • Resolved jeanvictorgg

    (@jeanvictorgg)


    4 years, 8 months ago

    Hi, I want to create a checkbox to Dark mode theme option in Menu or in Footer. I copied the code below but doesnt worked for me:

    <span class="customize-inside-control-row">
<input id="_customize-input-hamilton_dark_mode" aria-describedby="_customize-description-hamilton_dark_mode" type="checkbox" value="" data-customize-setting-link="hamilton_dark_mode">
					<label for="_customize-input-hamilton_dark_mode">Modo escuro</label>
											<span id="_customize-description-hamilton_dark_mode" class="description customize-control-description"></span>
</span>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @jeanvictorgg,

    The dark mode CSS is applied when the dark-mode class is applied to the body element, so it’s not too difficult to make it a visitor option (but too involved for it to be described in detail here). In short, you’ll have to change add or remove the body class when the checkbox is clicked, store the user option as a cookie or in local storage, and read the stored value on load.

    — Anders

    Thread Starter jeanvictorgg

    (@jeanvictorgg)

    Hi, thank you for all. I did it, here’s the result:

    <input id="night-mode" class="lamp" type="checkbox" aria-label="night-mode" />
			<label>Dark Mode</label>
			
			<script>
					const nightModeStorage = localStorage.getItem('gmtNightMode')
					const nightMode = document.querySelector('#night-mode')
					
					const metaThemeColor = document.querySelector('meta[name=theme-color]')
				
					if (nightModeStorage) {
					  document.documentElement.classList.add('night-mode');
					  document.body.classList.add("dark-mode");
					  nightMode.checked = true
					}

					nightMode.addEventListener('click', () => {
					  document.documentElement.classList.toggle('night-mode');
					  document.body.classList.add("dark-mode");

					  if (document.documentElement.classList.contains('night-mode')) {
						localStorage.setItem('gmtNightMode', true)
						document.body.classList.add("dark-mode");
						return
					  }
					  
					  localStorage.removeItem('gmtNightMode');
					  document.body.classList.remove("dark-mode");
					})
			</script>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Dark mode checkbox on home page for all users’ is closed to new replies.