Dark and light mode toggle without flash

<?php
/**
 * Dark / light mode toggle.
 *
 * @package Acme_Theme
 */

defined( 'ABSPATH' ) || exit;

// Runs before paint so the saved or system mode is applied with no flash.
function acme_mode_bootstrap(): void {
	echo "<script>(function(){var m;try{m=localStorage.getItem('acme-mode');}catch(e){}"
		. "if(!m){m=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}"
		. "document.documentElement.setAttribute('data-mode',m);})();</script>\n";
}
add_action( 'wp_head', 'acme_mode_bootstrap', 1 );

function acme_mode_assets(): void {
	$dir = get_template_directory_uri() . '/assets/';
	wp_enqueue_style( 'acme-mode', $dir . 'dark-mode.css', array(), '1.0.0' );
	wp_enqueue_script(
		'acme-mode',
		$dir . 'dark-mode.js',
		array(),
		'1.0.0',
		array( 'in_footer' => true, 'strategy' => 'defer' )
	);
}
add_action( 'wp_enqueue_scripts', 'acme_mode_assets' );

// Use [acme_mode_toggle] in a header template part or block.
function acme_mode_toggle_shortcode(): string {
	return sprintf(
		'<button type="button" class="acme-mode-toggle" aria-pressed="false" data-label-dark="%1$s" data-label-light="%2$s">%3$s</button>',
		esc_attr__( 'Switch to dark mode', 'acme-theme' ),
		esc_attr__( 'Switch to light mode', 'acme-theme' ),
		esc_html__( 'Toggle colour mode', 'acme-theme' )
	);
}
add_shortcode( 'acme_mode_toggle', 'acme_mode_toggle_shortcode' );

:root {
	color-scheme: light;
	--acme-bg: #ffffff;
	--acme-text: #14201d;
	--acme-link: #0f766e;
}
:root[data-mode="dark"] {
	color-scheme: dark;
	--acme-bg: #0e1513;
	--acme-text: #e4efec;
	--acme-link: #5eead4;
}
body { background: var(--acme-bg); color: var(--acme-text); transition: background-color .25s, color .25s; }
a { color: var(--acme-link); }
.acme-mode-toggle { padding: .45rem .9rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

(() => {
	const root = document.documentElement;
	const buttons = document.querySelectorAll('.acme-mode-toggle');

	const apply = (mode) => {
		root.setAttribute('data-mode', mode);
		buttons.forEach((btn) => {
			btn.setAttribute('aria-pressed', String(mode === 'dark'));
			btn.setAttribute('aria-label', btn.dataset[mode === 'dark' ? 'labelLight' : 'labelDark']);
		});
	};

	apply(root.getAttribute('data-mode') || 'light');

	buttons.forEach((btn) => btn.addEventListener('click', () => {
		const next = root.getAttribute('data-mode') === 'dark' ? 'light' : 'dark';
		apply(next);
		try { localStorage.setItem('acme-mode', next); } catch (e) { /* storage blocked */ }
	}));
})();