| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 <?php 2 /** 3 * Dark Mode Class 4 * 5 * @package WordPress 6 * @subpackage Twenty_Twenty_One 7 * @since Twenty Twenty-One 1.0 8 */ 9 10 /** 11 * This class is in charge of Dark Mode. 12 */ 13 class Twenty_Twenty_One_Dark_Mode { 14 15 /** 16 * Instantiate the object. 17 * 18 * @access public 19 * 20 * @since Twenty Twenty-One 1.0 21 */ 22 public function __construct() { 23 24 // Enqueue assets for the block-editor. 25 add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) ); 26 27 // Add styles for dark-mode. 28 add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); 29 30 // Add scripts for customizer controls. 31 add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) ); 32 33 // Add customizer controls. 34 add_action( 'customize_register', array( $this, 'customizer_controls' ) ); 35 36 // Add HTML classes. 37 add_filter( 'twentytwentyone_html_classes', array( $this, 'html_classes' ) ); 38 39 // Add classes to <body> in the dashboard. 40 add_filter( 'admin_body_class', array( $this, 'admin_body_classes' ) ); 41 42 // Add the switch on the frontend & customizer. 43 add_action( 'wp_footer', array( $this, 'the_switch' ) ); 44 45 // Add the privacy policy content. 46 add_action( 'admin_init', array( $this, 'add_privacy_policy_content' ) ); 47 } 48 49 /** 50 * Editor custom color variables & scripts. 51 * 52 * @access public 53 * 54 * @since Twenty Twenty-One 1.0 55 * 56 * @return void 57 */ 58 public function editor_custom_color_variables() { 59 if ( ! $this->switch_should_render() ) { 60 return; 61 } 62 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 63 $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); 64 if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { 65 // Add Dark Mode variable overrides. 66 wp_add_inline_style( 67 'twenty-twenty-one-custom-color-overrides', 68 '.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); }' 69 ); 70 } 71 wp_enqueue_script( 72 'twentytwentyone-dark-mode-support-toggle', 73 get_template_directory_uri() . '/assets/js/dark-mode-toggler.js', 74 array(), 75 '1.0.0', 76 true 77 ); 78 79 wp_enqueue_script( 80 'twentytwentyone-editor-dark-mode-support', 81 get_template_directory_uri() . '/assets/js/editor-dark-mode-support.js', 82 array( 'twentytwentyone-dark-mode-support-toggle' ), 83 '1.0.0', 84 true 85 ); 86 } 87 88 /** 89 * Enqueue scripts and styles. 90 * 91 * @access public 92 * 93 * @since Twenty Twenty-One 1.0 94 * 95 * @return void 96 */ 97 public function enqueue_scripts() { 98 if ( ! $this->switch_should_render() ) { 99 return; 100 } 101 $url = get_template_directory_uri() . '/assets/css/style-dark-mode.css'; 102 if ( is_rtl() ) { 103 $url = get_template_directory_uri() . '/assets/css/style-dark-mode-rtl.css'; 104 } 105 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. 106 } 107 108 /** 109 * Enqueue scripts for the customizer. 110 * 111 * @access public 112 * 113 * @since Twenty Twenty-One 1.0 114 * 115 * @return void 116 */ 117 public function customize_controls_enqueue_scripts() { 118 if ( ! $this->switch_should_render() ) { 119 return; 120 } 121 wp_enqueue_script( 122 'twentytwentyone-customize-controls', 123 get_template_directory_uri() . '/assets/js/customize.js', 124 array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ), 125 '1.0.0', 126 true 127 ); 128 } 129 130 /** 131 * Register customizer options. 132 * 133 * @access public 134 * 135 * @since Twenty Twenty-One 1.0 136 * 137 * @param WP_Customize_Manager $wp_customize Theme Customizer object. 138 * 139 * @return void 140 */ 141 public function customizer_controls( $wp_customize ) { 142 143 $colors_section = $wp_customize->get_section( 'colors' ); 144 if ( is_object( $colors_section ) ) { 145 $colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' ); 146 } 147 148 // Custom notice control. 149 include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-notice-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound 150 151 $wp_customize->add_setting( 152 'respect_user_color_preference_notice', 153 array( 154 'capability' => 'edit_theme_options', 155 'default' => '', 156 'sanitize_callback' => '__return_empty_string', 157 ) 158 ); 159 160 $wp_customize->add_control( 161 new Twenty_Twenty_One_Customize_Notice_Control( 162 $wp_customize, 163 'respect_user_color_preference_notice', 164 array( 165 'section' => 'colors', 166 'priority' => 100, 167 'active_callback' => function() { 168 return 127 >= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); 169 }, 170 ) 171 ) 172 ); 173 174 $wp_customize->add_setting( 175 'respect_user_color_preference', 176 array( 177 'capability' => 'edit_theme_options', 178 'default' => false, 179 'sanitize_callback' => function( $value ) { 180 return (bool) $value; 181 }, 182 ) 183 ); 184 185 $description = '<p>'; 186 $description .= sprintf( 187 /* translators: %s: Twenty Twenty-One support article URL. */ 188 __( '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' ), 189 esc_url( __( 'https://wordpress.org/support/article/twenty-twenty-one/#dark-mode-support', 'twentytwentyone' ) ) 190 ); 191 $description .= '</p>'; 192 $description .= '<p>' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ) . '</p>'; 193 194 $wp_customize->add_control( 195 'respect_user_color_preference', 196 array( 197 'type' => 'checkbox', 198 'section' => 'colors', 199 'label' => esc_html__( 'Dark Mode support', 'twentytwentyone' ), 200 'priority' => 110, 201 'description' => $description, 202 'active_callback' => function( $value ) { 203 return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); 204 }, 205 ) 206 ); 207 208 // Add partial for background_color. 209 $wp_customize->selective_refresh->add_partial( 210 'background_color', 211 array( 212 'selector' => '#dark-mode-toggler', 213 'container_inclusive' => true, 214 'render_callback' => function() { 215 $attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' ); 216 $this->the_html( $attrs ); 217 }, 218 ) 219 ); 220 } 221 222 /** 223 * Calculate classes for the main <html> element. 224 * 225 * @access public 226 * 227 * @since Twenty Twenty-One 1.0 228 * 229 * @param string $classes The classes for <html> element. 230 * 231 * @return string 232 */ 233 public function html_classes( $classes ) { 234 if ( ! $this->switch_should_render() ) { 235 return $classes; 236 } 237 238 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 239 $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); 240 if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { 241 return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference'; 242 } 243 244 return $classes; 245 } 246 247 /** 248 * Adds a class to the <body> element in the editor to accommodate dark-mode. 249 * 250 * @access public 251 * 252 * @since Twenty Twenty-One 1.0 253 * 254 * @param string $classes The admin body-classes. 255 * 256 * @return string 257 */ 258 public function admin_body_classes( $classes ) { 259 if ( ! $this->switch_should_render() ) { 260 return $classes; 261 } 262 263 global $current_screen; 264 if ( empty( $current_screen ) ) { 265 set_current_screen(); 266 } 267 268 if ( $current_screen->is_block_editor() ) { 269 $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); 270 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 271 272 if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { 273 $classes .= ' twentytwentyone-supports-dark-theme'; 274 } 275 } 276 277 return $classes; 278 } 279 280 /** 281 * Determine if we want to print the dark-mode switch or not. 282 * 283 * @access public 284 * 285 * @since Twenty Twenty-One 1.0 286 * 287 * @return bool 288 */ 289 public function switch_should_render() { 290 global $is_IE; 291 return ( 292 get_theme_mod( 'respect_user_color_preference', false ) && 293 ! $is_IE && 294 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ) 295 ); 296 } 297 298 /** 299 * Add night/day switch. 300 * 301 * @access public 302 * 303 * @since Twenty Twenty-One 1.0 304 * 305 * @return void 306 */ 307 public function the_switch() { 308 if ( ! $this->switch_should_render() ) { 309 return; 310 } 311 $this->the_html(); 312 $this->the_script(); 313 } 314 315 /** 316 * Print the dark-mode switch HTML. 317 * 318 * Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed) 319 * 320 * @access public 321 * 322 * @since Twenty Twenty-One 1.0 323 * 324 * @param array $attrs The attributes to add to our <button> element. 325 * 326 * @return void 327 */ 328 public function the_html( $attrs = array() ) { 329 $attrs = wp_parse_args( 330 $attrs, 331 array( 332 'id' => 'dark-mode-toggler', 333 'class' => 'fixed-bottom', 334 'aria-pressed' => 'false', 335 'onClick' => 'toggleDarkMode()', 336 ) 337 ); 338 echo '<button'; 339 foreach ( $attrs as $key => $val ) { 340 echo ' ' . esc_attr( $key ) . '="' . esc_attr( $val ) . '"'; 341 } 342 echo '>'; 343 printf( 344 /* translators: %s: On/Off */ 345 esc_html__( 'Dark Mode: %s', 'twentytwentyone' ), 346 '<span aria-hidden="true"></span>' 347 ); 348 echo '</button>'; 349 ?> 350 <style> 351 #dark-mode-toggler > span { 352 margin-<?php echo is_rtl() ? 'right' : 'left'; ?>: 5px; 353 } 354 #dark-mode-toggler > span::before { 355 content: '<?php esc_attr_e( 'Off', 'twentytwentyone' ); ?>'; 356 } 357 #dark-mode-toggler[aria-pressed="true"] > span::before { 358 content: '<?php esc_attr_e( 'On', 'twentytwentyone' ); ?>'; 359 } 360 <?php if ( is_admin() || wp_is_json_request() ) : ?> 361 .components-editor-notices__pinned ~ .edit-post-visual-editor #dark-mode-toggler { 362 z-index: 20; 363 } 364 .is-dark-theme.is-dark-theme #dark-mode-toggler:not(:hover):not(:focus) { 365 color: var(--global--color-primary); 366 } 367 @media only screen and (max-width: 782px) { 368 #dark-mode-toggler { 369 margin-top: 32px; 370 } 371 } 372 <?php endif; ?> 373 </style> 374 375 <?php 376 } 377 378 /** 379 * Print the dark-mode switch script. 380 * 381 * @access public 382 * 383 * @since Twenty Twenty-One 1.0 384 * 385 * @return void 386 */ 387 public function the_script() { 388 echo '<script>'; 389 include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude 390 echo '</script>'; 391 } 392 393 /** 394 * Adds information to the privacy policy. 395 * 396 * @access public 397 * 398 * @since Twenty Twenty-One 1.0 399 * 400 * @return void 401 */ 402 public function add_privacy_policy_content() { 403 if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) { 404 return; 405 } 406 $content = '<p class="privacy-policy-tutorial">' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '</p>' 407 . '<strong class="privacy-policy-tutorial">' . __( 'Suggested text:', 'twentytwentyone' ) . '</strong> ' 408 . __( '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' ); 409 wp_add_privacy_policy_content( 'Twenty Twenty-One', wp_kses_post( wpautop( $content, false ) ) ); 410 } 411 412 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Mon Jan 18 08:20:02 2021 | Cross-referenced by PHPXref |