Switch to other style with one click

I think it could work. The solution in that thread suggests changing out the stylesheet, which is kind of heavy handed. The simplest way would be to add a class to the body element called something like dark-mode and then use that to override the styles.

For instance, this would make the background dark:

.dark-mode {
  background: #333;
}

And something like this would make the menu items white:

.dark-mode .menu-items-primary a {
  color: #fff;
}

This is nicer because you can always load this small stylesheet, and it will apply automatically if the body element has the class dark-mode. You could combine dark mode CSS for both WP and phpBB in the same file or use separate files.

Toggling this class on the body element when the user clicks a button is easy. You can use the toggleClass() jQuery method. As for the local storage, you’ll just need to save whether or not the user enabled dark mode and then add the dark-mode class to the body element if that’s true. I don’t know a whole lot about using local browser storage, but it shouldn’t be too difficult because you only need one boolean value.

• This reply was modified 2 years, 2 months ago by Ben Sibley.

I will try soon. I’ll let you know the result…

Hi Ben,
I edited almost the whole theme’s color css. First I thought of doing it with “prefers-color-scheme: dark”. But then I thought it would be nice to have a choice, so I added a class like you said.

.koyu-modumuz .archive .post-content, .koyu-modumuz .home .post-content {
    color: #b9b9b9;
}

But for some reason I couldn’t get the toggleClass() code to run or find one that worked. Can you help with this? How can I do it simply?

Something came to my mind: Can’t we do this with a css file that will be added to the head section under the other style links? Wouldn’t other style edits be overridden when it’s at the bottom? I couldn’t find exactly how to do this either. ??

One more thing, on mobile we cannot change the colors of the svg icon of the button we open and close the menu.

It’s animated and when I look at it it’s pulled with php. How can I change its color?

Thanks x3.

Halil,

Here’s the simplest example code you can use:

$('#dark-mode-button').on('click', function(){
  $('body').toggleClass('dark-mode');
});

Add a button to the page and give it an ID of “dark-mode-button” and then whenever it’s clicked, it will toggle a class called “dark-mode” on the body element.

Also, I’m looking at your CSS again, and you also need to remove the space between the dark mode class and the page type class.

For instance, this selector:

.koyu-modumuz .archive .post-content

Should look like this:

.koyu-modumuz.archive .post-content

The archive class is also on the body element, so if there is a space before it, the browser is looking for a child element with a class called archive when it’s also on the body element.

Lastly, it is possible to change the color of the SVG like this:

.toggle-navigation svg g {
	fill: blue;
}

Thank you. After much effort, I realized that I had to add the code as follows:

jQuery(document).ready(function( $ ){
	$('a.koyumoduacbakalim').on('click', function(){
		$('body').toggleClass('koyu-modumuz');
	});
});

It works. But there is a problem. When I refresh the page or go to another page, everything is as before.

As a solution to this I found this:
https://stackoverflow.com/a/42400984

But my JS knowledge is very poor. How can I use this?

I don’t have experience with using localStorage, but I sketched out an adaptation of how it would look for your situation:

if (localStorage.getItem('darkMode') === 'true') {
    $('body').addClass('koyu-modumuz');
}
jQuery(document).ready(function( $ ){
	$('a.koyumoduacbakalim').on('click', function(){
		$('body').toggleClass('koyu-modumuz');
                localStorage.setItem('darkMode', $('body').hasClass('koyu-modumuz'));
	});
});

This is getting outside the scope of theme support though, so I’m not going to be able to debug or guarantee this works for your site.

Hello again Ben,
I refactored the code as follows with help from elsewhere.

footer

<script>
jQuery(document).ready(function( $ ){
	$("a.koyumoduacbakalim").on("click", function (e) {
		$("html").toggleClass("koyu-modumuz");
		$('meta[name="theme-color"]').attr("content", $('meta[name="theme-color"]').attr("content") === "#fff" ? "#000" : "#fff");

		if ($("html").hasClass("koyu-modumuz")) {
			localStorage['theme'] = 'koyu-modumuz';
		} else {
          	localStorage.removeItem("theme");
		}
		e.preventDefault();
	});
});
</script>

head

<script>
	if (localStorage.theme) { 
		document.documentElement.classList.add(localStorage.theme);
		document.querySelector('meta[name="theme-color"]').setAttribute("content", "#000");
	}
</script>

It works as it should.
Thank you so much.

• This reply was modified 1 year, 12 months ago by Halil ESEN.

Hello again for this topic,

My final code is as follows:

<script>
jQuery(document).ready(function( $ ){
	$("a.koyumoduacbakalim").on("click", function (e) {
		$("html").toggleClass("koyu-modumuz");
		$('meta[name="theme-color"]').attr("content", $('meta[name="theme-color"]').attr("content") === "#fff" ? "#000" : "#fff");

		if ($("html").hasClass("koyu-modumuz")) {
			localStorage.setItem("theme", "koyu-modumuz");
		} else {
          	localStorage.removeItem("theme");
		}
		e.preventDefault();
	});
});
</script>

Is it possible for the browser or device to be detected as (prefers-color-scheme: dark) while in dark mode, and if not dark mode detected as (prefers-color-scheme: light)?

Unfortunately, this isn’t a standardized feature yet, even though it’d be really nice. Chrome has a way to detect if it’s set in dark mode, but it’s pretty convoluted: https://developer.chrome.com/blog/auto-dark-theme/