heikkivihersalo/checkSchemeCookie.js

## checkSchemeCookie.js
/**
 * Checks preferred color-scheme on page load
 *
 * Adds CSS class inside website <html> tag to control preferred color-scheme.
 * Class for light-scheme: 'color-scheme--light'
 * Class for dark-scheme: 'color-scheme--dark'
 *
 * Uses color-scheme cookie
 *
 */

/* Create variables */
const cookies = document.cookie.split(";");
const classes = document.getElementsByTagName("html")[0].classList;

/**
 * Check the value of color-scheme.
 * If correct cookie is found, add scheme class to <html>
 */

/* Dark Mode */
if (cookies.some((c) => c.includes("color-scheme=dark"))) {
  classes.add("color-scheme--dark");

  /* Light Mode */
} else if (cookies.some((c) => c.includes("color-scheme=light"))) {
  classes.add("color-scheme--light");
}

## example.css
/**
 * It is highly advisable to use CSS variables to configure colors
 *
 */

html {
  /* Default site color-scheme */
}

html.color-scheme--dark {
  /* Default site color-scheme but want to use dark scheme */
}

@media (prefers-color-scheme: dark) {

  html {
    /* Styling for clients who prefer color-scheme: dark */
  }

  html.color-scheme--light {
    /* Styling for clients who prefer color-scheme: dark but want to use light theme */
  }

}

## register_color_scheme.php
<?php
/**
 * Registers setColorScheme.js as a new WordPress scripts
 *
 */
function enqueue_custom_scripts() {

	wp_register_script(
    	'set-color-scheme', // Script handle
    	'[ADD-YOUR-FILE-PATH-HERE]', // File path
        '',
        '',
        true // Load script in footer
	);

    wp_enqueue_script( 'set-color-scheme' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

?>

## setColorScheme.js
/**
 * Listens user actions for color-scheme changes.
 *
 * Adds CSS class inside website <html> tag to control preferred color-scheme.
 * Class for light-scheme: 'color-scheme--light'
 * Class for dark-scheme: 'color-scheme--dark'
 *
 * Buttons must have '.scheme-toggle' class
 *
 */

/* Get elements including '.scheme-toggle' class */
const schemeToggle = document.querySelectorAll(".scheme-toggle");

/* Get preferred settings for user */
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)");

/* Loop through all elements including '.scheme-toggle' class */
schemeToggle.forEach((btn) => {
  const classes = document.getElementsByTagName("html")[0].classList;
  btn.addEventListener("click", () => {
    /* Set light mode */
    if (prefersDarkMode.matches) {
      classes.toggle("color-scheme--light");
      var scheme = classes.contains("color-scheme--light") ? "light" : "dark";
    /* Set dark mode */
    } else {
      classes.toggle("color-scheme--dark");
      var scheme = classes.contains("color-scheme--dark") ? "dark" : "light";
    }

    /* Add cookie to user browser according to used scheme
     * Cookie age is set to 30 days
     */
    document.cookie =
      "color-scheme = " +
      scheme +
      "; " +
      "max-age=2592000; path=/; samesite=strict; secure";
  });
});
	/**
	* Checks preferred color-scheme on page load
	*
	* Adds CSS class inside website <html> tag to control preferred color-scheme.
	* Class for light-scheme: 'color-scheme--light'
	* Class for dark-scheme: 'color-scheme--dark'
	*
	* Uses color-scheme cookie
	*
	*/

	/* Create variables */
	const cookies = document.cookie.split(";");
	const classes = document.getElementsByTagName("html")[0].classList;

	/**
	* Check the value of color-scheme.
	* If correct cookie is found, add scheme class to <html>
	*/

	/* Dark Mode */
	if (cookies.some((c) => c.includes("color-scheme=dark"))) {
	classes.add("color-scheme--dark");

	/* Light Mode */
	} else if (cookies.some((c) => c.includes("color-scheme=light"))) {
	classes.add("color-scheme--light");
	}
	/**
	* It is highly advisable to use CSS variables to configure colors
	*
	*/

	html {
	/* Default site color-scheme */
	}

	html.color-scheme--dark {
	/* Default site color-scheme but want to use dark scheme */
	}

	@media (prefers-color-scheme: dark) {

	html {
	/* Styling for clients who prefer color-scheme: dark */
	}

	html.color-scheme--light {
	/* Styling for clients who prefer color-scheme: dark but want to use light theme */
	}

	}
	<?php
	/**
	* Registers setColorScheme.js as a new WordPress scripts
	*
	*/
	function enqueue_custom_scripts() {

	wp_register_script(
	'set-color-scheme', // Script handle
	'[ADD-YOUR-FILE-PATH-HERE]', // File path
	'',
	'',
	true // Load script in footer
	);

	wp_enqueue_script( 'set-color-scheme' );
	}

	add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

	?>
	/**
	* Listens user actions for color-scheme changes.
	*
	* Adds CSS class inside website <html> tag to control preferred color-scheme.
	* Class for light-scheme: 'color-scheme--light'
	* Class for dark-scheme: 'color-scheme--dark'
	*
	* Buttons must have '.scheme-toggle' class
	*
	*/

	/* Get elements including '.scheme-toggle' class */
	const schemeToggle = document.querySelectorAll(".scheme-toggle");

	/* Get preferred settings for user */
	const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)");

	/* Loop through all elements including '.scheme-toggle' class */
	schemeToggle.forEach((btn) => {
	const classes = document.getElementsByTagName("html")[0].classList;
	btn.addEventListener("click", () => {
	/* Set light mode */
	if (prefersDarkMode.matches) {
	classes.toggle("color-scheme--light");
	var scheme = classes.contains("color-scheme--light") ? "light" : "dark";
	/* Set dark mode */
	} else {
	classes.toggle("color-scheme--dark");
	var scheme = classes.contains("color-scheme--dark") ? "dark" : "light";
	}

	/* Add cookie to user browser according to used scheme
	* Cookie age is set to 30 days
	*/
	document.cookie =
	"color-scheme = " +
	scheme +
	"; " +
	"max-age=2592000; path=/; samesite=strict; secure";
	});
	});