]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-content/themes/twentysixteen/inc/customizer.php
WordPress 4.4
[autoinstalls/wordpress.git] / wp-content / themes / twentysixteen / inc / customizer.php
diff --git a/wp-content/themes/twentysixteen/inc/customizer.php b/wp-content/themes/twentysixteen/inc/customizer.php
new file mode 100644 (file)
index 0000000..bad570b
--- /dev/null
@@ -0,0 +1,1128 @@
+<?php
+/**
+ * Twenty Sixteen Customizer functionality
+ *
+ * @package WordPress
+ * @subpackage Twenty_Sixteen
+ * @since Twenty Sixteen 1.0
+ */
+
+/**
+ * Sets up the WordPress core custom header and custom background features.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see twentysixteen_header_style()
+ */
+function twentysixteen_custom_header_and_background() {
+       $color_scheme             = twentysixteen_get_color_scheme();
+       $default_background_color = trim( $color_scheme[0], '#' );
+       $default_text_color       = trim( $color_scheme[3], '#' );
+
+       /**
+        * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen.
+        *
+        * @since Twenty Sixteen 1.0
+        *
+        * @param array $args {
+        *     An array of custom-background support arguments.
+        *
+        *     @type string $default-color Default color of the background.
+        * }
+        */
+       add_theme_support( 'custom-background', apply_filters( 'twentysixteen_custom_background_args', array(
+               'default-color' => $default_background_color,
+       ) ) );
+
+       /**
+        * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen.
+        *
+        * @since Twenty Sixteen 1.0
+        *
+        * @param array $args {
+        *     An array of custom-header support arguments.
+        *
+        *     @type string $default-text-color Default color of the header text.
+        *     @type int      $width            Width in pixels of the custom header image. Default 1200.
+        *     @type int      $height           Height in pixels of the custom header image. Default 280.
+        *     @type bool     $flex-height      Whether to allow flexible-height header images. Default true.
+        *     @type callable $wp-head-callback Callback function used to style the header image and text
+        *                                      displayed on the blog.
+        * }
+        */
+       add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
+               'default-text-color'     => $default_text_color,
+               'width'                  => 1200,
+               'height'                 => 280,
+               'flex-height'            => true,
+               'wp-head-callback'       => 'twentysixteen_header_style',
+       ) ) );
+}
+add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' );
+
+if ( ! function_exists( 'twentysixteen_header_style' ) ) :
+/**
+ * Styles the header text displayed on the site.
+ *
+ * Create your own twentysixteen_header_style() function to override in a child theme.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see twentysixteen_custom_header_and_background().
+ */
+function twentysixteen_header_style() {
+       // If the header text option is untouched, let's bail.
+       if ( display_header_text() ) {
+               return;
+       }
+
+       // If the header text has been hidden.
+       ?>
+       <style type="text/css" id="twentysixteen-header-css">
+               .site-branding {
+                       margin: 0 auto 0 0;
+               }
+
+               .site-branding .site-title,
+               .site-description {
+                       clip: rect(1px, 1px, 1px, 1px);
+                       position: absolute;
+               }
+       </style>
+       <?php
+}
+endif; // twentysixteen_header_style
+
+/**
+ * Adds postMessage support for site title and description for the Customizer.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @param WP_Customize_Manager $wp_customize The Customizer object.
+ */
+function twentysixteen_customize_register( $wp_customize ) {
+       $color_scheme = twentysixteen_get_color_scheme();
+
+       $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
+       $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
+
+       // Add color scheme setting and control.
+       $wp_customize->add_setting( 'color_scheme', array(
+               'default'           => 'default',
+               'sanitize_callback' => 'twentysixteen_sanitize_color_scheme',
+               'transport'         => 'postMessage',
+       ) );
+
+       $wp_customize->add_control( 'color_scheme', array(
+               'label'    => __( 'Base Color Scheme', 'twentysixteen' ),
+               'section'  => 'colors',
+               'type'     => 'select',
+               'choices'  => twentysixteen_get_color_scheme_choices(),
+               'priority' => 1,
+       ) );
+
+       // Add page background color setting and control.
+       $wp_customize->add_setting( 'page_background_color', array(
+               'default'           => $color_scheme[1],
+               'sanitize_callback' => 'sanitize_hex_color',
+               'transport'         => 'postMessage',
+       ) );
+
+       $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'page_background_color', array(
+               'label'       => __( 'Page Background Color', 'twentysixteen' ),
+               'section'     => 'colors',
+       ) ) );
+
+       // Remove the core header textcolor control, as it shares the main text color.
+       $wp_customize->remove_control( 'header_textcolor' );
+
+       // Add link color setting and control.
+       $wp_customize->add_setting( 'link_color', array(
+               'default'           => $color_scheme[2],
+               'sanitize_callback' => 'sanitize_hex_color',
+               'transport'         => 'postMessage',
+       ) );
+
+       $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
+               'label'       => __( 'Link Color', 'twentysixteen' ),
+               'section'     => 'colors',
+       ) ) );
+
+       // Add main text color setting and control.
+       $wp_customize->add_setting( 'main_text_color', array(
+               'default'           => $color_scheme[3],
+               'sanitize_callback' => 'sanitize_hex_color',
+               'transport'         => 'postMessage',
+       ) );
+
+       $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array(
+               'label'       => __( 'Main Text Color', 'twentysixteen' ),
+               'section'     => 'colors',
+       ) ) );
+
+       // Add secondary text color setting and control.
+       $wp_customize->add_setting( 'secondary_text_color', array(
+               'default'           => $color_scheme[4],
+               'sanitize_callback' => 'sanitize_hex_color',
+               'transport'         => 'postMessage',
+       ) );
+
+       $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array(
+               'label'       => __( 'Secondary Text Color', 'twentysixteen' ),
+               'section'     => 'colors',
+       ) ) );
+}
+add_action( 'customize_register', 'twentysixteen_customize_register', 11 );
+
+/**
+ * Registers color schemes for Twenty Sixteen.
+ *
+ * Can be filtered with {@see 'twentysixteen_color_schemes'}.
+ *
+ * The order of colors in a colors array:
+ * 1. Main Background Color.
+ * 2. Page Background Color.
+ * 3. Link Color.
+ * 4. Main Text Color.
+ * 5. Secondary Text Color.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @return array An associative array of color scheme options.
+ */
+function twentysixteen_get_color_schemes() {
+       /**
+        * Filter the color schemes registered for use with Twenty Sixteen.
+        *
+        * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'.
+        *
+        * @since Twenty Sixteen 1.0
+        *
+        * @param array $schemes {
+        *     Associative array of color schemes data.
+        *
+        *     @type array $slug {
+        *         Associative array of information for setting up the color scheme.
+        *
+        *         @type string $label  Color scheme label.
+        *         @type array  $colors HEX codes for default colors prepended with a hash symbol ('#').
+        *                              Colors are defined in the following order: Main background, page
+        *                              background, link, main text, secondary text.
+        *     }
+        * }
+        */
+       return apply_filters( 'twentysixteen_color_schemes', array(
+               'default' => array(
+                       'label'  => __( 'Default', 'twentysixteen' ),
+                       'colors' => array(
+                               '#1a1a1a',
+                               '#ffffff',
+                               '#007acc',
+                               '#1a1a1a',
+                               '#686868',
+                       ),
+               ),
+               'dark' => array(
+                       'label'  => __( 'Dark', 'twentysixteen' ),
+                       'colors' => array(
+                               '#262626',
+                               '#1a1a1a',
+                               '#9adffd',
+                               '#e5e5e5',
+                               '#c1c1c1',
+                       ),
+               ),
+               'gray' => array(
+                       'label'  => __( 'Gray', 'twentysixteen' ),
+                       'colors' => array(
+                               '#616a73',
+                               '#4d545c',
+                               '#c7c7c7',
+                               '#f2f2f2',
+                               '#f2f2f2',
+                       ),
+               ),
+               'red' => array(
+                       'label'  => __( 'Red', 'twentysixteen' ),
+                       'colors' => array(
+                               '#ffffff',
+                               '#ff675f',
+                               '#640c1f',
+                               '#402b30',
+                               '#402b30',
+                       ),
+               ),
+               'yellow' => array(
+                       'label'  => __( 'Yellow', 'twentysixteen' ),
+                       'colors' => array(
+                               '#3b3721',
+                               '#ffef8e',
+                               '#774e24',
+                               '#3b3721',
+                               '#5b4d3e',
+                       ),
+               ),
+       ) );
+}
+
+if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) :
+/**
+ * Retrieves the current Twenty Sixteen color scheme.
+ *
+ * Create your own twentysixteen_get_color_scheme() function to override in a child theme.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @return array An associative array of either the current or default color scheme HEX values.
+ */
+function twentysixteen_get_color_scheme() {
+       $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+       $color_schemes       = twentysixteen_get_color_schemes();
+
+       if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
+               return $color_schemes[ $color_scheme_option ]['colors'];
+       }
+
+       return $color_schemes['default']['colors'];
+}
+endif; // twentysixteen_get_color_scheme
+
+if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) :
+/**
+ * Retrieves an array of color scheme choices registered for Twenty Sixteen.
+ *
+ * Create your own twentysixteen_get_color_scheme_choices() function to override
+ * in a child theme.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @return array Array of color schemes.
+ */
+function twentysixteen_get_color_scheme_choices() {
+       $color_schemes                = twentysixteen_get_color_schemes();
+       $color_scheme_control_options = array();
+
+       foreach ( $color_schemes as $color_scheme => $value ) {
+               $color_scheme_control_options[ $color_scheme ] = $value['label'];
+       }
+
+       return $color_scheme_control_options;
+}
+endif; // twentysixteen_get_color_scheme_choices
+
+
+if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) :
+/**
+ * Handles sanitization for Twenty Sixteen color schemes.
+ *
+ * Create your own twentysixteen_sanitize_color_scheme() function to override
+ * in a child theme.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @param string $value Color scheme name value.
+ * @return string Color scheme name.
+ */
+function twentysixteen_sanitize_color_scheme( $value ) {
+       $color_schemes = twentysixteen_get_color_scheme_choices();
+
+       if ( ! array_key_exists( $value, $color_schemes ) ) {
+               return 'default';
+       }
+
+       return $value;
+}
+endif; // twentysixteen_sanitize_color_scheme
+
+/**
+ * Enqueues front-end CSS for color scheme.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentysixteen_color_scheme_css() {
+       $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+
+       // Don't do anything if the default color scheme is selected.
+       if ( 'default' === $color_scheme_option ) {
+               return;
+       }
+
+       $color_scheme = twentysixteen_get_color_scheme();
+
+       // Convert main text hex color to rgba.
+       $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] );
+
+       // If the rgba values are empty return early.
+       if ( empty( $color_textcolor_rgb ) ) {
+               return;
+       }
+
+       // If we get this far, we have a custom color scheme.
+       $colors = array(
+               'background_color'      => $color_scheme[0],
+               'page_background_color' => $color_scheme[1],
+               'link_color'            => $color_scheme[2],
+               'main_text_color'       => $color_scheme[3],
+               'secondary_text_color'  => $color_scheme[4],
+               'border_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ),
+
+       );
+
+       $color_scheme_css = twentysixteen_get_color_scheme_css( $colors );
+
+       wp_add_inline_style( 'twentysixteen-style', $color_scheme_css );
+}
+add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' );
+
+/**
+ * Binds the JS listener to make Customizer color_scheme control.
+ *
+ * Passes color scheme data as colorScheme global.
+ *
+ * @since Twenty Sixteen 1.0
+ */
+function twentysixteen_customize_control_js() {
+       wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20150825', true );
+       wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() );
+}
+add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' );
+
+/**
+ * Binds JS handlers to make the Customizer preview reload changes asynchronously.
+ *
+ * @since Twenty Sixteen 1.0
+ */
+function twentysixteen_customize_preview_js() {
+       wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20150825', true );
+}
+add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' );
+
+/**
+ * Returns CSS for the color schemes.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @param array $colors Color scheme colors.
+ * @return string Color scheme CSS.
+ */
+function twentysixteen_get_color_scheme_css( $colors ) {
+       $colors = wp_parse_args( $colors, array(
+               'background_color'      => '',
+               'page_background_color' => '',
+               'link_color'            => '',
+               'main_text_color'       => '',
+               'secondary_text_color'  => '',
+               'border_color'          => '',
+       ) );
+
+       return <<<CSS
+       /* Color Scheme */
+
+       /* Background Color */
+       body {
+               background-color: {$colors['background_color']};
+       }
+
+       /* Page Background Color */
+       .site {
+               background-color: {$colors['page_background_color']};
+       }
+
+       mark,
+       ins,
+       button,
+       button[disabled]:hover,
+       button[disabled]:focus,
+       input[type="button"],
+       input[type="button"][disabled]:hover,
+       input[type="button"][disabled]:focus,
+       input[type="reset"],
+       input[type="reset"][disabled]:hover,
+       input[type="reset"][disabled]:focus,
+       input[type="submit"],
+       input[type="submit"][disabled]:hover,
+       input[type="submit"][disabled]:focus,
+       .menu-toggle.toggled-on,
+       .menu-toggle.toggled-on:hover,
+       .menu-toggle.toggled-on:focus,
+       .pagination .prev,
+       .pagination .next,
+       .pagination .prev:hover,
+       .pagination .prev:focus,
+       .pagination .next:hover,
+       .pagination .next:focus,
+       .pagination .nav-links:before,
+       .pagination .nav-links:after,
+       .widget_calendar tbody a,
+       .widget_calendar tbody a:hover,
+       .widget_calendar tbody a:focus,
+       .page-links a,
+       .page-links a:hover,
+       .page-links a:focus {
+               color: {$colors['page_background_color']};
+       }
+
+       /* Link Color */
+       .menu-toggle:hover,
+       .menu-toggle:focus,
+       a,
+       .main-navigation a:hover,
+       .main-navigation a:focus,
+       .dropdown-toggle:hover,
+       .dropdown-toggle:focus,
+       .social-navigation a:hover:before,
+       .social-navigation a:focus:before,
+       .post-navigation a:hover .post-title,
+       .post-navigation a:focus .post-title,
+       .tagcloud a:hover,
+       .tagcloud a:focus,
+       .site-branding .site-title a:hover,
+       .site-branding .site-title a:focus,
+       .entry-title a:hover,
+       .entry-title a:focus,
+       .entry-footer a:hover,
+       .entry-footer a:focus,
+       .comment-metadata a:hover,
+       .comment-metadata a:focus,
+       .pingback .comment-edit-link:hover,
+       .pingback .comment-edit-link:focus,
+       .comment-reply-link,
+       .comment-reply-link:hover,
+       .comment-reply-link:focus,
+       .required,
+       .site-info a:hover,
+       .site-info a:focus {
+               color: {$colors['link_color']};
+       }
+
+       mark,
+       ins,
+       button:hover,
+       button:focus,
+       input[type="button"]:hover,
+       input[type="button"]:focus,
+       input[type="reset"]:hover,
+       input[type="reset"]:focus,
+       input[type="submit"]:hover,
+       input[type="submit"]:focus,
+       .pagination .prev:hover,
+       .pagination .prev:focus,
+       .pagination .next:hover,
+       .pagination .next:focus,
+       .widget_calendar tbody a,
+       .page-links a:hover,
+       .page-links a:focus {
+               background-color: {$colors['link_color']};
+       }
+
+       input[type="text"]:focus,
+       input[type="email"]:focus,
+       input[type="url"]:focus,
+       input[type="password"]:focus,
+       input[type="search"]:focus,
+       textarea:focus,
+       .tagcloud a:hover,
+       .tagcloud a:focus,
+       .menu-toggle:hover,
+       .menu-toggle:focus {
+               border-color: {$colors['link_color']};
+       }
+
+       /* Main Text Color */
+       body,
+       blockquote cite,
+       blockquote small,
+       .main-navigation a,
+       .menu-toggle,
+       .dropdown-toggle,
+       .social-navigation a,
+       .post-navigation a,
+       .pagination a:hover,
+       .pagination a:focus,
+       .widget-title a,
+       .site-branding .site-title a,
+       .entry-title a,
+       .page-links > .page-links-title,
+       .comment-author,
+       .comment-reply-title small a:hover,
+       .comment-reply-title small a:focus {
+               color: {$colors['main_text_color']};
+       }
+
+       blockquote,
+       .menu-toggle.toggled-on,
+       .menu-toggle.toggled-on:hover,
+       .menu-toggle.toggled-on:focus,
+       .post-navigation,
+       .post-navigation div + div,
+       .pagination,
+       .widget,
+       .page-header,
+       .page-links a,
+       .comments-title,
+       .comment-reply-title {
+               border-color: {$colors['main_text_color']};
+       }
+
+       button,
+       button[disabled]:hover,
+       button[disabled]:focus,
+       input[type="button"],
+       input[type="button"][disabled]:hover,
+       input[type="button"][disabled]:focus,
+       input[type="reset"],
+       input[type="reset"][disabled]:hover,
+       input[type="reset"][disabled]:focus,
+       input[type="submit"],
+       input[type="submit"][disabled]:hover,
+       input[type="submit"][disabled]:focus,
+       .menu-toggle.toggled-on,
+       .menu-toggle.toggled-on:hover,
+       .menu-toggle.toggled-on:focus,
+       .pagination:before,
+       .pagination:after,
+       .pagination .prev,
+       .pagination .next,
+       .page-links a {
+               background-color: {$colors['main_text_color']};
+       }
+
+       /* Secondary Text Color */
+
+       /**
+        * IE8 and earlier will drop any block with CSS3 selectors.
+        * Do not combine these styles with the next block.
+        */
+       body:not(.search-results) .entry-summary {
+               color: {$colors['secondary_text_color']};
+       }
+
+       blockquote,
+       .post-password-form label,
+       a:hover,
+       a:focus,
+       a:active,
+       .post-navigation .meta-nav,
+       .image-navigation,
+       .comment-navigation,
+       .widget_recent_entries .post-date,
+       .widget_rss .rss-date,
+       .widget_rss cite,
+       .site-description,
+       .author-bio,
+       .entry-footer,
+       .entry-footer a,
+       .sticky-post,
+       .taxonomy-description,
+       .entry-caption,
+       .comment-metadata,
+       .pingback .edit-link,
+       .comment-metadata a,
+       .pingback .comment-edit-link,
+       .comment-form label,
+       .comment-notes,
+       .comment-awaiting-moderation,
+       .logged-in-as,
+       .form-allowed-tags,
+       .site-info,
+       .site-info a,
+       .wp-caption .wp-caption-text,
+       .gallery-caption,
+       .widecolumn label,
+       .widecolumn .mu_register label {
+               color: {$colors['secondary_text_color']};
+       }
+
+       .widget_calendar tbody a:hover,
+       .widget_calendar tbody a:focus {
+               background-color: {$colors['secondary_text_color']};
+       }
+
+       /* Border Color */
+       fieldset,
+       pre,
+       abbr,
+       acronym,
+       table,
+       th,
+       td,
+       input[type="text"],
+       input[type="email"],
+       input[type="url"],
+       input[type="password"],
+       input[type="search"],
+       textarea,
+       .main-navigation li,
+       .main-navigation .primary-menu,
+       .menu-toggle,
+       .dropdown-toggle:after,
+       .social-navigation a,
+       .image-navigation,
+       .comment-navigation,
+       .tagcloud a,
+       .entry-content,
+       .entry-summary,
+       .page-links a,
+       .page-links > span,
+       .comment-list article,
+       .comment-list .pingback,
+       .comment-list .trackback,
+       .comment-reply-link,
+       .no-comments,
+       .widecolumn .mu_register .mu_alert {
+               border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
+               border-color: {$colors['border_color']};
+       }
+
+       hr,
+       code {
+               background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
+               background-color: {$colors['border_color']};
+       }
+
+       @media screen and (min-width: 56.875em) {
+               .main-navigation li:hover > a,
+               .main-navigation li.focus > a {
+                       color: {$colors['link_color']};
+               }
+
+               .main-navigation ul ul,
+               .main-navigation ul ul li {
+                       border-color: {$colors['border_color']};
+               }
+
+               .main-navigation ul ul:before {
+                       border-top-color: {$colors['border_color']};
+                       border-bottom-color: {$colors['border_color']};
+               }
+
+               .main-navigation ul ul li {
+                       background-color: {$colors['page_background_color']};
+               }
+
+               .main-navigation ul ul:after {
+                       border-top-color: {$colors['page_background_color']};
+                       border-bottom-color: {$colors['page_background_color']};
+               }
+       }
+
+CSS;
+}
+
+
+/**
+ * Outputs an Underscore template for generating CSS for the color scheme.
+ *
+ * The template generates the css dynamically for instant display in the
+ * Customizer preview.
+ *
+ * @since Twenty Sixteen 1.0
+ */
+function twentysixteen_color_scheme_css_template() {
+       $colors = array(
+               'background_color'      => '{{ data.background_color }}',
+               'page_background_color' => '{{ data.page_background_color }}',
+               'link_color'            => '{{ data.link_color }}',
+               'main_text_color'       => '{{ data.main_text_color }}',
+               'secondary_text_color'  => '{{ data.secondary_text_color }}',
+               'border_color'          => '{{ data.border_color }}',
+       );
+       ?>
+       <script type="text/html" id="tmpl-twentysixteen-color-scheme">
+               <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
+       </script>
+       <?php
+}
+add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
+
+/**
+ * Enqueues front-end CSS for the page background color.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentysixteen_page_background_color_css() {
+       $color_scheme          = twentysixteen_get_color_scheme();
+       $default_color         = $color_scheme[1];
+       $page_background_color = get_theme_mod( 'page_background_color', $default_color );
+
+       // Don't do anything if the current color is the default.
+       if ( $page_background_color === $default_color ) {
+               return;
+       }
+
+       $css = '
+               /* Custom Page Background Color */
+               .site {
+                       background-color: %1$s;
+               }
+
+               mark,
+               ins,
+               button,
+               button[disabled]:hover,
+               button[disabled]:focus,
+               input[type="button"],
+               input[type="button"][disabled]:hover,
+               input[type="button"][disabled]:focus,
+               input[type="reset"],
+               input[type="reset"][disabled]:hover,
+               input[type="reset"][disabled]:focus,
+               input[type="submit"],
+               input[type="submit"][disabled]:hover,
+               input[type="submit"][disabled]:focus,
+               .menu-toggle.toggled-on,
+               .menu-toggle.toggled-on:hover,
+               .menu-toggle.toggled-on:focus,
+               .pagination .prev,
+               .pagination .next,
+               .pagination .prev:hover,
+               .pagination .prev:focus,
+               .pagination .next:hover,
+               .pagination .next:focus,
+               .pagination .nav-links:before,
+               .pagination .nav-links:after,
+               .widget_calendar tbody a,
+               .widget_calendar tbody a:hover,
+               .widget_calendar tbody a:focus,
+               .page-links a,
+               .page-links a:hover,
+               .page-links a:focus {
+                       color: %1$s;
+               }
+
+               @media screen and (min-width: 56.875em) {
+                       .main-navigation ul ul li {
+                               background-color: %1$s;
+                       }
+
+                       .main-navigation ul ul:after {
+                               border-top-color: %1$s;
+                               border-bottom-color: %1$s;
+                       }
+               }
+       ';
+
+       wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 );
+
+/**
+ * Enqueues front-end CSS for the link color.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentysixteen_link_color_css() {
+       $color_scheme    = twentysixteen_get_color_scheme();
+       $default_color   = $color_scheme[2];
+       $link_color = get_theme_mod( 'link_color', $default_color );
+
+       // Don't do anything if the current color is the default.
+       if ( $link_color === $default_color ) {
+               return;
+       }
+
+       $css = '
+               /* Custom Link Color */
+               .menu-toggle:hover,
+               .menu-toggle:focus,
+               a,
+               .main-navigation a:hover,
+               .main-navigation a:focus,
+               .dropdown-toggle:hover,
+               .dropdown-toggle:focus,
+               .social-navigation a:hover:before,
+               .social-navigation a:focus:before,
+               .post-navigation a:hover .post-title,
+               .post-navigation a:focus .post-title,
+               .tagcloud a:hover,
+               .tagcloud a:focus,
+               .site-branding .site-title a:hover,
+               .site-branding .site-title a:focus,
+               .entry-title a:hover,
+               .entry-title a:focus,
+               .entry-footer a:hover,
+               .entry-footer a:focus,
+               .comment-metadata a:hover,
+               .comment-metadata a:focus,
+               .pingback .comment-edit-link:hover,
+               .pingback .comment-edit-link:focus,
+               .comment-reply-link,
+               .comment-reply-link:hover,
+               .comment-reply-link:focus,
+               .required,
+               .site-info a:hover,
+               .site-info a:focus {
+                       color: %1$s;
+               }
+
+               mark,
+               ins,
+               button:hover,
+               button:focus,
+               input[type="button"]:hover,
+               input[type="button"]:focus,
+               input[type="reset"]:hover,
+               input[type="reset"]:focus,
+               input[type="submit"]:hover,
+               input[type="submit"]:focus,
+               .pagination .prev:hover,
+               .pagination .prev:focus,
+               .pagination .next:hover,
+               .pagination .next:focus,
+               .widget_calendar tbody a,
+               .page-links a:hover,
+               .page-links a:focus {
+                       background-color: %1$s;
+               }
+
+               input[type="text"]:focus,
+               input[type="email"]:focus,
+               input[type="url"]:focus,
+               input[type="password"]:focus,
+               input[type="search"]:focus,
+               textarea:focus,
+               .tagcloud a:hover,
+               .tagcloud a:focus,
+               .menu-toggle:hover,
+               .menu-toggle:focus {
+                       border-color: %1$s;
+               }
+
+               @media screen and (min-width: 56.875em) {
+                       .main-navigation li:hover > a,
+                       .main-navigation li.focus > a {
+                               color: %1$s;
+                       }
+               }
+       ';
+
+       wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 );
+
+/**
+ * Enqueues front-end CSS for the main text color.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentysixteen_main_text_color_css() {
+       $color_scheme    = twentysixteen_get_color_scheme();
+       $default_color   = $color_scheme[3];
+       $main_text_color = get_theme_mod( 'main_text_color', $default_color );
+
+       // Don't do anything if the current color is the default.
+       if ( $main_text_color === $default_color ) {
+               return;
+       }
+
+       // Convert main text hex color to rgba.
+       $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color );
+
+       // If the rgba values are empty return early.
+       if ( empty( $main_text_color_rgb ) ) {
+               return;
+       }
+
+       // If we get this far, we have a custom color scheme.
+       $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
+
+       $css = '
+               /* Custom Main Text Color */
+               body,
+               blockquote cite,
+               blockquote small,
+               .main-navigation a,
+               .menu-toggle,
+               .dropdown-toggle,
+               .social-navigation a,
+               .post-navigation a,
+               .pagination a:hover,
+               .pagination a:focus,
+               .widget-title a,
+               .site-branding .site-title a,
+               .entry-title a,
+               .page-links > .page-links-title,
+               .comment-author,
+               .comment-reply-title small a:hover,
+               .comment-reply-title small a:focus {
+                       color: %1$s
+               }
+
+               blockquote,
+               .menu-toggle.toggled-on,
+               .menu-toggle.toggled-on:hover,
+               .menu-toggle.toggled-on:focus,
+               .post-navigation,
+               .post-navigation div + div,
+               .pagination,
+               .widget,
+               .page-header,
+               .page-links a,
+               .comments-title,
+               .comment-reply-title {
+                       border-color: %1$s;
+               }
+
+               button,
+               button[disabled]:hover,
+               button[disabled]:focus,
+               input[type="button"],
+               input[type="button"][disabled]:hover,
+               input[type="button"][disabled]:focus,
+               input[type="reset"],
+               input[type="reset"][disabled]:hover,
+               input[type="reset"][disabled]:focus,
+               input[type="submit"],
+               input[type="submit"][disabled]:hover,
+               input[type="submit"][disabled]:focus,
+               .menu-toggle.toggled-on,
+               .menu-toggle.toggled-on:hover,
+               .menu-toggle.toggled-on:focus,
+               .pagination:before,
+               .pagination:after,
+               .pagination .prev,
+               .pagination .next,
+               .page-links a {
+                       background-color: %1$s;
+               }
+
+               /* Border Color */
+               fieldset,
+               pre,
+               abbr,
+               acronym,
+               table,
+               th,
+               td,
+               input[type="text"],
+               input[type="email"],
+               input[type="url"],
+               input[type="password"],
+               input[type="search"],
+               textarea,
+               .main-navigation li,
+               .main-navigation .primary-menu,
+               .menu-toggle,
+               .dropdown-toggle:after,
+               .social-navigation a,
+               .image-navigation,
+               .comment-navigation,
+               .tagcloud a,
+               .entry-content,
+               .entry-summary,
+               .page-links a,
+               .page-links > span,
+               .comment-list article,
+               .comment-list .pingback,
+               .comment-list .trackback,
+               .comment-reply-link,
+               .no-comments,
+               .widecolumn .mu_register .mu_alert {
+                       border-color: %1$s; /* Fallback for IE7 and IE8 */
+                       border-color: %2$s;
+               }
+
+               hr,
+               code {
+                       background-color: %1$s; /* Fallback for IE7 and IE8 */
+                       background-color: %2$s;
+               }
+
+               @media screen and (min-width: 56.875em) {
+                       .main-navigation ul ul,
+                       .main-navigation ul ul li {
+                               border-color: %2$s;
+                       }
+
+                       .main-navigation ul ul:before {
+                               border-top-color: %2$s;
+                               border-bottom-color: %2$s;
+                       }
+               }
+       ';
+
+       wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 );
+
+/**
+ * Enqueues front-end CSS for the secondary text color.
+ *
+ * @since Twenty Sixteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentysixteen_secondary_text_color_css() {
+       $color_scheme    = twentysixteen_get_color_scheme();
+       $default_color   = $color_scheme[4];
+       $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
+
+       // Don't do anything if the current color is the default.
+       if ( $secondary_text_color === $default_color ) {
+               return;
+       }
+
+       $css = '
+               /* Custom Secondary Text Color */
+
+               /**
+                * IE8 and earlier will drop any block with CSS3 selectors.
+                * Do not combine these styles with the next block.
+                */
+               body:not(.search-results) .entry-summary {
+                       color: %1$s;
+               }
+
+               blockquote,
+               .post-password-form label,
+               a:hover,
+               a:focus,
+               a:active,
+               .post-navigation .meta-nav,
+               .image-navigation,
+               .comment-navigation,
+               .widget_recent_entries .post-date,
+               .widget_rss .rss-date,
+               .widget_rss cite,
+               .site-description,
+               .author-bio,
+               .entry-footer,
+               .entry-footer a,
+               .sticky-post,
+               .taxonomy-description,
+               .entry-caption,
+               .comment-metadata,
+               .pingback .edit-link,
+               .comment-metadata a,
+               .pingback .comment-edit-link,
+               .comment-form label,
+               .comment-notes,
+               .comment-awaiting-moderation,
+               .logged-in-as,
+               .form-allowed-tags,
+               .site-info,
+               .site-info a,
+               .wp-caption .wp-caption-text,
+               .gallery-caption,
+               .widecolumn label,
+               .widecolumn .mu_register label {
+                       color: %1$s;
+               }
+
+               .widget_calendar tbody a:hover,
+               .widget_calendar tbody a:focus {
+                       background-color: %1$s;
+               }
+       ';
+
+       wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );