2020-11-02 20:45:07 +01:00
< ? php
/**
2020-11-12 19:36:15 +01:00
* Dark Mode Class
2020-11-02 20:45:07 +01:00
*
* @ package WordPress
* @ subpackage Twenty_Twenty_One
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*/
/**
2020-11-12 19:36:15 +01:00
* This class is in charge of Dark Mode .
2020-11-02 20:45:07 +01:00
*/
class Twenty_Twenty_One_Dark_Mode {
/**
2023-06-30 14:54:27 +02:00
* Instantiates the object .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*/
public function __construct () {
// Enqueue assets for the block-editor.
add_action ( 'enqueue_block_editor_assets' , array ( $this , 'editor_custom_color_variables' ) );
// Add styles for dark-mode.
add_action ( 'wp_enqueue_scripts' , array ( $this , 'enqueue_scripts' ) );
// Add scripts for customizer controls.
add_action ( 'customize_controls_enqueue_scripts' , array ( $this , 'customize_controls_enqueue_scripts' ) );
// Add customizer controls.
add_action ( 'customize_register' , array ( $this , 'customizer_controls' ) );
// Add HTML classes.
add_filter ( 'twentytwentyone_html_classes' , array ( $this , 'html_classes' ) );
// Add classes to <body> in the dashboard.
add_filter ( 'admin_body_class' , array ( $this , 'admin_body_classes' ) );
// Add the switch on the frontend & customizer.
2020-11-12 19:36:15 +01:00
add_action ( 'wp_footer' , array ( $this , 'the_switch' ) );
2020-11-02 20:45:07 +01:00
2020-11-12 19:36:15 +01:00
// Add the privacy policy content.
add_action ( 'admin_init' , array ( $this , 'add_privacy_policy_content' ) );
2020-11-02 20:45:07 +01:00
}
/**
2023-06-30 14:54:27 +02:00
* Enqueues editor custom color variables & scripts .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ return void
*/
public function editor_custom_color_variables () {
if ( ! $this -> switch_should_render () ) {
return ;
}
$background_color = get_theme_mod ( 'background_color' , 'D1E4DD' );
$should_respect_color_scheme = get_theme_mod ( 'respect_user_color_preference' , false );
if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( $background_color ) > 127 ) {
2020-11-12 19:36:15 +01:00
// Add Dark Mode variable overrides.
2020-11-02 20:45:07 +01:00
wp_add_inline_style (
'twenty-twenty-one-custom-color-overrides' ,
2020-12-22 16:02:05 +01:00
'.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; --table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-background-color: rgba(240, 240, 240, 0.15); }'
2020-11-02 20:45:07 +01:00
);
}
wp_enqueue_script (
'twentytwentyone-dark-mode-support-toggle' ,
get_template_directory_uri () . '/assets/js/dark-mode-toggler.js' ,
array (),
'1.0.0' ,
true
);
wp_enqueue_script (
'twentytwentyone-editor-dark-mode-support' ,
get_template_directory_uri () . '/assets/js/editor-dark-mode-support.js' ,
array ( 'twentytwentyone-dark-mode-support-toggle' ),
'1.0.0' ,
true
);
}
/**
2023-06-30 14:54:27 +02:00
* Enqueues scripts and styles .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ return void
*/
public function enqueue_scripts () {
if ( ! $this -> switch_should_render () ) {
return ;
}
2020-11-12 19:36:15 +01:00
$url = get_template_directory_uri () . '/assets/css/style-dark-mode.css' ;
if ( is_rtl () ) {
$url = get_template_directory_uri () . '/assets/css/style-dark-mode-rtl.css' ;
}
wp_enqueue_style ( 'tt1-dark-mode' , $url , array ( 'twenty-twenty-one-style' ), wp_get_theme () -> get ( 'Version' ) ); // @phpstan-ignore-line. Version is always a string.
2020-11-02 20:45:07 +01:00
}
/**
2023-06-30 14:54:27 +02:00
* Enqueues scripts for the customizer .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ return void
*/
public function customize_controls_enqueue_scripts () {
if ( ! $this -> switch_should_render () ) {
return ;
}
wp_enqueue_script (
'twentytwentyone-customize-controls' ,
get_template_directory_uri () . '/assets/js/customize.js' ,
array ( 'customize-base' , 'customize-controls' , 'underscore' , 'jquery' , 'twentytwentyone-customize-helpers' ),
'1.0.0' ,
true
);
}
/**
2023-06-30 14:54:27 +02:00
* Registers customizer options .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ param WP_Customize_Manager $wp_customize Theme Customizer object .
* @ return void
*/
public function customizer_controls ( $wp_customize ) {
2020-11-12 19:36:15 +01:00
$colors_section = $wp_customize -> get_section ( 'colors' );
if ( is_object ( $colors_section ) ) {
2020-11-17 20:00:08 +01:00
$colors_section -> title = __ ( 'Colors & Dark Mode' , 'twentytwentyone' );
2020-11-12 19:36:15 +01:00
}
2020-11-17 20:00:08 +01:00
// Custom notice control.
2023-04-08 11:05:22 +02:00
require_once get_theme_file_path ( 'classes/class-twenty-twenty-one-customize-notice-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
2020-11-17 20:00:08 +01:00
$wp_customize -> add_setting (
'respect_user_color_preference_notice' ,
array (
'capability' => 'edit_theme_options' ,
'default' => '' ,
'sanitize_callback' => '__return_empty_string' ,
)
);
$wp_customize -> add_control (
new Twenty_Twenty_One_Customize_Notice_Control (
$wp_customize ,
'respect_user_color_preference_notice' ,
array (
'section' => 'colors' ,
'priority' => 100 ,
2021-08-26 14:59:02 +02:00
'active_callback' => static function () {
2020-11-17 20:00:08 +01:00
return 127 >= Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( get_theme_mod ( 'background_color' , 'D1E4DD' ) );
},
)
)
);
2020-11-02 20:45:07 +01:00
$wp_customize -> add_setting (
'respect_user_color_preference' ,
array (
'capability' => 'edit_theme_options' ,
'default' => false ,
2021-08-26 14:59:02 +02:00
'sanitize_callback' => static function ( $value ) {
2020-11-02 20:45:07 +01:00
return ( bool ) $value ;
},
)
);
Twenty Twenty-One: Sync the latest changes for 5.6 RC2.
This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.
For a full list of changes since [49633], see https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.
Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49726
git-svn-id: http://core.svn.wordpress.org/trunk@49449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-01 20:09:05 +01:00
$description = '<p>' ;
$description .= sprintf (
2020-12-13 19:40:06 +01:00
/* translators: %s: Twenty Twenty-One support article URL. */
Twenty Twenty-One: Sync the latest changes for 5.6 RC2.
This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.
For a full list of changes since [49633], see https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.
Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49726
git-svn-id: http://core.svn.wordpress.org/trunk@49449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-01 20:09:05 +01:00
__ ( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. <a href="%s">Learn more about Dark Mode.</a>' , 'twentytwentyone' ),
2023-02-23 11:49:19 +01:00
esc_url ( __ ( 'https://wordpress.org/documentation/article/twenty-twenty-one/#dark-mode-support' , 'twentytwentyone' ) )
Twenty Twenty-One: Sync the latest changes for 5.6 RC2.
This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.
For a full list of changes since [49633], see https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.
Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49726
git-svn-id: http://core.svn.wordpress.org/trunk@49449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-01 20:09:05 +01:00
);
$description .= '</p>' ;
2021-11-18 21:43:00 +01:00
$description .= '<p>' . __ ( 'Dark Mode can also be turned on and off with a button that you can find in the bottom corner of the page.' , 'twentytwentyone' ) . '</p>' ;
2020-11-17 20:00:08 +01:00
2020-11-02 20:45:07 +01:00
$wp_customize -> add_control (
'respect_user_color_preference' ,
array (
'type' => 'checkbox' ,
'section' => 'colors' ,
2020-11-12 20:30:11 +01:00
'label' => esc_html__ ( 'Dark Mode support' , 'twentytwentyone' ),
2020-11-17 20:00:08 +01:00
'priority' => 110 ,
'description' => $description ,
2021-08-26 14:59:02 +02:00
'active_callback' => static function ( $value ) {
2020-11-02 20:45:07 +01:00
return 127 < Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( get_theme_mod ( 'background_color' , 'D1E4DD' ) );
},
)
);
// Add partial for background_color.
$wp_customize -> selective_refresh -> add_partial (
'background_color' ,
array (
'selector' => '#dark-mode-toggler' ,
'container_inclusive' => true ,
'render_callback' => function () {
$attrs = ( $this -> switch_should_render () ) ? array () : array ( 'style' => 'display:none;' );
$this -> the_html ( $attrs );
},
)
);
}
/**
2023-06-30 14:54:27 +02:00
* Calculates classes for the main < html > element .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ param string $classes The classes for < html > element .
* @ return string
*/
public function html_classes ( $classes ) {
if ( ! $this -> switch_should_render () ) {
return $classes ;
}
$background_color = get_theme_mod ( 'background_color' , 'D1E4DD' );
$should_respect_color_scheme = get_theme_mod ( 'respect_user_color_preference' , false );
if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( $background_color ) ) {
return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference' ;
}
return $classes ;
}
/**
* Adds a class to the < body > element in the editor to accommodate dark - mode .
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
2023-06-30 14:54:27 +02:00
* @ global WP_Screen $current_screen WordPress current screen object .
*
2020-11-02 20:45:07 +01:00
* @ param string $classes The admin body - classes .
* @ return string
*/
public function admin_body_classes ( $classes ) {
if ( ! $this -> switch_should_render () ) {
return $classes ;
}
global $current_screen ;
if ( empty ( $current_screen ) ) {
set_current_screen ();
}
if ( $current_screen -> is_block_editor () ) {
$should_respect_color_scheme = get_theme_mod ( 'respect_user_color_preference' , false );
$background_color = get_theme_mod ( 'background_color' , 'D1E4DD' );
if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( $background_color ) > 127 ) {
$classes .= ' twentytwentyone-supports-dark-theme' ;
}
}
return $classes ;
}
/**
2023-06-30 14:54:27 +02:00
* Determines if we want to print the dark - mode switch or not .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
2023-06-30 14:54:27 +02:00
* @ global bool $is_IE
*
2020-11-02 20:45:07 +01:00
* @ return bool
*/
public function switch_should_render () {
global $is_IE ;
return (
get_theme_mod ( 'respect_user_color_preference' , false ) &&
! $is_IE &&
127 <= Twenty_Twenty_One_Custom_Colors :: get_relative_luminance_from_hex ( get_theme_mod ( 'background_color' , 'D1E4DD' ) )
);
}
/**
2023-06-30 14:54:27 +02:00
* Adds night / day switch .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ return void
*/
public function the_switch () {
if ( ! $this -> switch_should_render () ) {
return ;
}
$this -> the_html ();
$this -> the_script ();
}
/**
2023-06-30 14:54:27 +02:00
* Prints the dark - mode switch HTML .
2020-11-02 20:45:07 +01:00
*
* Inspired from https :// codepen . io / aaroniker / pen / KGpXZo ( MIT - licensed )
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ param array $attrs The attributes to add to our < button > element .
* @ return void
*/
public function the_html ( $attrs = array () ) {
$attrs = wp_parse_args (
$attrs ,
array (
'id' => 'dark-mode-toggler' ,
'class' => 'fixed-bottom' ,
'aria-pressed' => 'false' ,
'onClick' => 'toggleDarkMode()' ,
)
);
echo '<button' ;
foreach ( $attrs as $key => $val ) {
echo ' ' . esc_attr ( $key ) . '="' . esc_attr ( $val ) . '"' ;
}
echo '>' ;
printf (
/* translators: %s: On/Off */
esc_html__ ( 'Dark Mode: %s' , 'twentytwentyone' ),
'<span aria-hidden="true"></span>'
);
echo '</button>' ;
?>
< style >
#dark-mode-toggler > span {
margin -< ? php echo is_rtl () ? 'right' : 'left' ; ?> : 5px;
}
#dark-mode-toggler > span::before {
content : '<?php esc_attr_e( ' Off ', ' twentytwentyone ' ); ?>' ;
}
#dark-mode-toggler[aria-pressed="true"] > span::before {
content : '<?php esc_attr_e( ' On ', ' twentytwentyone ' ); ?>' ;
}
< ? php if ( is_admin () || wp_is_json_request () ) : ?>
. components - editor - notices__pinned ~ . edit - post - visual - editor #dark-mode-toggler {
z - index : 20 ;
}
2020-11-12 19:36:15 +01:00
. is - dark - theme . is - dark - theme #dark-mode-toggler:not(:hover):not(:focus) {
2020-11-02 20:45:07 +01:00
color : var ( -- global -- color - primary );
}
@ media only screen and ( max - width : 782 px ) {
#dark-mode-toggler {
margin - top : 32 px ;
}
}
< ? php endif ; ?>
</ style >
< ? php
}
/**
2023-06-30 14:54:27 +02:00
* Prints the dark - mode switch script .
2020-11-02 20:45:07 +01:00
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-02 20:45:07 +01:00
*
* @ return void
*/
public function the_script () {
echo '<script>' ;
include get_template_directory () . '/assets/js/dark-mode-toggler.js' ; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
echo '</script>' ;
}
2020-11-12 19:36:15 +01:00
/**
* Adds information to the privacy policy .
*
2020-12-17 15:57:07 +01:00
* @ since Twenty Twenty - One 1.0
2020-11-12 19:36:15 +01:00
*
* @ return void
*/
public function add_privacy_policy_content () {
if ( ! function_exists ( 'wp_add_privacy_policy_content' ) ) {
return ;
}
$content = '<p class="privacy-policy-tutorial">' . __ ( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.' , 'twentytwentyone' ) . '</p>'
2020-11-12 20:30:11 +01:00
. '<strong class="privacy-policy-tutorial">' . __ ( 'Suggested text:' , 'twentytwentyone' ) . '</strong> '
2020-11-12 19:36:15 +01:00
. __ ( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off.<br> LocalStorage is necessary for the setting to work and is only used when a user clicks on the Dark Mode button.<br> No data is saved in the database or transferred.' , 'twentytwentyone' );
2022-05-11 10:46:17 +02:00
wp_add_privacy_policy_content ( __ ( 'Twenty Twenty-One' , 'twentytwentyone' ), wp_kses_post ( wpautop ( $content , false ) ) );
2020-11-12 19:36:15 +01:00
}
2020-11-02 20:45:07 +01:00
}
