How to do auto light/dark mode switching using global variables

[KevinBatdorf]

As a prerequisite, you need to have a theme pack license. You can get one here. This is a paid feature.

After you install and activate it, insert a code block and open the themes panel.

At the top you will see a pretty bland-looking, generic theme. It might look something like this:

Select that theme and save the page.

Next (or do this before if you'd like), you need to add some CSS to your site in order for the styles to show up.

This is a bit verbose, but covers both light and dark modes based on the user's device.

Put this somewhere like functions.php or where is best to put PHP code (leave a comment below or email me if unsure).

Note: There are many ways to do this. This is just an automatic way and pretty simple

function cbptp_add_some_css()
{
    wp_register_style('cbptp-inline-styles-post', false, [], 123);
    wp_enqueue_style('cbptp-inline-styles-post');
    wp_add_inline_style('cbptp-inline-styles-post', wp_strip_all_tags('
    :root {
        --cbp-background: white;
        --cbp-text: #A65E2B;
        --cbp-constant: #1E754F;
        --cbp-string: #A65E2B;
        --cbp-comment: #A0ADA0;
        --cbp-keyword: #AB5959;
        --cbp-parameter: #B07D48;
        --cbp-function: #59873A;
        --cbp-string-expression: #B56959;
        --cbp-punctuation: black;
        --cbp-link: black;
        --cbp-line-background: rgba(14, 165, 233, 0.2); /* for line highlights */
        --cbp-line-num-color: #A65E2B;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --cbp-background: #2e3440ff;
            --cbp-text: #D8DEE9FF;
            --cbp-constant: #81A1C1;
            --cbp-string: #D8DEE9FF;
            --cbp-comment: #616E88;
            --cbp-keyword: #81A1C1;
            --cbp-parameter: #D8DEE9;
            --cbp-function: #88C0D0;
            --cbp-string-expression: #A3BE8C;
            --cbp-punctuation: white;
            --cbp-link: white;
            --cbp-line-background: rgba(14, 165, 233, 0.2);  /* for line highlights */
            --cbp-line-num-color: #D8DEE9FF;
        }
    }
    '));
}
add_action('enqueue_block_editor_assets', 'cbptp_add_some_css');
add_action('wp_enqueue_scripts', 'cbptp_add_some_css');

You don't necessarily need to set all of these, but it's good to look at your code and tweak it until it looks how you want. It will probably take a bit of trial and error to get it perfect. Also, if you don't care about dark mode, then just remove the bottom half of the code snippet.

Hey! coming soon I'll add better tooling to create custom themes and export the variables, simplifying this process a bit

[spkane]

@KevinBatdorf Do you know if this should work as is with the WP Dark Mode plugin? (It does not appear to)

https://wordpress.org/plugins/wp-dark-mode/

Maybe, I can add some Code Block Pro Dark Mode CSS changes to this area in the plugin to get it working?

[KevinBatdorf]

I can't really tell from their readme how their plugin works but have you tried the code in the top message I posted? If you use that theme then it would let you set the colors manually.

If you'r enot using that theme, the onyl option would be to manually override the inline css styles using more specificity and an !important to force it when dark mode is wanted (so you'd start with a light mode theme). So you'd need to find a token you want to change and add something like:

[class*='code-block-pro'] span[style*="#E3541C"] {
    color: lawngreen !important;
}

[radicalappdev]

It would be great if we could pick from the list of existing themes for both light and dark mode.

[KevinBatdorf]

Thanks for the feedback. It's definitely a plan for the future. It's just a bit complicated to make that change currently.

[danielpost]

I think some CSS variables might be labeled incorrect, is that possible? For example, when using this theme with the CSS variables theme both the functions and variables are treated as functions:

add_filter(
	'autoblue/share_message',
	function ( $message, $post_id ) {
		$tags = wp_get_post_tags( $post_id, [ 'fields' => 'names' ] );

		if ( ! empty( $tags ) ) {
			$tags     = array_map( fn( $tag ) => '#' . sanitize_title( $tag ), $tags );
			$message .= ' ' . implode( ' ', $tags );
		}

		return $message;
	},
	10,
	2
);

Example when only setting --cbp-function: red:

Example when using the One Dark Pro theme. As you can see functions (e.g. add_filter) are treated differently from variables ( e.g. $message), as well as punctuation (the brackets around ( $message, $post_id ))

[KevinBatdorf]

It definitely does look like it's not always accurate unfortunately.