beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add toggle for dark mode to customizer

Browse source 
This change adjusts the existing "Dark Mode Notices" and changes it into
a checkbox.  This toggles a flag used to determine if the (now
separated) dark mode variables CSS should be loaded.
This commit is contained in:
Jason Crist 2021-02-11 14:10:00 -05:00
parent 278de67822
commit 8b0b34aa3a
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
spearhead/functions.php
View file

@ -122,6 +122,11 @@ function spearhead_scripts() {
// Child theme variables
wp_dequeue_style( 'seedlet-custom-color-overrides' );
wp_enqueue_style( 'spearhead-variables-style', get_stylesheet_directory_uri() . '/variables.css', array(), wp_get_theme()->get( 'Version' ) );
if( false === get_theme_mod( 'color_darkmode_disable', false ) ) {
wp_enqueue_style( 'spearhead-variables-dark-style', get_stylesheet_directory_uri() . '/variables-dark.css', array(), wp_get_theme()->get( 'Version' ) );
}
wp_enqueue_style( 'seedlet-custom-color-overrides' );
// enqueue child styles

12
spearhead/inc/wpcom-colors.php
View file

@ -28,20 +28,20 @@ if ( ! function_exists( 'spearhead_wpcom_customize_update' ) ) :
);
if ( $default_palette === $wpcom_colors_array['colors'] ) :
$wp_customize->add_setting( 'color_darkmode_notice' );
$wp_customize->add_setting( 'color_darkmode_disable' );
$wp_customize->add_control(
'color_darkmode_notice',
'color_darkmode_disable',
array(
'id' => 'darkmode_notice',
'label' => esc_html__( 'Dark Mode', 'spearhead' ),
'label' => esc_html__( 'Disable Dark Mode', 'spearhead' ),
'description' => sprintf(
/* translators: %s: link to how to support system display modes */
__( "This theme's default palette will display a dark color palette automatically for users who have dark mode enabled on their devices. <a href='%s' target='_blank'>Learn more about dark mode</a>.", 'spearhead' ),
__( "Unless checked, this theme's default palette will display a dark color palette automatically for users who have dark mode enabled on their devices. <a href='%s' target='_blank'>Learn more about dark mode</a>.", 'spearhead' ),
esc_url( 'https://www.a11yproject.com/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/' )
),
'section' => 'colors_manager_tool',
'priority' => 10, // Set to 10 so it appears near the top of the Colors & Backgrounds panel
'type' => 'hidden',
'type' => 'checkbox',
'settings' => 'color_darkmode_disable'
)
);
endif;