57 lines
1.9 KiB
PHP
57 lines
1.9 KiB
PHP
<?php
|
|
/**
|
|
* Twenty Twenty-Five Child functions and definitions
|
|
*/
|
|
|
|
function twentytwentyfive_child_enqueue_styles() {
|
|
// Enqueue parent styles
|
|
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
|
|
|
|
// Enqueue child styles
|
|
wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style'], wp_get_theme()->get('Version'));
|
|
|
|
// Enqueue dark mode JS
|
|
wp_enqueue_script('dark-mode-toggle', get_stylesheet_directory_uri() . '/js/dark-mode.js', [], '1.0.0', true);
|
|
}
|
|
add_action('wp_enqueue_scripts', 'twentytwentyfive_child_enqueue_styles');
|
|
|
|
/**
|
|
* Add a dark mode toggle to the site footer or header.
|
|
* We'll use a hook to inject the button.
|
|
*/
|
|
function twentytwentyfive_child_add_toggle() {
|
|
?>
|
|
<button id="dark-mode-toggle-btn" class="dark-mode-toggle" aria-label="Toggle Dark Mode">
|
|
<span class="sun">☀️</span>
|
|
<span class="moon">🌙</span>
|
|
</button>
|
|
<style>
|
|
.dark-mode-toggle {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: var(--wp--preset--color--contrast);
|
|
color: var(--wp--preset--color--base);
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
z-index: 9999;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.dark-mode-toggle:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
.dark-mode-toggle .moon { display: none; }
|
|
body.is-dark-theme .dark-mode-toggle .sun { display: none; }
|
|
body.is-dark-theme .dark-mode-toggle .moon { display: block; }
|
|
</style>
|
|
<?php
|
|
}
|
|
add_action('wp_footer', 'twentytwentyfive_child_add_toggle');
|