cheese-cake/templates/element/javascript/dark_mode_top.php

<?php

use Cake\Core\Configure;

/**
 * @var \App\View\AppView $this
 */
$strategy = Configure::read('CheeseCake.darkMode.strategy', 'dataset');

?>
<script>
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    <?php if ($strategy === 'class') : ?>

    document.documentElement.classList.toggle(
        "dark",
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
    );
    document.documentElement.classList.toggle(
        "auto",
        localStorage.theme === "auto"
    );
    <?php else : ?>
    localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ?
        document.documentElement.dataset.theme = "dark" :
        document.documentElement.dataset.theme = "light";
    <?php endif; ?>

    // Whenever the user explicitly chooses light mode

    // localStorage.theme = "light";
    // // Whenever the user explicitly chooses dark mode
    // localStorage.theme = "dark";
    // // Whenever the user explicitly chooses to respect the OS preference
    // localStorage.removeItem("theme");
</script>