WordPress 4.4
[autoinstalls/wordpress.git] / wp-content / themes / twentyfifteen / inc / customizer.php
1 <?php
2 /**
3  * Twenty Fifteen Customizer functionality
4  *
5  * @package WordPress
6  * @subpackage Twenty_Fifteen
7  * @since Twenty Fifteen 1.0
8  */
9
10 /**
11  * Add postMessage support for site title and description for the Customizer.
12  *
13  * @since Twenty Fifteen 1.0
14  *
15  * @param WP_Customize_Manager $wp_customize Customizer object.
16  */
17 function twentyfifteen_customize_register( $wp_customize ) {
18         $color_scheme = twentyfifteen_get_color_scheme();
19
20         $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
21         $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
22
23         // Add color scheme setting and control.
24         $wp_customize->add_setting( 'color_scheme', array(
25                 'default'           => 'default',
26                 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
27                 'transport'         => 'postMessage',
28         ) );
29
30         $wp_customize->add_control( 'color_scheme', array(
31                 'label'    => __( 'Base Color Scheme', 'twentyfifteen' ),
32                 'section'  => 'colors',
33                 'type'     => 'select',
34                 'choices'  => twentyfifteen_get_color_scheme_choices(),
35                 'priority' => 1,
36         ) );
37
38         // Add custom header and sidebar text color setting and control.
39         $wp_customize->add_setting( 'sidebar_textcolor', array(
40                 'default'           => $color_scheme[4],
41                 'sanitize_callback' => 'sanitize_hex_color',
42                 'transport'         => 'postMessage',
43         ) );
44
45         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
46                 'label'       => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
47                 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
48                 'section'     => 'colors',
49         ) ) );
50
51         // Remove the core header textcolor control, as it shares the sidebar text color.
52         $wp_customize->remove_control( 'header_textcolor' );
53
54         // Add custom header and sidebar background color setting and control.
55         $wp_customize->add_setting( 'header_background_color', array(
56                 'default'           => $color_scheme[1],
57                 'sanitize_callback' => 'sanitize_hex_color',
58                 'transport'         => 'postMessage',
59         ) );
60
61         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
62                 'label'       => __( 'Header and Sidebar Background Color', 'twentyfifteen' ),
63                 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
64                 'section'     => 'colors',
65         ) ) );
66
67         // Add an additional description to the header image section.
68         $wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' );
69 }
70 add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
71
72 /**
73  * Register color schemes for Twenty Fifteen.
74  *
75  * Can be filtered with {@see 'twentyfifteen_color_schemes'}.
76  *
77  * The order of colors in a colors array:
78  * 1. Main Background Color.
79  * 2. Sidebar Background Color.
80  * 3. Box Background Color.
81  * 4. Main Text and Link Color.
82  * 5. Sidebar Text and Link Color.
83  * 6. Meta Box Background Color.
84  *
85  * @since Twenty Fifteen 1.0
86  *
87  * @return array An associative array of color scheme options.
88  */
89 function twentyfifteen_get_color_schemes() {
90         /**
91          * Filter the color schemes registered for use with Twenty Fifteen.
92          *
93          * The default schemes include 'default', 'dark', 'yellow', 'pink', 'purple', and 'blue'.
94          *
95          * @since Twenty Fifteen 1.0
96          *
97          * @param array $schemes {
98          *     Associative array of color schemes data.
99          *
100          *     @type array $slug {
101          *         Associative array of information for setting up the color scheme.
102          *
103          *         @type string $label  Color scheme label.
104          *         @type array  $colors HEX codes for default colors prepended with a hash symbol ('#').
105          *                              Colors are defined in the following order: Main background, sidebar
106          *                              background, box background, main text and link, sidebar text and link,
107          *                              meta box background.
108          *     }
109          * }
110          */
111         return apply_filters( 'twentyfifteen_color_schemes', array(
112                 'default' => array(
113                         'label'  => __( 'Default', 'twentyfifteen' ),
114                         'colors' => array(
115                                 '#f1f1f1',
116                                 '#ffffff',
117                                 '#ffffff',
118                                 '#333333',
119                                 '#333333',
120                                 '#f7f7f7',
121                         ),
122                 ),
123                 'dark'    => array(
124                         'label'  => __( 'Dark', 'twentyfifteen' ),
125                         'colors' => array(
126                                 '#111111',
127                                 '#202020',
128                                 '#202020',
129                                 '#bebebe',
130                                 '#bebebe',
131                                 '#1b1b1b',
132                         ),
133                 ),
134                 'yellow'  => array(
135                         'label'  => __( 'Yellow', 'twentyfifteen' ),
136                         'colors' => array(
137                                 '#f4ca16',
138                                 '#ffdf00',
139                                 '#ffffff',
140                                 '#111111',
141                                 '#111111',
142                                 '#f1f1f1',
143                         ),
144                 ),
145                 'pink'    => array(
146                         'label'  => __( 'Pink', 'twentyfifteen' ),
147                         'colors' => array(
148                                 '#ffe5d1',
149                                 '#e53b51',
150                                 '#ffffff',
151                                 '#352712',
152                                 '#ffffff',
153                                 '#f1f1f1',
154                         ),
155                 ),
156                 'purple'  => array(
157                         'label'  => __( 'Purple', 'twentyfifteen' ),
158                         'colors' => array(
159                                 '#674970',
160                                 '#2e2256',
161                                 '#ffffff',
162                                 '#2e2256',
163                                 '#ffffff',
164                                 '#f1f1f1',
165                         ),
166                 ),
167                 'blue'   => array(
168                         'label'  => __( 'Blue', 'twentyfifteen' ),
169                         'colors' => array(
170                                 '#e9f2f9',
171                                 '#55c3dc',
172                                 '#ffffff',
173                                 '#22313f',
174                                 '#ffffff',
175                                 '#f1f1f1',
176                         ),
177                 ),
178         ) );
179 }
180
181 if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) :
182 /**
183  * Get the current Twenty Fifteen color scheme.
184  *
185  * @since Twenty Fifteen 1.0
186  *
187  * @return array An associative array of either the current or default color scheme hex values.
188  */
189 function twentyfifteen_get_color_scheme() {
190         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
191         $color_schemes       = twentyfifteen_get_color_schemes();
192
193         if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
194                 return $color_schemes[ $color_scheme_option ]['colors'];
195         }
196
197         return $color_schemes['default']['colors'];
198 }
199 endif; // twentyfifteen_get_color_scheme
200
201 if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) :
202 /**
203  * Returns an array of color scheme choices registered for Twenty Fifteen.
204  *
205  * @since Twenty Fifteen 1.0
206  *
207  * @return array Array of color schemes.
208  */
209 function twentyfifteen_get_color_scheme_choices() {
210         $color_schemes                = twentyfifteen_get_color_schemes();
211         $color_scheme_control_options = array();
212
213         foreach ( $color_schemes as $color_scheme => $value ) {
214                 $color_scheme_control_options[ $color_scheme ] = $value['label'];
215         }
216
217         return $color_scheme_control_options;
218 }
219 endif; // twentyfifteen_get_color_scheme_choices
220
221 if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) :
222 /**
223  * Sanitization callback for color schemes.
224  *
225  * @since Twenty Fifteen 1.0
226  *
227  * @param string $value Color scheme name value.
228  * @return string Color scheme name.
229  */
230 function twentyfifteen_sanitize_color_scheme( $value ) {
231         $color_schemes = twentyfifteen_get_color_scheme_choices();
232
233         if ( ! array_key_exists( $value, $color_schemes ) ) {
234                 $value = 'default';
235         }
236
237         return $value;
238 }
239 endif; // twentyfifteen_sanitize_color_scheme
240
241 /**
242  * Enqueues front-end CSS for color scheme.
243  *
244  * @since Twenty Fifteen 1.0
245  *
246  * @see wp_add_inline_style()
247  */
248 function twentyfifteen_color_scheme_css() {
249         $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
250
251         // Don't do anything if the default color scheme is selected.
252         if ( 'default' === $color_scheme_option ) {
253                 return;
254         }
255
256         $color_scheme = twentyfifteen_get_color_scheme();
257
258         // Convert main and sidebar text hex color to rgba.
259         $color_textcolor_rgb         = twentyfifteen_hex2rgb( $color_scheme[3] );
260         $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
261         $colors = array(
262                 'background_color'            => $color_scheme[0],
263                 'header_background_color'     => $color_scheme[1],
264                 'box_background_color'        => $color_scheme[2],
265                 'textcolor'                   => $color_scheme[3],
266                 'secondary_textcolor'         => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
267                 'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
268                 'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
269                 'sidebar_textcolor'           => $color_scheme[4],
270                 'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
271                 'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
272                 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
273                 'meta_box_background_color'   => $color_scheme[5],
274         );
275
276         $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
277
278         wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
279 }
280 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
281
282 /**
283  * Binds JS listener to make Customizer color_scheme control.
284  *
285  * Passes color scheme data as colorScheme global.
286  *
287  * @since Twenty Fifteen 1.0
288  */
289 function twentyfifteen_customize_control_js() {
290         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true );
291         wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
292 }
293 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
294
295 /**
296  * Binds JS handlers to make the Customizer preview reload changes asynchronously.
297  *
298  * @since Twenty Fifteen 1.0
299  */
300 function twentyfifteen_customize_preview_js() {
301         wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true );
302 }
303 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
304
305 /**
306  * Returns CSS for the color schemes.
307  *
308  * @since Twenty Fifteen 1.0
309  *
310  * @param array $colors Color scheme colors.
311  * @return string Color scheme CSS.
312  */
313 function twentyfifteen_get_color_scheme_css( $colors ) {
314         $colors = wp_parse_args( $colors, array(
315                 'background_color'            => '',
316                 'header_background_color'     => '',
317                 'box_background_color'        => '',
318                 'textcolor'                   => '',
319                 'secondary_textcolor'         => '',
320                 'border_color'                => '',
321                 'border_focus_color'          => '',
322                 'sidebar_textcolor'           => '',
323                 'sidebar_border_color'        => '',
324                 'sidebar_border_focus_color'  => '',
325                 'secondary_sidebar_textcolor' => '',
326                 'meta_box_background_color'   => '',
327         ) );
328
329         $css = <<<CSS
330         /* Color Scheme */
331
332         /* Background Color */
333         body {
334                 background-color: {$colors['background_color']};
335         }
336
337         /* Sidebar Background Color */
338         body:before,
339         .site-header {
340                 background-color: {$colors['header_background_color']};
341         }
342
343         /* Box Background Color */
344         .post-navigation,
345         .pagination,
346         .secondary,
347         .site-footer,
348         .hentry,
349         .page-header,
350         .page-content,
351         .comments-area,
352         .widecolumn {
353                 background-color: {$colors['box_background_color']};
354         }
355
356         /* Box Background Color */
357         button,
358         input[type="button"],
359         input[type="reset"],
360         input[type="submit"],
361         .pagination .prev,
362         .pagination .next,
363         .widget_calendar tbody a,
364         .widget_calendar tbody a:hover,
365         .widget_calendar tbody a:focus,
366         .page-links a,
367         .page-links a:hover,
368         .page-links a:focus,
369         .sticky-post {
370                 color: {$colors['box_background_color']};
371         }
372
373         /* Main Text Color */
374         button,
375         input[type="button"],
376         input[type="reset"],
377         input[type="submit"],
378         .pagination .prev,
379         .pagination .next,
380         .widget_calendar tbody a,
381         .page-links a,
382         .sticky-post {
383                 background-color: {$colors['textcolor']};
384         }
385
386         /* Main Text Color */
387         body,
388         blockquote cite,
389         blockquote small,
390         a,
391         .dropdown-toggle:after,
392         .image-navigation a:hover,
393         .image-navigation a:focus,
394         .comment-navigation a:hover,
395         .comment-navigation a:focus,
396         .widget-title,
397         .entry-footer a:hover,
398         .entry-footer a:focus,
399         .comment-metadata a:hover,
400         .comment-metadata a:focus,
401         .pingback .edit-link a:hover,
402         .pingback .edit-link a:focus,
403         .comment-list .reply a:hover,
404         .comment-list .reply a:focus,
405         .site-info a:hover,
406         .site-info a:focus {
407                 color: {$colors['textcolor']};
408         }
409
410         /* Main Text Color */
411         .entry-content a,
412         .entry-summary a,
413         .page-content a,
414         .comment-content a,
415         .pingback .comment-body > a,
416         .author-description a,
417         .taxonomy-description a,
418         .textwidget a,
419         .entry-footer a:hover,
420         .comment-metadata a:hover,
421         .pingback .edit-link a:hover,
422         .comment-list .reply a:hover,
423         .site-info a:hover {
424                 border-color: {$colors['textcolor']};
425         }
426
427         /* Secondary Text Color */
428         button:hover,
429         button:focus,
430         input[type="button"]:hover,
431         input[type="button"]:focus,
432         input[type="reset"]:hover,
433         input[type="reset"]:focus,
434         input[type="submit"]:hover,
435         input[type="submit"]:focus,
436         .pagination .prev:hover,
437         .pagination .prev:focus,
438         .pagination .next:hover,
439         .pagination .next:focus,
440         .widget_calendar tbody a:hover,
441         .widget_calendar tbody a:focus,
442         .page-links a:hover,
443         .page-links a:focus {
444                 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
445                 background-color: {$colors['secondary_textcolor']};
446         }
447
448         /* Secondary Text Color */
449         blockquote,
450         a:hover,
451         a:focus,
452         .main-navigation .menu-item-description,
453         .post-navigation .meta-nav,
454         .post-navigation a:hover .post-title,
455         .post-navigation a:focus .post-title,
456         .image-navigation,
457         .image-navigation a,
458         .comment-navigation,
459         .comment-navigation a,
460         .widget,
461         .author-heading,
462         .entry-footer,
463         .entry-footer a,
464         .taxonomy-description,
465         .page-links > .page-links-title,
466         .entry-caption,
467         .comment-author,
468         .comment-metadata,
469         .comment-metadata a,
470         .pingback .edit-link,
471         .pingback .edit-link a,
472         .post-password-form label,
473         .comment-form label,
474         .comment-notes,
475         .comment-awaiting-moderation,
476         .logged-in-as,
477         .form-allowed-tags,
478         .no-comments,
479         .site-info,
480         .site-info a,
481         .wp-caption-text,
482         .gallery-caption,
483         .comment-list .reply a,
484         .widecolumn label,
485         .widecolumn .mu_register label {
486                 color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
487                 color: {$colors['secondary_textcolor']};
488         }
489
490         /* Secondary Text Color */
491         blockquote,
492         .logged-in-as a:hover,
493         .comment-author a:hover {
494                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
495                 border-color: {$colors['secondary_textcolor']};
496         }
497
498         /* Border Color */
499         hr,
500         .dropdown-toggle:hover,
501         .dropdown-toggle:focus {
502                 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
503                 background-color: {$colors['border_color']};
504         }
505
506         /* Border Color */
507         pre,
508         abbr[title],
509         table,
510         th,
511         td,
512         input,
513         textarea,
514         .main-navigation ul,
515         .main-navigation li,
516         .post-navigation,
517         .post-navigation div + div,
518         .pagination,
519         .comment-navigation,
520         .widget li,
521         .widget_categories .children,
522         .widget_nav_menu .sub-menu,
523         .widget_pages .children,
524         .site-header,
525         .site-footer,
526         .hentry + .hentry,
527         .author-info,
528         .entry-content .page-links a,
529         .page-links > span,
530         .page-header,
531         .comments-area,
532         .comment-list + .comment-respond,
533         .comment-list article,
534         .comment-list .pingback,
535         .comment-list .trackback,
536         .comment-list .reply a,
537         .no-comments {
538                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
539                 border-color: {$colors['border_color']};
540         }
541
542         /* Border Focus Color */
543         a:focus,
544         button:focus,
545         input:focus {
546                 outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
547                 outline-color: {$colors['border_focus_color']};
548         }
549
550         input:focus,
551         textarea:focus {
552                 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
553                 border-color: {$colors['border_focus_color']};
554         }
555
556         /* Sidebar Link Color */
557         .secondary-toggle:before {
558                 color: {$colors['sidebar_textcolor']};
559         }
560
561         .site-title a,
562         .site-description {
563                 color: {$colors['sidebar_textcolor']};
564         }
565
566         /* Sidebar Text Color */
567         .site-title a:hover,
568         .site-title a:focus {
569                 color: {$colors['secondary_sidebar_textcolor']};
570         }
571
572         /* Sidebar Border Color */
573         .secondary-toggle {
574                 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
575                 border-color: {$colors['sidebar_border_color']};
576         }
577
578         /* Sidebar Border Focus Color */
579         .secondary-toggle:hover,
580         .secondary-toggle:focus {
581                 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
582                 border-color: {$colors['sidebar_border_focus_color']};
583         }
584
585         .site-title a {
586                 outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
587                 outline-color: {$colors['sidebar_border_focus_color']};
588         }
589
590         /* Meta Background Color */
591         .entry-footer {
592                 background-color: {$colors['meta_box_background_color']};
593         }
594
595         @media screen and (min-width: 38.75em) {
596                 /* Main Text Color */
597                 .page-header {
598                         border-color: {$colors['textcolor']};
599                 }
600         }
601
602         @media screen and (min-width: 59.6875em) {
603                 /* Make sure its transparent on desktop */
604                 .site-header,
605                 .secondary {
606                         background-color: transparent;
607                 }
608
609                 /* Sidebar Background Color */
610                 .widget button,
611                 .widget input[type="button"],
612                 .widget input[type="reset"],
613                 .widget input[type="submit"],
614                 .widget_calendar tbody a,
615                 .widget_calendar tbody a:hover,
616                 .widget_calendar tbody a:focus {
617                         color: {$colors['header_background_color']};
618                 }
619
620                 /* Sidebar Link Color */
621                 .secondary a,
622                 .dropdown-toggle:after,
623                 .widget-title,
624                 .widget blockquote cite,
625                 .widget blockquote small {
626                         color: {$colors['sidebar_textcolor']};
627                 }
628
629                 .widget button,
630                 .widget input[type="button"],
631                 .widget input[type="reset"],
632                 .widget input[type="submit"],
633                 .widget_calendar tbody a {
634                         background-color: {$colors['sidebar_textcolor']};
635                 }
636
637                 .textwidget a {
638                         border-color: {$colors['sidebar_textcolor']};
639                 }
640
641                 /* Sidebar Text Color */
642                 .secondary a:hover,
643                 .secondary a:focus,
644                 .main-navigation .menu-item-description,
645                 .widget,
646                 .widget blockquote,
647                 .widget .wp-caption-text,
648                 .widget .gallery-caption {
649                         color: {$colors['secondary_sidebar_textcolor']};
650                 }
651
652                 .widget button:hover,
653                 .widget button:focus,
654                 .widget input[type="button"]:hover,
655                 .widget input[type="button"]:focus,
656                 .widget input[type="reset"]:hover,
657                 .widget input[type="reset"]:focus,
658                 .widget input[type="submit"]:hover,
659                 .widget input[type="submit"]:focus,
660                 .widget_calendar tbody a:hover,
661                 .widget_calendar tbody a:focus {
662                         background-color: {$colors['secondary_sidebar_textcolor']};
663                 }
664
665                 .widget blockquote {
666                         border-color: {$colors['secondary_sidebar_textcolor']};
667                 }
668
669                 /* Sidebar Border Color */
670                 .main-navigation ul,
671                 .main-navigation li,
672                 .widget input,
673                 .widget textarea,
674                 .widget table,
675                 .widget th,
676                 .widget td,
677                 .widget pre,
678                 .widget li,
679                 .widget_categories .children,
680                 .widget_nav_menu .sub-menu,
681                 .widget_pages .children,
682                 .widget abbr[title] {
683                         border-color: {$colors['sidebar_border_color']};
684                 }
685
686                 .dropdown-toggle:hover,
687                 .dropdown-toggle:focus,
688                 .widget hr {
689                         background-color: {$colors['sidebar_border_color']};
690                 }
691
692                 .widget input:focus,
693                 .widget textarea:focus {
694                         border-color: {$colors['sidebar_border_focus_color']};
695                 }
696
697                 .sidebar a:focus,
698                 .dropdown-toggle:focus {
699                         outline-color: {$colors['sidebar_border_focus_color']};
700                 }
701         }
702 CSS;
703
704         return $css;
705 }
706
707 /**
708  * Output an Underscore template for generating CSS for the color scheme.
709  *
710  * The template generates the css dynamically for instant display in the Customizer
711  * preview.
712  *
713  * @since Twenty Fifteen 1.0
714  */
715 function twentyfifteen_color_scheme_css_template() {
716         $colors = array(
717                 'background_color'            => '{{ data.background_color }}',
718                 'header_background_color'     => '{{ data.header_background_color }}',
719                 'box_background_color'        => '{{ data.box_background_color }}',
720                 'textcolor'                   => '{{ data.textcolor }}',
721                 'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
722                 'border_color'                => '{{ data.border_color }}',
723                 'border_focus_color'          => '{{ data.border_focus_color }}',
724                 'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
725                 'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
726                 'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
727                 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
728                 'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
729         );
730         ?>
731         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
732                 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
733         </script>
734         <?php
735 }
736 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );