Auto Dark Mode in WordPress – Without Plugin

Implementing auto-dark mode in WordPress without a plugin involves custom CSS and possibly some PHP modifications. Here’s a step-by-step guide to help you achieve this:

1. Create a Custom CSS File

1. Access Your Theme’s Files:

• Log in to your WordPress site via FTP or use the File Manager in your hosting control panel.
• Navigate to wp-content/themes/your-theme-name.

2, Create a New CSS File:

• Create a new file named custom.css (or any other name you prefer) in the theme directory.

3. Add Dark Mode Styles:

• Open the custom.css file and add your dark mode styles. For example, you can use media queries to switch between light and dark modes based on user preference.

/* Custom CSS for Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #ffffff;
    }
    a {
        color: #fff;
    }
    /* Or you can using invert for image or color */
    div {
        filter: invert(1);
    }
    /* Rest of your code */
}

You can use a filter:

2. Enqueue Custom CSS

Add Custom CSS and JS Files in Functions.php:

// Enqueue custom CSS
function enqueue_custom_styles() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );