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