[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-content/themes/twentytwentyone/classes/ -> class-twenty-twenty-one-dark-mode.php (source)

   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  }


Generated: Sun Apr 18 01:00:12 2021 Cross-referenced by PHPXref 0.7.1