';
$description .= sprintf(
/* translators: %s: Twenty Twenty-One support article URL. */
__( '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. Learn more about Dark Mode.', 'twentytwentyone' ),
esc_url( __( 'https://wordpress.org/documentation/article/twenty-twenty-one/#dark-mode-support', 'twentytwentyone' ) )
);
$description .= '
';
$description .= '
' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom corner of the page.', 'twentytwentyone' ) . '
';
$wp_customize->add_control(
'respect_user_color_preference',
array(
'type' => 'checkbox',
'section' => 'colors',
'label' => esc_html__( 'Dark Mode support', 'twentytwentyone' ),
'priority' => 110,
'description' => $description,
'active_callback' => static function ( $value ) {
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 );
},
)
);
}
/**
* Calculates classes for the main element.
*
* @since Twenty Twenty-One 1.0
*
* @param string $classes The classes for 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 element in the editor to accommodate dark-mode.
*
* @since Twenty Twenty-One 1.0
*
* @global WP_Screen $current_screen WordPress current screen object.
*
* @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;
}
/**
* Determines if we want to print the dark-mode switch or not.
*
* @since Twenty Twenty-One 1.0
*
* @global bool $is_IE
*
* @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' ) )
);
}
/**
* Adds night/day switch.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function the_switch() {
if ( ! $this->switch_should_render() ) {
return;
}
$this->the_html();
$this->the_script();
}
/**
* Prints the dark-mode switch HTML.
*
* Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed)
*
* @since Twenty Twenty-One 1.0
*
* @param array $attrs The attributes to add to our ';
?>
%s\n", $js );
}
}
/**
* Adds information to the privacy policy.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function add_privacy_policy_content() {
if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) {
return;
}
$content = '
' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '
'
. '' . __( 'Suggested text:', 'twentytwentyone' ) . ' '
. __( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off. LocalStorage is necessary for the setting to work and is only used when a user clicks on the Dark Mode button. No data is saved in the database or transferred.', 'twentytwentyone' );
wp_add_privacy_policy_content( __( 'Twenty Twenty-One', 'twentytwentyone' ), wp_kses_post( wpautop( $content, false ) ) );
}
}
class-twenty-twenty-one-customize.php 0000666 00000011306 15233165145 0014053 0 ustar 00 get_setting( $setting_id );
if ( $setting ) {
$setting->transport = 'postMessage';
}
}
// Add partial for blogname.
$wp_customize->selective_refresh->add_partial(
'blogname',
array(
'selector' => '.site-title',
'render_callback' => array( $this, 'partial_blogname' ),
)
);
// Add partial for blogdescription.
$wp_customize->selective_refresh->add_partial(
'blogdescription',
array(
'selector' => '.site-description',
'render_callback' => array( $this, 'partial_blogdescription' ),
)
);
// Add "display_title_and_tagline" setting for displaying the site-title & tagline.
$wp_customize->add_setting(
'display_title_and_tagline',
array(
'capability' => 'edit_theme_options',
'default' => true,
'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
)
);
// Add control for the "display_title_and_tagline" setting.
$wp_customize->add_control(
'display_title_and_tagline',
array(
'type' => 'checkbox',
'section' => 'title_tagline',
'label' => esc_html__( 'Display Site Title & Tagline', 'twentytwentyone' ),
)
);
/**
* Add excerpt or full text selector to customizer
*/
$wp_customize->add_section(
'excerpt_settings',
array(
'title' => esc_html__( 'Excerpt Settings', 'twentytwentyone' ),
'priority' => 120,
)
);
$wp_customize->add_setting(
'display_excerpt_or_full_post',
array(
'capability' => 'edit_theme_options',
'default' => 'excerpt',
'sanitize_callback' => static function ( $value ) {
return 'excerpt' === $value || 'full' === $value ? $value : 'excerpt';
},
)
);
$wp_customize->add_control(
'display_excerpt_or_full_post',
array(
'type' => 'radio',
'section' => 'excerpt_settings',
'label' => esc_html__( 'On Archive Pages, posts show:', 'twentytwentyone' ),
'choices' => array(
'excerpt' => esc_html__( 'Summary', 'twentytwentyone' ),
'full' => esc_html__( 'Full text', 'twentytwentyone' ),
),
)
);
// Background color.
// Include the custom control class.
require_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-color-control.php' );
// Register the custom control.
$wp_customize->register_control_type( 'Twenty_Twenty_One_Customize_Color_Control' );
// Get the palette from theme-supports.
$palette = get_theme_support( 'editor-color-palette' );
// Build the colors array from theme-support.
$colors = array();
if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
foreach ( $palette[0] as $palette_color ) {
$colors[] = $palette_color['color'];
}
}
// Add the control. Overrides the default background-color control.
$wp_customize->add_control(
new Twenty_Twenty_One_Customize_Color_Control(
$wp_customize,
'background_color',
array(
'label' => esc_html_x( 'Background color', 'Customizer control', 'twentytwentyone' ),
'section' => 'colors',
'palette' => $colors,
)
)
);
}
/**
* Sanitizes a boolean for checkbox.
*
* @since Twenty Twenty-One 1.0
*
* @param bool $checked Whether or not a box is checked.
* @return bool
*/
public static function sanitize_checkbox( $checked = null ) {
return (bool) isset( $checked ) && true === $checked;
}
/**
* Renders the site title for the selective refresh partial.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function partial_blogname() {
bloginfo( 'name' );
}
/**
* Renders the site tagline for the selective refresh partial.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function partial_blogdescription() {
bloginfo( 'description' );
}
}
}
class-twenty-twenty-one-svg-icons.php 0000666 00000146122 15233165145 0013746 0 ustar 00 source on its own array key, without adding either
* the `width` or `height` attributes, since these are added dynamically,
* before rendering the SVG code.
*
* All icons are assumed to have equal width and height, hence the option
* to only specify a `$size` parameter in the svg methods.
*
* @since Twenty Twenty-One 1.0
*/
class Twenty_Twenty_One_SVG_Icons {
/**
* User Interface icons – svg sources.
*
* @since Twenty Twenty-One 1.0
*
* @var array
*/
protected static $icons = array(
'arrow_right' => '',
'arrow_left' => '',
'close' => '',
'menu' => '',
'plus' => '',
'minus' => '',
);
/**
* Social Icons – svg sources.
*
* @since Twenty Twenty-One 1.0
*
* @var array
*/
protected static $social_icons = array(
'500px' => '',
'amazon' => '',
'bandcamp' => '',
'behance' => '',
'codepen' => '',
'deviantart' => '',
'dribbble' => '',
'dropbox' => '',
'etsy' => '',
'facebook' => '',
'feed' => '',
'flickr' => '',
'foursquare' => '',
'goodreads' => '',
'google' => '',
'github' => '',
'instagram' => '',
'lastfm' => '',
'linkedin' => '',
'mail' => '',
'mastodon' => '',
'medium' => '',
'meetup' => '',
'pinterest' => '',
'pocket' => '',
'reddit' => '',
'skype' => '',
'snapchat' => '',
'soundcloud' => '',
'spotify' => '',
'tumblr' => '',
'twitch' => '',
'twitter' => '',
'vimeo' => '',
'vk' => '',
'wordpress' => '',
'yelp' => '',
'youtube' => '',
);
/**
* Social Icons – domain mappings.
*
* By default, each Icon ID is matched against a .com TLD. To override this behavior,
* specify all the domains it covers (including the .com TLD too, if applicable).
*
* @since Twenty Twenty-One 1.0
*
* @var array
*/
protected static $social_icons_map = array(
'amazon' => array(
'amazon.com',
'amazon.cn',
'amazon.in',
'amazon.fr',
'amazon.de',
'amazon.it',
'amazon.nl',
'amazon.es',
'amazon.co',
'amazon.ca',
),
'behance' => array(
'behance.net',
),
'codepen' => array(
'codepen.io',
),
'facebook' => array(
'facebook.com',
'fb.me',
),
'feed' => array(
'feed',
),
'lastfm' => array(
'last.fm',
),
'mail' => array(
'mailto:',
),
'mastodon' => array(
'mastodon.social',
'pawoo.net',
'mstdn.jp',
'mastodon.cloud',
'mastodon.online',
'counter.social',
'mstdn.social',
'mas.to',
'mastodon.world',
'gc2.jp',
),
'pocket' => array(
'getpocket.com',
),
'twitch' => array(
'twitch.tv',
),
'wordpress' => array(
'wordpress.com',
'wordpress.org',
),
);
/**
* Gets the SVG code for a given icon.
*
* @static
*
* @since Twenty Twenty-One 1.0
*
* @param string $group The icon group.
* @param string $icon The icon.
* @param int $size The icon-size in pixels.
* @return string
*/
public static function get_svg( $group, $icon, $size ) {
if ( 'ui' === $group ) {
$arr = self::$icons;
} elseif ( 'social' === $group ) {
$arr = self::$social_icons;
} else {
$arr = array();
}
/**
* Filters Twenty Twenty-Ones's array of icons.
*
* The dynamic portion of the hook name, `$group`, refers to
* the name of the group of icons, either "ui" or "social".
*
* @since Twenty Twenty-One 1.0
*
* @param array $arr Array of icons.
*/
$arr = apply_filters( "twenty_twenty_one_svg_icons_{$group}", $arr );
$svg = '';
if ( isset( $arr[ $icon ] ) && is_string( $arr[ $icon ] ) ) {
$repl = sprintf( '