bad570b93eec6b11c82434b518e73502c5551476
[autoinstalls/wordpress.git] / wp-content / themes / twentysixteen / inc / customizer.php
1 <?php
2 /**
3  * Twenty Sixteen Customizer functionality
4  *
5  * @package WordPress
6  * @subpackage Twenty_Sixteen
7  * @since Twenty Sixteen 1.0
8  */
9
10 /**
11  * Sets up the WordPress core custom header and custom background features.
12  *
13  * @since Twenty Sixteen 1.0
14  *
15  * @see twentysixteen_header_style()
16  */
17 function twentysixteen_custom_header_and_background() {
18         $color_scheme             = twentysixteen_get_color_scheme();
19         $default_background_color = trim( $color_scheme[0], '#' );
20         $default_text_color       = trim( $color_scheme[3], '#' );
21
22         /**
23          * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen.
24          *
25          * @since Twenty Sixteen 1.0
26          *
27          * @param array $args {
28          *     An array of custom-background support arguments.
29          *
30          *     @type string $default-color Default color of the background.
31          * }
32          */
33         add_theme_support( 'custom-background', apply_filters( 'twentysixteen_custom_background_args', array(
34                 'default-color' => $default_background_color,
35         ) ) );
36
37         /**
38          * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen.
39          *
40          * @since Twenty Sixteen 1.0
41          *
42          * @param array $args {
43          *     An array of custom-header support arguments.
44          *
45          *     @type string $default-text-color Default color of the header text.
46          *     @type int      $width            Width in pixels of the custom header image. Default 1200.
47          *     @type int      $height           Height in pixels of the custom header image. Default 280.
48          *     @type bool     $flex-height      Whether to allow flexible-height header images. Default true.
49          *     @type callable $wp-head-callback Callback function used to style the header image and text
50          *                                      displayed on the blog.
51          * }
52          */
53         add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array(
54                 'default-text-color'     => $default_text_color,
55                 'width'                  => 1200,
56                 'height'                 => 280,
57                 'flex-height'            => true,
58                 'wp-head-callback'       => 'twentysixteen_header_style',
59         ) ) );
60 }
61 add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' );
62
63 if ( ! function_exists( 'twentysixteen_header_style' ) ) :
64 /**
65  * Styles the header text displayed on the site.
66  *
67  * Create your own twentysixteen_header_style() function to override in a child theme.
68  *
69  * @since Twenty Sixteen 1.0
70  *
71  * @see twentysixteen_custom_header_and_background().
72  */
73 function twentysixteen_header_style() {
74         // If the header text option is untouched, let's bail.
75         if ( display_header_text() ) {
76                 return;
77         }
78
79         // If the header text has been hidden.
80         ?>
81         <style type="text/css" id="twentysixteen-header-css">
82                 .site-branding {
83                         margin: 0 auto 0 0;
84                 }
85
86                 .site-branding .site-title,
87                 .site-description {
88                         clip: rect(1px, 1px, 1px, 1px);
89                         position: absolute;
90                 }
91         </style>
92         <?php
93 }
94 endif; // twentysixteen_header_style
95
96 /**
97  * Adds postMessage support for site title and description for the Customizer.
98  *
99  * @since Twenty Sixteen 1.0
100  *
101  * @param WP_Customize_Manager $wp_customize The Customizer object.
102  */
103 function twentysixteen_customize_register( $wp_customize ) {
104         $color_scheme = twentysixteen_get_color_scheme();
105
106         $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
107         $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
108
109         // Add color scheme setting and control.
110         $wp_customize->add_setting( 'color_scheme', array(
111                 'default'           => 'default',
112                 'sanitize_callback' => 'twentysixteen_sanitize_color_scheme',
113                 'transport'         => 'postMessage',
114         ) );
115
116         $wp_customize->add_control( 'color_scheme', array(
117                 'label'    => __( 'Base Color Scheme', 'twentysixteen' ),
118                 'section'  => 'colors',
119                 'type'     => 'select',
120                 'choices'  => twentysixteen_get_color_scheme_choices(),
121                 'priority' => 1,
122         ) );
123
124         // Add page background color setting and control.
125         $wp_customize->add_setting( 'page_background_color', array(
126                 'default'           => $color_scheme[1],
127                 'sanitize_callback' => 'sanitize_hex_color',
128                 'transport'         => 'postMessage',
129         ) );
130
131         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'page_background_color', array(
132                 'label'       => __( 'Page Background Color', 'twentysixteen' ),
133                 'section'     => 'colors',
134         ) ) );
135
136         // Remove the core header textcolor control, as it shares the main text color.
137         $wp_customize->remove_control( 'header_textcolor' );
138
139         // Add link color setting and control.
140         $wp_customize->add_setting( 'link_color', array(
141                 'default'           => $color_scheme[2],
142                 'sanitize_callback' => 'sanitize_hex_color',
143                 'transport'         => 'postMessage',
144         ) );
145
146         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
147                 'label'       => __( 'Link Color', 'twentysixteen' ),
148                 'section'     => 'colors',
149         ) ) );
150
151         // Add main text color setting and control.
152         $wp_customize->add_setting( 'main_text_color', array(
153                 'default'           => $color_scheme[3],
154                 'sanitize_callback' => 'sanitize_hex_color',
155                 'transport'         => 'postMessage',
156         ) );
157
158         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array(
159                 'label'       => __( 'Main Text Color', 'twentysixteen' ),
160                 'section'     => 'colors',
161         ) ) );
162
163         // Add secondary text color setting and control.
164         $wp_customize->add_setting( 'secondary_text_color', array(
165                 'default'           => $color_scheme[4],
166                 'sanitize_callback' => 'sanitize_hex_color',
167                 'transport'         => 'postMessage',
168         ) );
169
170         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array(
171                 'label'       => __( 'Secondary Text Color', 'twentysixteen' ),
172                 'section'     => 'colors',
173         ) ) );
174 }
175 add_action( 'customize_register', 'twentysixteen_customize_register', 11 );
176
177 /**
178  * Registers color schemes for Twenty Sixteen.
179  *
180  * Can be filtered with {@see 'twentysixteen_color_schemes'}.
181  *
182  * The order of colors in a colors array:
183  * 1. Main Background Color.
184  * 2. Page Background Color.
185  * 3. Link Color.
186  * 4. Main Text Color.
187  * 5. Secondary Text Color.
188  *
189  * @since Twenty Sixteen 1.0
190  *
191  * @return array An associative array of color scheme options.
192  */
193 function twentysixteen_get_color_schemes() {
194         /**
195          * Filter the color schemes registered for use with Twenty Sixteen.
196          *
197          * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'.
198          *
199          * @since Twenty Sixteen 1.0
200          *
201          * @param array $schemes {
202          *     Associative array of color schemes data.
203          *
204          *     @type array $slug {
205          *         Associative array of information for setting up the color scheme.
206          *
207          *         @type string $label  Color scheme label.
208          *         @type array  $colors HEX codes for default colors prepended with a hash symbol ('#').
209          *                              Colors are defined in the following order: Main background, page
210          *                              background, link, main text, secondary text.
211          *     }
212          * }
213          */
214         return apply_filters( 'twentysixteen_color_schemes', array(
215                 'default' => array(
216                         'label'  => __( 'Default', 'twentysixteen' ),
217                         'colors' => array(
218                                 '#1a1a1a',
219                                 '#ffffff',
220                                 '#007acc',
221                                 '#1a1a1a',
222                                 '#686868',
223                         ),
224                 ),
225                 'dark' => array(
226                         'label'  => __( 'Dark', 'twentysixteen' ),
227                         'colors' => array(
228                                 '#262626',
229                                 '#1a1a1a',
230                                 '#9adffd',
231                                 '#e5e5e5',
232                                 '#c1c1c1',
233                         ),
234                 ),
235                 'gray' => array(
236                         'label'  => __( 'Gray', 'twentysixteen' ),
237                         'colors' => array(
238                                 '#616a73',
239                                 '#4d545c',
240                                 '#c7c7c7',
241                                 '#f2f2f2',
242                                 '#f2f2f2',
243                         ),
244                 ),
245                 'red' => array(
246                         'label'  => __( 'Red', 'twentysixteen' ),
247                         'colors' => array(
248                                 '#ffffff',
249                                 '#ff675f',
250                                 '#640c1f',
251                                 '#402b30',
252                                 '#402b30',
253                         ),
254                 ),
255                 'yellow' => array(
256                         'label'  => __( 'Yellow', 'twentysixteen' ),
257                         'colors' => array(
258                                 '#3b3721',
259                                 '#ffef8e',
260                                 '#774e24',
261                                 '#3b3721',
262                                 '#5b4d3e',
263                         ),
264                 ),
265         ) );
266 }
267
268 if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) :
269 /**
270  * Retrieves the current Twenty Sixteen color scheme.
271  *
272  * Create your own twentysixteen_get_color_scheme() function to override in a child theme.
273  *
274  * @since Twenty Sixteen 1.0
275  *
276  * @return array An associative array of either the current or default color scheme HEX values.
277  */
278 function twentysixteen_get_color_scheme() {
279         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
280         $color_schemes       = twentysixteen_get_color_schemes();
281
282         if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
283                 return $color_schemes[ $color_scheme_option ]['colors'];
284         }
285
286         return $color_schemes['default']['colors'];
287 }
288 endif; // twentysixteen_get_color_scheme
289
290 if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) :
291 /**
292  * Retrieves an array of color scheme choices registered for Twenty Sixteen.
293  *
294  * Create your own twentysixteen_get_color_scheme_choices() function to override
295  * in a child theme.
296  *
297  * @since Twenty Sixteen 1.0
298  *
299  * @return array Array of color schemes.
300  */
301 function twentysixteen_get_color_scheme_choices() {
302         $color_schemes                = twentysixteen_get_color_schemes();
303         $color_scheme_control_options = array();
304
305         foreach ( $color_schemes as $color_scheme => $value ) {
306                 $color_scheme_control_options[ $color_scheme ] = $value['label'];
307         }
308
309         return $color_scheme_control_options;
310 }
311 endif; // twentysixteen_get_color_scheme_choices
312
313
314 if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) :
315 /**
316  * Handles sanitization for Twenty Sixteen color schemes.
317  *
318  * Create your own twentysixteen_sanitize_color_scheme() function to override
319  * in a child theme.
320  *
321  * @since Twenty Sixteen 1.0
322  *
323  * @param string $value Color scheme name value.
324  * @return string Color scheme name.
325  */
326 function twentysixteen_sanitize_color_scheme( $value ) {
327         $color_schemes = twentysixteen_get_color_scheme_choices();
328
329         if ( ! array_key_exists( $value, $color_schemes ) ) {
330                 return 'default';
331         }
332
333         return $value;
334 }
335 endif; // twentysixteen_sanitize_color_scheme
336
337 /**
338  * Enqueues front-end CSS for color scheme.
339  *
340  * @since Twenty Sixteen 1.0
341  *
342  * @see wp_add_inline_style()
343  */
344 function twentysixteen_color_scheme_css() {
345         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
346
347         // Don't do anything if the default color scheme is selected.
348         if ( 'default' === $color_scheme_option ) {
349                 return;
350         }
351
352         $color_scheme = twentysixteen_get_color_scheme();
353
354         // Convert main text hex color to rgba.
355         $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] );
356
357         // If the rgba values are empty return early.
358         if ( empty( $color_textcolor_rgb ) ) {
359                 return;
360         }
361
362         // If we get this far, we have a custom color scheme.
363         $colors = array(
364                 'background_color'      => $color_scheme[0],
365                 'page_background_color' => $color_scheme[1],
366                 'link_color'            => $color_scheme[2],
367                 'main_text_color'       => $color_scheme[3],
368                 'secondary_text_color'  => $color_scheme[4],
369                 'border_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ),
370
371         );
372
373         $color_scheme_css = twentysixteen_get_color_scheme_css( $colors );
374
375         wp_add_inline_style( 'twentysixteen-style', $color_scheme_css );
376 }
377 add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' );
378
379 /**
380  * Binds the JS listener to make Customizer color_scheme control.
381  *
382  * Passes color scheme data as colorScheme global.
383  *
384  * @since Twenty Sixteen 1.0
385  */
386 function twentysixteen_customize_control_js() {
387         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20150825', true );
388         wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() );
389 }
390 add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' );
391
392 /**
393  * Binds JS handlers to make the Customizer preview reload changes asynchronously.
394  *
395  * @since Twenty Sixteen 1.0
396  */
397 function twentysixteen_customize_preview_js() {
398         wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20150825', true );
399 }
400 add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' );
401
402 /**
403  * Returns CSS for the color schemes.
404  *
405  * @since Twenty Sixteen 1.0
406  *
407  * @param array $colors Color scheme colors.
408  * @return string Color scheme CSS.
409  */
410 function twentysixteen_get_color_scheme_css( $colors ) {
411         $colors = wp_parse_args( $colors, array(
412                 'background_color'      => '',
413                 'page_background_color' => '',
414                 'link_color'            => '',
415                 'main_text_color'       => '',
416                 'secondary_text_color'  => '',
417                 'border_color'          => '',
418         ) );
419
420         return <<<CSS
421         /* Color Scheme */
422
423         /* Background Color */
424         body {
425                 background-color: {$colors['background_color']};
426         }
427
428         /* Page Background Color */
429         .site {
430                 background-color: {$colors['page_background_color']};
431         }
432
433         mark,
434         ins,
435         button,
436         button[disabled]:hover,
437         button[disabled]:focus,
438         input[type="button"],
439         input[type="button"][disabled]:hover,
440         input[type="button"][disabled]:focus,
441         input[type="reset"],
442         input[type="reset"][disabled]:hover,
443         input[type="reset"][disabled]:focus,
444         input[type="submit"],
445         input[type="submit"][disabled]:hover,
446         input[type="submit"][disabled]:focus,
447         .menu-toggle.toggled-on,
448         .menu-toggle.toggled-on:hover,
449         .menu-toggle.toggled-on:focus,
450         .pagination .prev,
451         .pagination .next,
452         .pagination .prev:hover,
453         .pagination .prev:focus,
454         .pagination .next:hover,
455         .pagination .next:focus,
456         .pagination .nav-links:before,
457         .pagination .nav-links:after,
458         .widget_calendar tbody a,
459         .widget_calendar tbody a:hover,
460         .widget_calendar tbody a:focus,
461         .page-links a,
462         .page-links a:hover,
463         .page-links a:focus {
464                 color: {$colors['page_background_color']};
465         }
466
467         /* Link Color */
468         .menu-toggle:hover,
469         .menu-toggle:focus,
470         a,
471         .main-navigation a:hover,
472         .main-navigation a:focus,
473         .dropdown-toggle:hover,
474         .dropdown-toggle:focus,
475         .social-navigation a:hover:before,
476         .social-navigation a:focus:before,
477         .post-navigation a:hover .post-title,
478         .post-navigation a:focus .post-title,
479         .tagcloud a:hover,
480         .tagcloud a:focus,
481         .site-branding .site-title a:hover,
482         .site-branding .site-title a:focus,
483         .entry-title a:hover,
484         .entry-title a:focus,
485         .entry-footer a:hover,
486         .entry-footer a:focus,
487         .comment-metadata a:hover,
488         .comment-metadata a:focus,
489         .pingback .comment-edit-link:hover,
490         .pingback .comment-edit-link:focus,
491         .comment-reply-link,
492         .comment-reply-link:hover,
493         .comment-reply-link:focus,
494         .required,
495         .site-info a:hover,
496         .site-info a:focus {
497                 color: {$colors['link_color']};
498         }
499
500         mark,
501         ins,
502         button:hover,
503         button:focus,
504         input[type="button"]:hover,
505         input[type="button"]:focus,
506         input[type="reset"]:hover,
507         input[type="reset"]:focus,
508         input[type="submit"]:hover,
509         input[type="submit"]:focus,
510         .pagination .prev:hover,
511         .pagination .prev:focus,
512         .pagination .next:hover,
513         .pagination .next:focus,
514         .widget_calendar tbody a,
515         .page-links a:hover,
516         .page-links a:focus {
517                 background-color: {$colors['link_color']};
518         }
519
520         input[type="text"]:focus,
521         input[type="email"]:focus,
522         input[type="url"]:focus,
523         input[type="password"]:focus,
524         input[type="search"]:focus,
525         textarea:focus,
526         .tagcloud a:hover,
527         .tagcloud a:focus,
528         .menu-toggle:hover,
529         .menu-toggle:focus {
530                 border-color: {$colors['link_color']};
531         }
532
533         /* Main Text Color */
534         body,
535         blockquote cite,
536         blockquote small,
537         .main-navigation a,
538         .menu-toggle,
539         .dropdown-toggle,
540         .social-navigation a,
541         .post-navigation a,
542         .pagination a:hover,
543         .pagination a:focus,
544         .widget-title a,
545         .site-branding .site-title a,
546         .entry-title a,
547         .page-links > .page-links-title,
548         .comment-author,
549         .comment-reply-title small a:hover,
550         .comment-reply-title small a:focus {
551                 color: {$colors['main_text_color']};
552         }
553
554         blockquote,
555         .menu-toggle.toggled-on,
556         .menu-toggle.toggled-on:hover,
557         .menu-toggle.toggled-on:focus,
558         .post-navigation,
559         .post-navigation div + div,
560         .pagination,
561         .widget,
562         .page-header,
563         .page-links a,
564         .comments-title,
565         .comment-reply-title {
566                 border-color: {$colors['main_text_color']};
567         }
568
569         button,
570         button[disabled]:hover,
571         button[disabled]:focus,
572         input[type="button"],
573         input[type="button"][disabled]:hover,
574         input[type="button"][disabled]:focus,
575         input[type="reset"],
576         input[type="reset"][disabled]:hover,
577         input[type="reset"][disabled]:focus,
578         input[type="submit"],
579         input[type="submit"][disabled]:hover,
580         input[type="submit"][disabled]:focus,
581         .menu-toggle.toggled-on,
582         .menu-toggle.toggled-on:hover,
583         .menu-toggle.toggled-on:focus,
584         .pagination:before,
585         .pagination:after,
586         .pagination .prev,
587         .pagination .next,
588         .page-links a {
589                 background-color: {$colors['main_text_color']};
590         }
591
592         /* Secondary Text Color */
593
594         /**
595          * IE8 and earlier will drop any block with CSS3 selectors.
596          * Do not combine these styles with the next block.
597          */
598         body:not(.search-results) .entry-summary {
599                 color: {$colors['secondary_text_color']};
600         }
601
602         blockquote,
603         .post-password-form label,
604         a:hover,
605         a:focus,
606         a:active,
607         .post-navigation .meta-nav,
608         .image-navigation,
609         .comment-navigation,
610         .widget_recent_entries .post-date,
611         .widget_rss .rss-date,
612         .widget_rss cite,
613         .site-description,
614         .author-bio,
615         .entry-footer,
616         .entry-footer a,
617         .sticky-post,
618         .taxonomy-description,
619         .entry-caption,
620         .comment-metadata,
621         .pingback .edit-link,
622         .comment-metadata a,
623         .pingback .comment-edit-link,
624         .comment-form label,
625         .comment-notes,
626         .comment-awaiting-moderation,
627         .logged-in-as,
628         .form-allowed-tags,
629         .site-info,
630         .site-info a,
631         .wp-caption .wp-caption-text,
632         .gallery-caption,
633         .widecolumn label,
634         .widecolumn .mu_register label {
635                 color: {$colors['secondary_text_color']};
636         }
637
638         .widget_calendar tbody a:hover,
639         .widget_calendar tbody a:focus {
640                 background-color: {$colors['secondary_text_color']};
641         }
642
643         /* Border Color */
644         fieldset,
645         pre,
646         abbr,
647         acronym,
648         table,
649         th,
650         td,
651         input[type="text"],
652         input[type="email"],
653         input[type="url"],
654         input[type="password"],
655         input[type="search"],
656         textarea,
657         .main-navigation li,
658         .main-navigation .primary-menu,
659         .menu-toggle,
660         .dropdown-toggle:after,
661         .social-navigation a,
662         .image-navigation,
663         .comment-navigation,
664         .tagcloud a,
665         .entry-content,
666         .entry-summary,
667         .page-links a,
668         .page-links > span,
669         .comment-list article,
670         .comment-list .pingback,
671         .comment-list .trackback,
672         .comment-reply-link,
673         .no-comments,
674         .widecolumn .mu_register .mu_alert {
675                 border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
676                 border-color: {$colors['border_color']};
677         }
678
679         hr,
680         code {
681                 background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
682                 background-color: {$colors['border_color']};
683         }
684
685         @media screen and (min-width: 56.875em) {
686                 .main-navigation li:hover > a,
687                 .main-navigation li.focus > a {
688                         color: {$colors['link_color']};
689                 }
690
691                 .main-navigation ul ul,
692                 .main-navigation ul ul li {
693                         border-color: {$colors['border_color']};
694                 }
695
696                 .main-navigation ul ul:before {
697                         border-top-color: {$colors['border_color']};
698                         border-bottom-color: {$colors['border_color']};
699                 }
700
701                 .main-navigation ul ul li {
702                         background-color: {$colors['page_background_color']};
703                 }
704
705                 .main-navigation ul ul:after {
706                         border-top-color: {$colors['page_background_color']};
707                         border-bottom-color: {$colors['page_background_color']};
708                 }
709         }
710
711 CSS;
712 }
713
714
715 /**
716  * Outputs an Underscore template for generating CSS for the color scheme.
717  *
718  * The template generates the css dynamically for instant display in the
719  * Customizer preview.
720  *
721  * @since Twenty Sixteen 1.0
722  */
723 function twentysixteen_color_scheme_css_template() {
724         $colors = array(
725                 'background_color'      => '{{ data.background_color }}',
726                 'page_background_color' => '{{ data.page_background_color }}',
727                 'link_color'            => '{{ data.link_color }}',
728                 'main_text_color'       => '{{ data.main_text_color }}',
729                 'secondary_text_color'  => '{{ data.secondary_text_color }}',
730                 'border_color'          => '{{ data.border_color }}',
731         );
732         ?>
733         <script type="text/html" id="tmpl-twentysixteen-color-scheme">
734                 <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
735         </script>
736         <?php
737 }
738 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
739
740 /**
741  * Enqueues front-end CSS for the page background color.
742  *
743  * @since Twenty Sixteen 1.0
744  *
745  * @see wp_add_inline_style()
746  */
747 function twentysixteen_page_background_color_css() {
748         $color_scheme          = twentysixteen_get_color_scheme();
749         $default_color         = $color_scheme[1];
750         $page_background_color = get_theme_mod( 'page_background_color', $default_color );
751
752         // Don't do anything if the current color is the default.
753         if ( $page_background_color === $default_color ) {
754                 return;
755         }
756
757         $css = '
758                 /* Custom Page Background Color */
759                 .site {
760                         background-color: %1$s;
761                 }
762
763                 mark,
764                 ins,
765                 button,
766                 button[disabled]:hover,
767                 button[disabled]:focus,
768                 input[type="button"],
769                 input[type="button"][disabled]:hover,
770                 input[type="button"][disabled]:focus,
771                 input[type="reset"],
772                 input[type="reset"][disabled]:hover,
773                 input[type="reset"][disabled]:focus,
774                 input[type="submit"],
775                 input[type="submit"][disabled]:hover,
776                 input[type="submit"][disabled]:focus,
777                 .menu-toggle.toggled-on,
778                 .menu-toggle.toggled-on:hover,
779                 .menu-toggle.toggled-on:focus,
780                 .pagination .prev,
781                 .pagination .next,
782                 .pagination .prev:hover,
783                 .pagination .prev:focus,
784                 .pagination .next:hover,
785                 .pagination .next:focus,
786                 .pagination .nav-links:before,
787                 .pagination .nav-links:after,
788                 .widget_calendar tbody a,
789                 .widget_calendar tbody a:hover,
790                 .widget_calendar tbody a:focus,
791                 .page-links a,
792                 .page-links a:hover,
793                 .page-links a:focus {
794                         color: %1$s;
795                 }
796
797                 @media screen and (min-width: 56.875em) {
798                         .main-navigation ul ul li {
799                                 background-color: %1$s;
800                         }
801
802                         .main-navigation ul ul:after {
803                                 border-top-color: %1$s;
804                                 border-bottom-color: %1$s;
805                         }
806                 }
807         ';
808
809         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) );
810 }
811 add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 );
812
813 /**
814  * Enqueues front-end CSS for the link color.
815  *
816  * @since Twenty Sixteen 1.0
817  *
818  * @see wp_add_inline_style()
819  */
820 function twentysixteen_link_color_css() {
821         $color_scheme    = twentysixteen_get_color_scheme();
822         $default_color   = $color_scheme[2];
823         $link_color = get_theme_mod( 'link_color', $default_color );
824
825         // Don't do anything if the current color is the default.
826         if ( $link_color === $default_color ) {
827                 return;
828         }
829
830         $css = '
831                 /* Custom Link Color */
832                 .menu-toggle:hover,
833                 .menu-toggle:focus,
834                 a,
835                 .main-navigation a:hover,
836                 .main-navigation a:focus,
837                 .dropdown-toggle:hover,
838                 .dropdown-toggle:focus,
839                 .social-navigation a:hover:before,
840                 .social-navigation a:focus:before,
841                 .post-navigation a:hover .post-title,
842                 .post-navigation a:focus .post-title,
843                 .tagcloud a:hover,
844                 .tagcloud a:focus,
845                 .site-branding .site-title a:hover,
846                 .site-branding .site-title a:focus,
847                 .entry-title a:hover,
848                 .entry-title a:focus,
849                 .entry-footer a:hover,
850                 .entry-footer a:focus,
851                 .comment-metadata a:hover,
852                 .comment-metadata a:focus,
853                 .pingback .comment-edit-link:hover,
854                 .pingback .comment-edit-link:focus,
855                 .comment-reply-link,
856                 .comment-reply-link:hover,
857                 .comment-reply-link:focus,
858                 .required,
859                 .site-info a:hover,
860                 .site-info a:focus {
861                         color: %1$s;
862                 }
863
864                 mark,
865                 ins,
866                 button:hover,
867                 button:focus,
868                 input[type="button"]:hover,
869                 input[type="button"]:focus,
870                 input[type="reset"]:hover,
871                 input[type="reset"]:focus,
872                 input[type="submit"]:hover,
873                 input[type="submit"]:focus,
874                 .pagination .prev:hover,
875                 .pagination .prev:focus,
876                 .pagination .next:hover,
877                 .pagination .next:focus,
878                 .widget_calendar tbody a,
879                 .page-links a:hover,
880                 .page-links a:focus {
881                         background-color: %1$s;
882                 }
883
884                 input[type="text"]:focus,
885                 input[type="email"]:focus,
886                 input[type="url"]:focus,
887                 input[type="password"]:focus,
888                 input[type="search"]:focus,
889                 textarea:focus,
890                 .tagcloud a:hover,
891                 .tagcloud a:focus,
892                 .menu-toggle:hover,
893                 .menu-toggle:focus {
894                         border-color: %1$s;
895                 }
896
897                 @media screen and (min-width: 56.875em) {
898                         .main-navigation li:hover > a,
899                         .main-navigation li.focus > a {
900                                 color: %1$s;
901                         }
902                 }
903         ';
904
905         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) );
906 }
907 add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 );
908
909 /**
910  * Enqueues front-end CSS for the main text color.
911  *
912  * @since Twenty Sixteen 1.0
913  *
914  * @see wp_add_inline_style()
915  */
916 function twentysixteen_main_text_color_css() {
917         $color_scheme    = twentysixteen_get_color_scheme();
918         $default_color   = $color_scheme[3];
919         $main_text_color = get_theme_mod( 'main_text_color', $default_color );
920
921         // Don't do anything if the current color is the default.
922         if ( $main_text_color === $default_color ) {
923                 return;
924         }
925
926         // Convert main text hex color to rgba.
927         $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color );
928
929         // If the rgba values are empty return early.
930         if ( empty( $main_text_color_rgb ) ) {
931                 return;
932         }
933
934         // If we get this far, we have a custom color scheme.
935         $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
936
937         $css = '
938                 /* Custom Main Text Color */
939                 body,
940                 blockquote cite,
941                 blockquote small,
942                 .main-navigation a,
943                 .menu-toggle,
944                 .dropdown-toggle,
945                 .social-navigation a,
946                 .post-navigation a,
947                 .pagination a:hover,
948                 .pagination a:focus,
949                 .widget-title a,
950                 .site-branding .site-title a,
951                 .entry-title a,
952                 .page-links > .page-links-title,
953                 .comment-author,
954                 .comment-reply-title small a:hover,
955                 .comment-reply-title small a:focus {
956                         color: %1$s
957                 }
958
959                 blockquote,
960                 .menu-toggle.toggled-on,
961                 .menu-toggle.toggled-on:hover,
962                 .menu-toggle.toggled-on:focus,
963                 .post-navigation,
964                 .post-navigation div + div,
965                 .pagination,
966                 .widget,
967                 .page-header,
968                 .page-links a,
969                 .comments-title,
970                 .comment-reply-title {
971                         border-color: %1$s;
972                 }
973
974                 button,
975                 button[disabled]:hover,
976                 button[disabled]:focus,
977                 input[type="button"],
978                 input[type="button"][disabled]:hover,
979                 input[type="button"][disabled]:focus,
980                 input[type="reset"],
981                 input[type="reset"][disabled]:hover,
982                 input[type="reset"][disabled]:focus,
983                 input[type="submit"],
984                 input[type="submit"][disabled]:hover,
985                 input[type="submit"][disabled]:focus,
986                 .menu-toggle.toggled-on,
987                 .menu-toggle.toggled-on:hover,
988                 .menu-toggle.toggled-on:focus,
989                 .pagination:before,
990                 .pagination:after,
991                 .pagination .prev,
992                 .pagination .next,
993                 .page-links a {
994                         background-color: %1$s;
995                 }
996
997                 /* Border Color */
998                 fieldset,
999                 pre,
1000                 abbr,
1001                 acronym,
1002                 table,
1003                 th,
1004                 td,
1005                 input[type="text"],
1006                 input[type="email"],
1007                 input[type="url"],
1008                 input[type="password"],
1009                 input[type="search"],
1010                 textarea,
1011                 .main-navigation li,
1012                 .main-navigation .primary-menu,
1013                 .menu-toggle,
1014                 .dropdown-toggle:after,
1015                 .social-navigation a,
1016                 .image-navigation,
1017                 .comment-navigation,
1018                 .tagcloud a,
1019                 .entry-content,
1020                 .entry-summary,
1021                 .page-links a,
1022                 .page-links > span,
1023                 .comment-list article,
1024                 .comment-list .pingback,
1025                 .comment-list .trackback,
1026                 .comment-reply-link,
1027                 .no-comments,
1028                 .widecolumn .mu_register .mu_alert {
1029                         border-color: %1$s; /* Fallback for IE7 and IE8 */
1030                         border-color: %2$s;
1031                 }
1032
1033                 hr,
1034                 code {
1035                         background-color: %1$s; /* Fallback for IE7 and IE8 */
1036                         background-color: %2$s;
1037                 }
1038
1039                 @media screen and (min-width: 56.875em) {
1040                         .main-navigation ul ul,
1041                         .main-navigation ul ul li {
1042                                 border-color: %2$s;
1043                         }
1044
1045                         .main-navigation ul ul:before {
1046                                 border-top-color: %2$s;
1047                                 border-bottom-color: %2$s;
1048                         }
1049                 }
1050         ';
1051
1052         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) );
1053 }
1054 add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 );
1055
1056 /**
1057  * Enqueues front-end CSS for the secondary text color.
1058  *
1059  * @since Twenty Sixteen 1.0
1060  *
1061  * @see wp_add_inline_style()
1062  */
1063 function twentysixteen_secondary_text_color_css() {
1064         $color_scheme    = twentysixteen_get_color_scheme();
1065         $default_color   = $color_scheme[4];
1066         $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
1067
1068         // Don't do anything if the current color is the default.
1069         if ( $secondary_text_color === $default_color ) {
1070                 return;
1071         }
1072
1073         $css = '
1074                 /* Custom Secondary Text Color */
1075
1076                 /**
1077                  * IE8 and earlier will drop any block with CSS3 selectors.
1078                  * Do not combine these styles with the next block.
1079                  */
1080                 body:not(.search-results) .entry-summary {
1081                         color: %1$s;
1082                 }
1083
1084                 blockquote,
1085                 .post-password-form label,
1086                 a:hover,
1087                 a:focus,
1088                 a:active,
1089                 .post-navigation .meta-nav,
1090                 .image-navigation,
1091                 .comment-navigation,
1092                 .widget_recent_entries .post-date,
1093                 .widget_rss .rss-date,
1094                 .widget_rss cite,
1095                 .site-description,
1096                 .author-bio,
1097                 .entry-footer,
1098                 .entry-footer a,
1099                 .sticky-post,
1100                 .taxonomy-description,
1101                 .entry-caption,
1102                 .comment-metadata,
1103                 .pingback .edit-link,
1104                 .comment-metadata a,
1105                 .pingback .comment-edit-link,
1106                 .comment-form label,
1107                 .comment-notes,
1108                 .comment-awaiting-moderation,
1109                 .logged-in-as,
1110                 .form-allowed-tags,
1111                 .site-info,
1112                 .site-info a,
1113                 .wp-caption .wp-caption-text,
1114                 .gallery-caption,
1115                 .widecolumn label,
1116                 .widecolumn .mu_register label {
1117                         color: %1$s;
1118                 }
1119
1120                 .widget_calendar tbody a:hover,
1121                 .widget_calendar tbody a:focus {
1122                         background-color: %1$s;
1123                 }
1124         ';
1125
1126         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) );
1127 }
1128 add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );