Help: Plugin Compatibility Guide

Daniel James edited this page Sep 17, 2018 · 5 revisions

Plugin Compatibility Guide

The Dark Mode plugin changes the WordPress dashboard in it's entirety which means many plugins will need to include compatibility changes to ensure the UIs that they create adopt the same sort of styling as the rest of the dashboard. The easiest way to achieve this is the usage of an action hook. Action hooks provide plugin developers with a means of extending functionality with just a few lines of code.

Dark Mode (since version 1.0) has had the doing_dark_mode action hook available which is only ever called once all checks have confirmed that the current user should be using Dark Mode. By using this hook, you're ensuring that all previous checks (which are hook-able by other plugins too) have passed which makes this a safe way to only provide a Dark Mode experience when it's necessary.

Add Dark Mode to your plugin

Adding your Dark Mode stylesheet...

add_action( 'doing_dark_mode', 'my_plugin_dark_mode', 10, 1 );

function my_plugin_dark_mode( $user_id ) {

	wp_enqueue_style( 'my_plugin_dark_mode', 'path/to/css/dark-mode.css' );

}

Remember that the doing_dark_mode hook since version 2.1 has included the current user ID as a parameter. This allows you to decide whether or not a specific user should, or should not see your plugins Dark Mode variation.

Adding Dark Mode settings for your plugin

You can also add settings alongside the standard Dark Mode setting if you'd like to give a user the option to not enable Dark Mode on your plugin pages. This is ideal if you don't want to actually support Dark Mode at all.

Add your plugin Dark Mode settings...

add_action( 'dark_mode_profile_settings', 'my_plugin_dark_mode_settings', 10, 1 );

function my_plugin_dark_mode_settings( $user ) {
	
	?>

		<div>

			<input type="checkbox" name="my_plugin_dark_mode_setting" /> Your custom Dark Mode settings
		
		</div>

	<?php

}

The dark_mode_profile_settings action hook passes one parameter of $user which is a WP_User object of the current user. This hook is designed for you to output HTML for settings to be shown on the page.

You can then make use of the after_dark_mode_saved action hook which is fired directly after the user has updated their Dark Mode setting preference. This will allow you to then save your custom plugin Dark Mode settings at the same time.

add_action( 'after_dark_mode_saved', 'my_plugin_dark_mode_settings_saved', 10, 2 );

function my_plugin_dark_mode_settings_saved( $option, $user_id ) {
	
	update_user_meta( $user_id, 'my_plugin_dark_mode_setting', 'abc' );

}

This hook provides you access to the newly saved option of the current user's Dark Mode preference ($option) (which will be yes to enable or no to disable) and their user ID ($user_id) so you can update the correct user's preferences.

Final Remarks

Supporting Dark Mode in your own plugin is a fantastic way to continue to support WordPress and this feature plugin. It's very simple to do and only takes a few minutes to have Dark Mode support ready. Below is a list of the hexadecimal colour code values which are used within Dark Mode. It's highly advised that you stick to these colours as closely as you can to ensure the user experience is seamless.

If you have any issues with this guide, or the documentation that is linked throughout, please open a new issue in this repository for it to be reviewed. Thank you!

Dark Mode Colours

The following colours, as noted in the Sass file source code is loosely based on the colours listed on the WordPress design guide. Please try and stick to the following colours as best as you can. $base-grey is used as the background of the main content areas and $light-grey is used as the basic text colour in many locations. You may need to mix and match these colours to suit your individual needs.

Colours are up-to-date as of version 3.2. Please note that since version 3.2, the colours used for the Dark Mode styles can now by found inside the dark-mode-colors.scss file. This enables you to use @import in your own SCSS files to easily include the core Dark Mode colours without repeating the colour list outlined below.

$white:           #ffffff;
$black:           #000000;
$blue:            #0073aa;
$medium-blue:     #00a0d2;
$clear:           transparent;

$accent-red:      #dc3232;
$accent-orange:   #f56e28;
$accent-yellow:   #ffb900;
$accent-green:    #46b450;
$accent-blue:     $blue;
$accent-purple:   #826eb4;

$base-grey:       #23282d;
$light-grey:      #bbc8d4;
$heavy-grey:      #37444c;
$dark-grey:       #32373c;
$ultra-grey:      #191f25;
$dark-silver:     #50626f;
$base-blue:       #2e74aa;
$light-blue:      #4092d2;
$dark-blue:       #2c5f88;
$ultra-blue:      #1f3f58;
$bright-blue:     #30ceff;

$editor-lavender: #c678dd;
$editor-sunglo:   #e06c75;
$editor-olivine:  #98c379;
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.