WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.patch

File 30409.patch, 19.8 KB (added by ocean90, 11 years ago)

  • src/wp-content/themes/twentyfifteen/inc/customizer.php

     
    2727                'transport'         => 'postMessage',
    2828        ) );
    2929
    30         $wp_customize->add_setting( 'color_scheme_css', array(
    31                 'default'   => '',
    32                 'transport' => 'postMessage',
    33         ) );
    34 
    3530        $wp_customize->add_control( 'color_scheme', array(
    3631                'label'    => esc_html__( 'Base Color Scheme', 'twentyfifteen' ),
    3732                'section'  => 'colors',
    … …  
    231226 */
    232227function twentyfifteen_color_scheme_css() {
    233228        $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
    234         $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    235229
    236230        // Don't do anything if the default color scheme is selected.
    237         if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
     231        if ( 'default' === $color_scheme_option ) {
    238232                return;
    239233        }
    240234
     235        $color_scheme = twentyfifteen_get_color_scheme();
     236
     237        $color_scheme_css = _get_twentyfifteen_color_scheme_css();
     238
     239        $tpl_vars = array(
     240                'background_color' => $color_scheme[0],
     241                'header_background_color' => $color_scheme[1],
     242                'box_background_color' => $color_scheme[2],
     243                'textcolor' => $color_scheme[3],
     244                'sidebar_textcolor' => $color_scheme[4],
     245                'meta_box_background_color' => $color_scheme[5]
     246        );
     247        $search_replace = array();
     248        foreach ( $tpl_vars as $key => $value ) {
     249                $search_replace[ "{{ data.$key }}" ] = $value;
     250        }
     251
     252        var_dump($search_replace);
     253
     254        $color_scheme_css = str_replace( array_keys( $search_replace ), array_values( $search_replace ), $color_scheme_css );
     255
     256
    241257        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
    242258}
    243259add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    … …  
    265281}
    266282add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    267283
    268 /**
    269  * Output an Underscore template for generating CSS for the color scheme.
    270  *
    271  * The template generates the css dynamically for instant display in the Customizer
    272  * preview, and to be saved in a `theme_mod` for display on the front-end.
    273  *
    274  * @since Twenty Fifteen 1.0
    275  */
    276 function twentyfifteen_color_scheme_css_template() {
    277         ?>
    278         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
    279         /* Color Scheme */
    280284
    281         /* Background Color */
    282         body {
    283                 background-color: {{ data.background_color }};
    284         }
     285function _get_twentyfifteen_color_scheme_css() {
     286        return '/* Color Scheme */
    285287
    286         /* Sidebar Background Color */
    287         body:before,
    288         .site-header {
    289                 background-color: {{ data.header_background_color }};
     288/* Background Color */
     289body {
     290        background-color: {{ data.background_color }};
     291}
     292
     293/* Sidebar Background Color */
     294body:before,
     295.site-header {
     296        background-color: {{ data.header_background_color }};
     297}
     298
     299/* Box Background Color */
     300.post-navigation,
     301.pagination,
     302.secondary,
     303.site-footer,
     304.hentry,
     305.page-header,
     306.page-content,
     307.comments-area {
     308        background-color: {{ data.box_background_color }};
     309}
     310
     311/* Box Background Color */
     312button,
     313input[type="button"],
     314input[type="reset"],
     315input[type="submit"],
     316.pagination .prev,
     317.pagination .next,
     318.widget_calendar tbody a,
     319.widget_calendar tbody a:hover,
     320.widget_calendar tbody a:focus,
     321.page-links a,
     322.page-links a:hover,
     323.page-links a:focus,
     324.sticky-post {
     325        color: {{ data.box_background_color }};
     326}
     327
     328/* Main Text Color */
     329button,
     330input[type="button"],
     331input[type="reset"],
     332input[type="submit"],
     333.pagination .prev,
     334.pagination .next,
     335.widget_calendar tbody a,
     336.page-links a,
     337.sticky-post {
     338        background-color: {{ data.textcolor }};
     339}
     340
     341/* Main Text Color */
     342body,
     343blockquote cite,
     344blockquote small,
     345a,
     346.dropdown-toggle:after,
     347.image-navigation a:hover,
     348.image-navigation a:focus,
     349.comment-navigation a:hover,
     350.comment-navigation a:focus,
     351.widget-title,
     352.entry-footer a:hover,
     353.entry-footer a:focus,
     354.comment-metadata a:hover,
     355.comment-metadata a:focus,
     356.pingback .edit-link a:hover,
     357.pingback .edit-link a:focus,
     358.comment-list .reply a:hover,
     359.comment-list .reply a:focus,
     360.site-info a:hover,
     361.site-info a:focus {
     362        color: {{ data.textcolor }};
     363}
     364
     365/* Main Text Color */
     366.entry-content a,
     367.entry-summary a,
     368.page-content a,
     369.comment-content a,
     370.pingback .comment-body > a,
     371.author-description a,
     372.taxonomy-description a,
     373.textwidget a,
     374.entry-footer a:hover,
     375.comment-metadata a:hover,
     376.pingback .edit-link a:hover,
     377.comment-list .reply a:hover,
     378.site-info a:hover {
     379        border-color: {{ data.textcolor }};
     380}
     381
     382/* Secondary Text Color */
     383button:hover,
     384button:focus,
     385input[type="button"]:hover,
     386input[type="button"]:focus,
     387input[type="reset"]:hover,
     388input[type="reset"]:focus,
     389input[type="submit"]:hover,
     390input[type="submit"]:focus,
     391.pagination .prev:hover,
     392.pagination .prev:focus,
     393.pagination .next:hover,
     394.pagination .next:focus,
     395.widget_calendar tbody a:hover,
     396.widget_calendar tbody a:focus,
     397.page-links a:hover,
     398.page-links a:focus {
     399        background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     400        background-color: {{ data.secondary_textcolor }};
     401}
     402
     403/* Secondary Text Color */
     404blockquote,
     405a:hover,
     406a:focus,
     407.main-navigation .menu-item-description,
     408.post-navigation .meta-nav,
     409.post-navigation a:hover .post-title,
     410.post-navigation a:focus .post-title,
     411.image-navigation,
     412.image-navigation a,
     413.comment-navigation,
     414.comment-navigation a,
     415.widget,
     416.author-heading,
     417.entry-footer,
     418.entry-footer a,
     419.taxonomy-description,
     420.page-links > .page-links-title,
     421.entry-caption,
     422.comment-author,
     423.comment-metadata,
     424.comment-metadata a,
     425.pingback .edit-link,
     426.pingback .edit-link a,
     427.post-password-form label,
     428.comment-form label,
     429.comment-notes,
     430.comment-awaiting-moderation,
     431.logged-in-as,
     432.form-allowed-tags,
     433.no-comments,
     434.site-info,
     435.site-info a,
     436.wp-caption-text,
     437.gallery-caption,
     438.comment-list .reply a {
     439        color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     440        color: {{ data.secondary_textcolor }};
     441}
     442
     443/* Secondary Text Color */
     444blockquote,
     445.logged-in-as a:hover,
     446.comment-author a:hover {
     447        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     448        border-color: {{ data.secondary_textcolor }};
     449}
     450
     451/* Border Color */
     452hr,
     453.dropdown-toggle:hover,
     454.dropdown-toggle:focus {
     455        background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     456        background-color: {{ data.border_color }};
     457}
     458
     459/* Border Color */
     460pre,
     461abbr[title],
     462table,
     463th,
     464td,
     465input,
     466textarea,
     467.main-navigation ul,
     468.main-navigation li,
     469.post-navigation,
     470.post-navigation div + div,
     471.pagination,
     472.comment-navigation,
     473.widget li,
     474.widget_categories .children,
     475.widget_nav_menu .sub-menu,
     476.widget_pages .children,
     477.site-header,
     478.site-footer,
     479.hentry + .hentry,
     480.author-info,
     481.entry-content .page-links a,
     482.page-links > span,
     483.page-header,
     484.comments-area,
     485.comment-list + .comment-respond,
     486.comment-list article,
     487.comment-list .pingback,
     488.comment-list .trackback,
     489.comment-list .reply a,
     490.no-comments {
     491        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     492        border-color: {{ data.border_color }};
     493}
     494
     495/* Border Focus Color */
     496a:focus,
     497button:focus,
     498input:focus {
     499        outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     500        outline-color: {{ data.border_focus_color }};
     501}
     502
     503input:focus,
     504textarea:focus {
     505        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     506        border-color: {{ data.border_focus_color }};
     507}
     508
     509/* Sidebar Link Color */
     510.secondary-toggle:before {
     511        color: {{ data.sidebar_textcolor }};
     512}
     513
     514.site-title a,
     515.site-description {
     516        color: {{ data.sidebar_textcolor }};
     517}
     518
     519/* Sidebar Text Color */
     520.site-title a:hover,
     521.site-title a:focus {
     522        color: {{ data.secondary_sidebar_textcolor }};
     523}
     524
     525/* Sidebar Border Color */
     526.secondary-toggle {
     527        border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     528        border-color: {{ data.sidebar_border_color }};
     529}
     530
     531/* Sidebar Border Focus Color */
     532.secondary-toggle:hover,
     533.secondary-toggle:focus {
     534        border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     535        border-color: {{ data.sidebar_border_focus_color }};
     536}
     537
     538.site-title a {
     539        outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     540        outline-color: {{ data.sidebar_border_focus_color }};
     541}
     542
     543/* Meta Background Color */
     544.entry-footer {
     545        background-color: {{ data.meta_box_background_color }};
     546}
     547
     548@media screen and (min-width: 38.75em) {
     549        /* Main Text Color */
     550        .page-header {
     551                border-color: {{ data.textcolor }};
    290552        }
     553}
    291554
    292         /* Box Background Color */
    293         .post-navigation,
    294         .pagination,
    295         .secondary,
    296         .site-footer,
    297         .hentry,
    298         .page-header,
    299         .page-content,
    300         .comments-area {
    301                 background-color: {{ data.box_background_color }};
     555@media screen and (min-width: 59.6875em) {
     556        /* Make sure its transparent on desktop */
     557        .site-header,
     558        .secondary {
     559                background-color: transparent;
    302560        }
    303561
    304         /* Box Background Color */
    305         button,
    306         input[type="button"],
    307         input[type="reset"],
    308         input[type="submit"],
    309         .pagination .prev,
    310         .pagination .next,
     562        /* Sidebar Background Color */
     563        .widget button,
     564        .widget input[type="button"],
     565        .widget input[type="reset"],
     566        .widget input[type="submit"],
    311567        .widget_calendar tbody a,
    312568        .widget_calendar tbody a:hover,
    313         .widget_calendar tbody a:focus,
    314         .page-links a,
    315         .page-links a:hover,
    316         .page-links a:focus,
    317         .sticky-post {
    318                 color: {{ data.box_background_color }};
     569        .widget_calendar tbody a:focus {
     570                color: {{ data.header_background_color }};
    319571        }
    320572
    321         /* Main Text Color */
    322         button,
    323         input[type="button"],
    324         input[type="reset"],
    325         input[type="submit"],
    326         .pagination .prev,
    327         .pagination .next,
    328         .widget_calendar tbody a,
    329         .page-links a,
    330         .sticky-post {
    331                 background-color: {{ data.textcolor }};
    332         }
    333 
    334         /* Main Text Color */
    335         body,
    336         blockquote cite,
    337         blockquote small,
    338         a,
     573        /* Sidebar Link Color */
     574        .secondary a,
    339575        .dropdown-toggle:after,
    340         .image-navigation a:hover,
    341         .image-navigation a:focus,
    342         .comment-navigation a:hover,
    343         .comment-navigation a:focus,
    344576        .widget-title,
    345         .entry-footer a:hover,
    346         .entry-footer a:focus,
    347         .comment-metadata a:hover,
    348         .comment-metadata a:focus,
    349         .pingback .edit-link a:hover,
    350         .pingback .edit-link a:focus,
    351         .comment-list .reply a:hover,
    352         .comment-list .reply a:focus,
    353         .site-info a:hover,
    354         .site-info a:focus {
    355                 color: {{ data.textcolor }};
     577        .widget blockquote cite,
     578        .widget blockquote small {
     579                color: {{ data.sidebar_textcolor }};
    356580        }
    357581
    358         /* Main Text Color */
    359         .entry-content a,
    360         .entry-summary a,
    361         .page-content a,
    362         .comment-content a,
    363         .pingback .comment-body > a,
    364         .author-description a,
    365         .taxonomy-description a,
    366         .textwidget a,
    367         .entry-footer a:hover,
    368         .comment-metadata a:hover,
    369         .pingback .edit-link a:hover,
    370         .comment-list .reply a:hover,
    371         .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     582        .widget button,
     583        .widget input[type="button"],
     584        .widget input[type="reset"],
     585        .widget input[type="submit"],
     586        .widget_calendar tbody a {
     587                background-color: {{ data.sidebar_textcolor }};
    373588        }
    374589
    375         /* Secondary Text Color */
    376         button:hover,
    377         button:focus,
    378         input[type="button"]:hover,
    379         input[type="button"]:focus,
    380         input[type="reset"]:hover,
    381         input[type="reset"]:focus,
    382         input[type="submit"]:hover,
    383         input[type="submit"]:focus,
    384         .pagination .prev:hover,
    385         .pagination .prev:focus,
    386         .pagination .next:hover,
    387         .pagination .next:focus,
    388         .widget_calendar tbody a:hover,
    389         .widget_calendar tbody a:focus,
    390         .page-links a:hover,
    391         .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     590        .textwidget a {
     591                border-color: {{ data.sidebar_textcolor }};
    394592        }
    395593
    396         /* Secondary Text Color */
    397         blockquote,
    398         a:hover,
    399         a:focus,
     594        /* Sidebar Text Color */
     595        .secondary a:hover,
     596        .secondary a:focus,
    400597        .main-navigation .menu-item-description,
    401         .post-navigation .meta-nav,
    402         .post-navigation a:hover .post-title,
    403         .post-navigation a:focus .post-title,
    404         .image-navigation,
    405         .image-navigation a,
    406         .comment-navigation,
    407         .comment-navigation a,
    408598        .widget,
    409         .author-heading,
    410         .entry-footer,
    411         .entry-footer a,
    412         .taxonomy-description,
    413         .page-links > .page-links-title,
    414         .entry-caption,
    415         .comment-author,
    416         .comment-metadata,
    417         .comment-metadata a,
    418         .pingback .edit-link,
    419         .pingback .edit-link a,
    420         .post-password-form label,
    421         .comment-form label,
    422         .comment-notes,
    423         .comment-awaiting-moderation,
    424         .logged-in-as,
    425         .form-allowed-tags,
    426         .no-comments,
    427         .site-info,
    428         .site-info a,
    429         .wp-caption-text,
    430         .gallery-caption,
    431         .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     599        .widget blockquote,
     600        .widget .wp-caption-text,
     601        .widget .gallery-caption {
     602                color: {{ data.secondary_sidebar_textcolor }};
    434603        }
    435604
    436         /* Secondary Text Color */
    437         blockquote,
    438         .logged-in-as a:hover,
    439         .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     605        .widget button:hover,
     606        .widget button:focus,
     607        .widget input[type="button"]:hover,
     608        .widget input[type="button"]:focus,
     609        .widget input[type="reset"]:hover,
     610        .widget input[type="reset"]:focus,
     611        .widget input[type="submit"]:hover,
     612        .widget input[type="submit"]:focus,
     613        .widget_calendar tbody a:hover,
     614        .widget_calendar tbody a:focus {
     615                background-color: {{ data.secondary_sidebar_textcolor }};
    442616        }
    443617
    444         /* Border Color */
    445         hr,
    446         .dropdown-toggle:hover,
    447         .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     618        .widget blockquote {
     619                border-color: {{ data.secondary_sidebar_textcolor }};
    450620        }
    451621
    452         /* Border Color */
    453         pre,
    454         abbr[title],
    455         table,
    456         th,
    457         td,
    458         input,
    459         textarea,
     622        /* Sidebar Border Color */
    460623        .main-navigation ul,
    461624        .main-navigation li,
    462         .post-navigation,
    463         .post-navigation div + div,
    464         .pagination,
    465         .comment-navigation,
     625        .widget input,
     626        .widget textarea,
     627        .widget table,
     628        .widget th,
     629        .widget td,
     630        .widget pre,
    466631        .widget li,
    467632        .widget_categories .children,
    468633        .widget_nav_menu .sub-menu,
    469634        .widget_pages .children,
    470         .site-header,
    471         .site-footer,
    472         .hentry + .hentry,
    473         .author-info,
    474         .entry-content .page-links a,
    475         .page-links > span,
    476         .page-header,
    477         .comments-area,
    478         .comment-list + .comment-respond,
    479         .comment-list article,
    480         .comment-list .pingback,
    481         .comment-list .trackback,
    482         .comment-list .reply a,
    483         .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     635        .widget abbr[title] {
     636                border-color: {{ data.sidebar_border_color }};
    486637        }
    487638
    488         /* Border Focus Color */
    489         a:focus,
    490         button:focus,
    491         input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     639        .dropdown-toggle:hover,
     640        .dropdown-toggle:focus,
     641        .widget hr {
     642                background-color: {{ data.sidebar_border_color }};
    494643        }
    495644
    496         input:focus,
    497         textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
    500         }
    501 
    502         /* Sidebar Link Color */
    503         .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
    505         }
    506 
    507         .site-title a,
    508         .site-description {
    509                 color: {{ data.sidebar_textcolor }};
    510         }
    511 
    512         /* Sidebar Text Color */
    513         .site-title a:hover,
    514         .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
    516         }
    517 
    518         /* Sidebar Border Color */
    519         .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
    522         }
    523 
    524         /* Sidebar Border Focus Color */
    525         .secondary-toggle:hover,
    526         .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     645        .widget input:focus,
     646        .widget textarea:focus {
    528647                border-color: {{ data.sidebar_border_focus_color }};
    529648        }
    530649
    531         .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     650        .sidebar a:focus,
     651        .dropdown-toggle:focus {
    533652                outline-color: {{ data.sidebar_border_focus_color }};
    534653        }
     654}';
     655}
    535656
    536         /* Meta Background Color */
    537         .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
    539         }
    540657
    541         @media screen and (min-width: 38.75em) {
    542                 /* Main Text Color */
    543                 .page-header {
    544                         border-color: {{ data.textcolor }};
    545                 }
    546         }
    547 
    548         @media screen and (min-width: 59.6875em) {
    549                 /* Make sure its transparent on desktop */
    550                 .site-header,
    551                 .secondary {
    552                         background-color: transparent;
    553                 }
    554 
    555                 /* Sidebar Background Color */
    556                 .widget button,
    557                 .widget input[type="button"],
    558                 .widget input[type="reset"],
    559                 .widget input[type="submit"],
    560                 .widget_calendar tbody a,
    561                 .widget_calendar tbody a:hover,
    562                 .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
    564                 }
    565 
    566                 /* Sidebar Link Color */
    567                 .secondary a,
    568                 .dropdown-toggle:after,
    569                 .widget-title,
    570                 .widget blockquote cite,
    571                 .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
    573                 }
    574 
    575                 .widget button,
    576                 .widget input[type="button"],
    577                 .widget input[type="reset"],
    578                 .widget input[type="submit"],
    579                 .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
    581                 }
    582 
    583                 .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
    585                 }
    586 
    587                 /* Sidebar Text Color */
    588                 .secondary a:hover,
    589                 .secondary a:focus,
    590                 .main-navigation .menu-item-description,
    591                 .widget,
    592                 .widget blockquote,
    593                 .widget .wp-caption-text,
    594                 .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
    596                 }
    597 
    598                 .widget button:hover,
    599                 .widget button:focus,
    600                 .widget input[type="button"]:hover,
    601                 .widget input[type="button"]:focus,
    602                 .widget input[type="reset"]:hover,
    603                 .widget input[type="reset"]:focus,
    604                 .widget input[type="submit"]:hover,
    605                 .widget input[type="submit"]:focus,
    606                 .widget_calendar tbody a:hover,
    607                 .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
    609                 }
    610 
    611                 .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
    613                 }
    614 
    615                 /* Sidebar Border Color */
    616                 .main-navigation ul,
    617                 .main-navigation li,
    618                 .widget input,
    619                 .widget textarea,
    620                 .widget table,
    621                 .widget th,
    622                 .widget td,
    623                 .widget pre,
    624                 .widget li,
    625                 .widget_categories .children,
    626                 .widget_nav_menu .sub-menu,
    627                 .widget_pages .children,
    628                 .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
    630                 }
    631 
    632                 .dropdown-toggle:hover,
    633                 .dropdown-toggle:focus,
    634                 .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
    636                 }
    637 
    638                 .widget input:focus,
    639                 .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
    641                 }
    642 
    643                 .sidebar a:focus,
    644                 .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
    646                 }
    647         }
     658/**
     659 * Output an Underscore template for generating CSS for the color scheme.
     660 *
     661 * The template generates the css dynamically for instant display in the Customizer
     662 * preview, and to be saved in a `theme_mod` for display on the front-end.
     663 *
     664 * @since Twenty Fifteen 1.0
     665 */
     666function twentyfifteen_color_scheme_css_template() {
     667        ?>
     668        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     669                <?php echo _get_twentyfifteen_color_scheme_css(); ?>
    648670        </script>
    649671        <?php
    650672}

  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

     
    4747        } );
    4848
    4949        // Generate the CSS for the current Color Scheme.
    50         function getCSS() {
     50        function setCSS() {
    5151                var scheme = api( 'color_scheme' )(),
    5252                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
    5353
    … …  
    7171        _.each( colorSettings, function( setting ) {
    7272                api( setting, function( setting ) {
    7373                        setting.bind( _.throttle( function() {
    74                                 api( 'color_scheme_css' ).set( getCSS() );
     74                                setCSS();
    7575                        }, 250 ) );
    7676                } );
    7777        } );