@JerryNidzo If you’re interested, here is what I did to a test site using the Classic Theme 1.0.0.
Just basic so I can see what it looks like so adapt to your own preferences.
Only added code to functions.php, header.php and created a new css and js file for the toggle.
All the files are placed in my child theme.
functions.php
<?php
function classic_press_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
}
add_action('wp_enqueue_scripts', 'classic_press_child_enqueue_styles');
// Toggle between light and dark theme on frontend for users
function add_theme_toggle_script() {
wp_enqueue_script('jquery'); // Ensure jQuery is loaded
wp_enqueue_script('theme-toggle', get_stylesheet_directory_uri() . '/theme-toggle.js', array('jquery'), '1.0.0', true);
wp_enqueue_style('theme-toggle-styles', get_stylesheet_directory_uri() . '/theme-toggle.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'add_theme_toggle_script');
header.php
<?php wp_head(); ?>
<!-- Theme Toggle Button -->
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
<span class="theme-toggle-dark">🌙</span>
<span class="theme-toggle-light">☀️</span>
</button>
</head>
CSS
/* CSS Variables for both themes */
:root {
--background-color: #ffffff;
--text-color: #333333;
--link-color: #0073aa;
}
[data-theme="dark"] {
--background-color: #1a1a1a;
--text-color: #ffffff;
--link-color: #00b9eb;
}
/* Apply variables to elements */
body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
a {
color: var(--link-color);
}
/* Theme toggle button styles */
.theme-toggle {
position: fixed;
right: 50%;
transform: translateX(50%) !important; /* Added !important to prevent overrides */
top: 50px;
padding: 12px;
border: 2px solid #666;
border-radius: 10px;
background: #ffffff;
cursor: pointer;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 8px;
min-width: 80px;
}
/* Very small screens */
@media screen and (max-width: 600px) {
.theme-toggle {
padding: 8px;
min-width: 70px;
}
}
/* Light theme styles */
.theme-toggle-light,
.theme-toggle-dark {
padding: 6px;
border-radius: 50%;
transition: all 0.3s ease;
}
.theme-toggle-light {
background: #FFB800;
display: none;
}
.theme-toggle-dark {
background: #2C3E50;
display: inline-block;
}
/* Dark theme specific styles */
[data-theme="dark"] .theme-toggle {
background: #2C3E50;
border-color: #888;
transform: translateX(50%) !important;
}
[data-theme="dark"] .theme-toggle-light {
display: inline-block;
}
[data-theme="dark"] .theme-toggle-dark {
display: none;
}
/* Add text label */
.theme-toggle::after {
content: "Dark Mode";
font-size: 14px;
color: #333;
transition: all 0.3s ease;
}
[data-theme="dark"] .theme-toggle::after {
content: "Light Mode";
color: #fff;
}
/* Hover effects */
.theme-toggle:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255,255,255,190.7);
}
/* Optional: Add focus styles for accessibility */
.theme-toggle:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
js
jQuery(document).ready(function($) {
// Check for saved theme preference or default to light
const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', currentTheme);
// Theme toggle functionality - preventing any position changes
$('#theme-toggle').click(function(e) {
e.preventDefault(); // Prevent any default behavior
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
// Apply new theme without affecting position
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
});
Also the code can be cleaned up most likely as I’m no expert but it seems to work for me. Hope this helps you. And welcome to the community!
