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

<?php

use Cake\Core\Configure;

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

?>
<script>
    document.addEventListener('DOMContentLoaded', function (e) {
        const toggleDarkLink = document.getElementById('toggle-dark-mode');
        const toggleLightLink = document.getElementById('toggle-light-mode');
        const toggleAutoLink = document.getElementById('toggle-auto-mode');
        if (toggleDarkLink) {
            toggleDarkLink.addEventListener('click', function (e) {
                e.preventDefault();
                localStorage.theme = 'dark';
            <?php if ($strategy === 'class') : ?>
                document.documentElement.classList.add('dark');
                document.documentElement.classList.remove('auto');
            <?php else : ?>
                document.documentElement.dataset.theme = 'dark';
            <?php endif; ?>

            });
        }
        if (toggleLightLink) {
            toggleLightLink.addEventListener('click', function (e) {
                e.preventDefault();
                localStorage.theme = 'light';
            <?php if ($strategy === 'class') : ?>
                document.documentElement.classList.remove('auto');
                document.documentElement.classList.remove('dark');
            <?php else : ?>
                document.documentElement.dataset.theme = 'light';
            <?php endif; ?>
            });
        }
        if (toggleAutoLink) {
            toggleAutoLink.addEventListener('click', function (e) {
                e.preventDefault();
                localStorage.theme = 'auto';
            <?php if ($strategy === 'class') : ?>
                document.documentElement.classList.add('auto');
                document.documentElement.classList.remove('dark');

            <?php else : ?>
                delete document.documentElement.dataset.theme;
            <?php endif; ?>
            });
        }
    })
</script>