Twenty_Twenty_One_Dark_Mode::customizer_controls( WP_Customize_Manager $wp_customize ): void

132	public function customizer_controls( $wp_customize ) {133 134		$colors_section = $wp_customize->get_section( 'colors' );135		if ( is_object( $colors_section ) ) {136			$colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' );137		}138 139		// Custom notice control.140		require_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-notice-control.php' );141 142		$wp_customize->add_setting(143			'respect_user_color_preference_notice',144			array(145				'capability'        => 'edit_theme_options',146				'default'           => '',147				'sanitize_callback' => '__return_empty_string',148			)149		);150 151		$wp_customize->add_control(152			new Twenty_Twenty_One_Customize_Notice_Control(153				$wp_customize,154				'respect_user_color_preference_notice',155				array(156					'section'         => 'colors',157					'priority'        => 100,158					'active_callback' => static function () {159						return 127 >= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );160					},161				)162			)163		);164 165		$wp_customize->add_setting(166			'respect_user_color_preference',167			array(168				'capability'        => 'edit_theme_options',169				'default'           => false,170				'sanitize_callback' => static function ( $value ) {171					return (bool) $value;172				},173			)174		);175 176		$description  = '<p>';177		$description .= sprintf(178			/* translators: %s: Twenty Twenty-One support article URL. */179			__( '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' ),180			esc_url( __( 'https://wordpress.org/documentation/article/twenty-twenty-one/#dark-mode-support', 'twentytwentyone' ) )181		);182		$description .= '</p>';183		$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>';184 185		$wp_customize->add_control(186			'respect_user_color_preference',187			array(188				'type'            => 'checkbox',189				'section'         => 'colors',190				'label'           => esc_html__( 'Dark Mode support', 'twentytwentyone' ),191				'priority'        => 110,192				'description'     => $description,193				'active_callback' => static function ( $value ) {194					return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );195				},196			)197		);198 199		// Add partial for background_color.200		$wp_customize->selective_refresh->add_partial(201			'background_color',202			array(203				'selector'            => '#dark-mode-toggler',204				'container_inclusive' => true,205				'render_callback'     => function () {206					$attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' );207					$this->the_html( $attrs );208				},209			)210		);211	}