Index: src/wp-content/themes/twentyfifteen/inc/customizer.php
===================================================================
--- src/wp-content/themes/twentyfifteen/inc/customizer.php	(revision 30830)
+++ src/wp-content/themes/twentyfifteen/inc/customizer.php	(working copy)
@@ -27,11 +27,6 @@
 		'transport'         => 'postMessage',
 	) );
 
-	$wp_customize->add_setting( 'color_scheme_css', array(
-		'default'   => '',
-		'transport' => 'postMessage',
-	) );
-
 	$wp_customize->add_control( 'color_scheme', array(
 		'label'    => esc_html__( 'Base Color Scheme', 'twentyfifteen' ),
 		'section'  => 'colors',
@@ -231,13 +226,34 @@
  */
 function twentyfifteen_color_scheme_css() {
 	$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
-	$color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
 
 	// Don't do anything if the default color scheme is selected.
-	if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
+	if ( 'default' === $color_scheme_option ) {
 		return;
 	}
 
+	$color_scheme = twentyfifteen_get_color_scheme();
+
+	$color_scheme_css = _get_twentyfifteen_color_scheme_css();
+
+	$tpl_vars = array(
+		'background_color' => $color_scheme[0],
+		'header_background_color' => $color_scheme[1],
+		'box_background_color' => $color_scheme[2],
+		'textcolor' => $color_scheme[3],
+		'sidebar_textcolor' => $color_scheme[4],
+		'meta_box_background_color' => $color_scheme[5]
+	);
+	$search_replace = array();
+	foreach ( $tpl_vars as $key => $value ) {
+		$search_replace[ "{{ data.$key }}" ] = $value;
+	}
+
+	var_dump($search_replace);
+
+	$color_scheme_css = str_replace( array_keys( $search_replace ), array_values( $search_replace ), $color_scheme_css );
+
+
 	wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
@@ -265,386 +281,392 @@
 }
 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
 
-/**
- * Output an Underscore template for generating CSS for the color scheme.
- *
- * The template generates the css dynamically for instant display in the Customizer
- * preview, and to be saved in a `theme_mod` for display on the front-end.
- *
- * @since Twenty Fifteen 1.0
- */
-function twentyfifteen_color_scheme_css_template() {
-	?>
-	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
-	/* Color Scheme */
 
-	/* Background Color */
-	body {
-		background-color: {{ data.background_color }};
-	}
+function _get_twentyfifteen_color_scheme_css() {
+	return '/* Color Scheme */
 
-	/* Sidebar Background Color */
-	body:before,
-	.site-header {
-		background-color: {{ data.header_background_color }};
+/* Background Color */
+body {
+	background-color: {{ data.background_color }};
+}
+
+/* Sidebar Background Color */
+body:before,
+.site-header {
+	background-color: {{ data.header_background_color }};
+}
+
+/* Box Background Color */
+.post-navigation,
+.pagination,
+.secondary,
+.site-footer,
+.hentry,
+.page-header,
+.page-content,
+.comments-area {
+	background-color: {{ data.box_background_color }};
+}
+
+/* Box Background Color */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.pagination .prev,
+.pagination .next,
+.widget_calendar tbody a,
+.widget_calendar tbody a:hover,
+.widget_calendar tbody a:focus,
+.page-links a,
+.page-links a:hover,
+.page-links a:focus,
+.sticky-post {
+	color: {{ data.box_background_color }};
+}
+
+/* Main Text Color */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.pagination .prev,
+.pagination .next,
+.widget_calendar tbody a,
+.page-links a,
+.sticky-post {
+	background-color: {{ data.textcolor }};
+}
+
+/* Main Text Color */
+body,
+blockquote cite,
+blockquote small,
+a,
+.dropdown-toggle:after,
+.image-navigation a:hover,
+.image-navigation a:focus,
+.comment-navigation a:hover,
+.comment-navigation a:focus,
+.widget-title,
+.entry-footer a:hover,
+.entry-footer a:focus,
+.comment-metadata a:hover,
+.comment-metadata a:focus,
+.pingback .edit-link a:hover,
+.pingback .edit-link a:focus,
+.comment-list .reply a:hover,
+.comment-list .reply a:focus,
+.site-info a:hover,
+.site-info a:focus {
+	color: {{ data.textcolor }};
+}
+
+/* Main Text Color */
+.entry-content a,
+.entry-summary a,
+.page-content a,
+.comment-content a,
+.pingback .comment-body > a,
+.author-description a,
+.taxonomy-description a,
+.textwidget a,
+.entry-footer a:hover,
+.comment-metadata a:hover,
+.pingback .edit-link a:hover,
+.comment-list .reply a:hover,
+.site-info a:hover {
+	border-color: {{ data.textcolor }};
+}
+
+/* Secondary Text Color */
+button:hover,
+button:focus,
+input[type="button"]:hover,
+input[type="button"]:focus,
+input[type="reset"]:hover,
+input[type="reset"]:focus,
+input[type="submit"]:hover,
+input[type="submit"]:focus,
+.pagination .prev:hover,
+.pagination .prev:focus,
+.pagination .next:hover,
+.pagination .next:focus,
+.widget_calendar tbody a:hover,
+.widget_calendar tbody a:focus,
+.page-links a:hover,
+.page-links a:focus {
+	background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	background-color: {{ data.secondary_textcolor }};
+}
+
+/* Secondary Text Color */
+blockquote,
+a:hover,
+a:focus,
+.main-navigation .menu-item-description,
+.post-navigation .meta-nav,
+.post-navigation a:hover .post-title,
+.post-navigation a:focus .post-title,
+.image-navigation,
+.image-navigation a,
+.comment-navigation,
+.comment-navigation a,
+.widget,
+.author-heading,
+.entry-footer,
+.entry-footer a,
+.taxonomy-description,
+.page-links > .page-links-title,
+.entry-caption,
+.comment-author,
+.comment-metadata,
+.comment-metadata a,
+.pingback .edit-link,
+.pingback .edit-link a,
+.post-password-form label,
+.comment-form label,
+.comment-notes,
+.comment-awaiting-moderation,
+.logged-in-as,
+.form-allowed-tags,
+.no-comments,
+.site-info,
+.site-info a,
+.wp-caption-text,
+.gallery-caption,
+.comment-list .reply a {
+	color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	color: {{ data.secondary_textcolor }};
+}
+
+/* Secondary Text Color */
+blockquote,
+.logged-in-as a:hover,
+.comment-author a:hover {
+	border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	border-color: {{ data.secondary_textcolor }};
+}
+
+/* Border Color */
+hr,
+.dropdown-toggle:hover,
+.dropdown-toggle:focus {
+	background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	background-color: {{ data.border_color }};
+}
+
+/* Border Color */
+pre,
+abbr[title],
+table,
+th,
+td,
+input,
+textarea,
+.main-navigation ul,
+.main-navigation li,
+.post-navigation,
+.post-navigation div + div,
+.pagination,
+.comment-navigation,
+.widget li,
+.widget_categories .children,
+.widget_nav_menu .sub-menu,
+.widget_pages .children,
+.site-header,
+.site-footer,
+.hentry + .hentry,
+.author-info,
+.entry-content .page-links a,
+.page-links > span,
+.page-header,
+.comments-area,
+.comment-list + .comment-respond,
+.comment-list article,
+.comment-list .pingback,
+.comment-list .trackback,
+.comment-list .reply a,
+.no-comments {
+	border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	border-color: {{ data.border_color }};
+}
+
+/* Border Focus Color */
+a:focus,
+button:focus,
+input:focus {
+	outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	outline-color: {{ data.border_focus_color }};
+}
+
+input:focus,
+textarea:focus {
+	border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
+	border-color: {{ data.border_focus_color }};
+}
+
+/* Sidebar Link Color */
+.secondary-toggle:before {
+	color: {{ data.sidebar_textcolor }};
+}
+
+.site-title a,
+.site-description {
+	color: {{ data.sidebar_textcolor }};
+}
+
+/* Sidebar Text Color */
+.site-title a:hover,
+.site-title a:focus {
+	color: {{ data.secondary_sidebar_textcolor }};
+}
+
+/* Sidebar Border Color */
+.secondary-toggle {
+	border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+	border-color: {{ data.sidebar_border_color }};
+}
+
+/* Sidebar Border Focus Color */
+.secondary-toggle:hover,
+.secondary-toggle:focus {
+	border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+	border-color: {{ data.sidebar_border_focus_color }};
+}
+
+.site-title a {
+	outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+	outline-color: {{ data.sidebar_border_focus_color }};
+}
+
+/* Meta Background Color */
+.entry-footer {
+	background-color: {{ data.meta_box_background_color }};
+}
+
+@media screen and (min-width: 38.75em) {
+	/* Main Text Color */
+	.page-header {
+		border-color: {{ data.textcolor }};
 	}
+}
 
-	/* Box Background Color */
-	.post-navigation,
-	.pagination,
-	.secondary,
-	.site-footer,
-	.hentry,
-	.page-header,
-	.page-content,
-	.comments-area {
-		background-color: {{ data.box_background_color }};
+@media screen and (min-width: 59.6875em) {
+	/* Make sure its transparent on desktop */
+	.site-header,
+	.secondary {
+		background-color: transparent;
 	}
 
-	/* Box Background Color */
-	button,
-	input[type="button"],
-	input[type="reset"],
-	input[type="submit"],
-	.pagination .prev,
-	.pagination .next,
+	/* Sidebar Background Color */
+	.widget button,
+	.widget input[type="button"],
+	.widget input[type="reset"],
+	.widget input[type="submit"],
 	.widget_calendar tbody a,
 	.widget_calendar tbody a:hover,
-	.widget_calendar tbody a:focus,
-	.page-links a,
-	.page-links a:hover,
-	.page-links a:focus,
-	.sticky-post {
-		color: {{ data.box_background_color }};
+	.widget_calendar tbody a:focus {
+		color: {{ data.header_background_color }};
 	}
 
-	/* Main Text Color */
-	button,
-	input[type="button"],
-	input[type="reset"],
-	input[type="submit"],
-	.pagination .prev,
-	.pagination .next,
-	.widget_calendar tbody a,
-	.page-links a,
-	.sticky-post {
-		background-color: {{ data.textcolor }};
-	}
-
-	/* Main Text Color */
-	body,
-	blockquote cite,
-	blockquote small,
-	a,
+	/* Sidebar Link Color */
+	.secondary a,
 	.dropdown-toggle:after,
-	.image-navigation a:hover,
-	.image-navigation a:focus,
-	.comment-navigation a:hover,
-	.comment-navigation a:focus,
 	.widget-title,
-	.entry-footer a:hover,
-	.entry-footer a:focus,
-	.comment-metadata a:hover,
-	.comment-metadata a:focus,
-	.pingback .edit-link a:hover,
-	.pingback .edit-link a:focus,
-	.comment-list .reply a:hover,
-	.comment-list .reply a:focus,
-	.site-info a:hover,
-	.site-info a:focus {
-		color: {{ data.textcolor }};
+	.widget blockquote cite,
+	.widget blockquote small {
+		color: {{ data.sidebar_textcolor }};
 	}
 
-	/* Main Text Color */
-	.entry-content a,
-	.entry-summary a,
-	.page-content a,
-	.comment-content a,
-	.pingback .comment-body > a,
-	.author-description a,
-	.taxonomy-description a,
-	.textwidget a,
-	.entry-footer a:hover,
-	.comment-metadata a:hover,
-	.pingback .edit-link a:hover,
-	.comment-list .reply a:hover,
-	.site-info a:hover {
-		border-color: {{ data.textcolor }};
+	.widget button,
+	.widget input[type="button"],
+	.widget input[type="reset"],
+	.widget input[type="submit"],
+	.widget_calendar tbody a {
+		background-color: {{ data.sidebar_textcolor }};
 	}
 
-	/* Secondary Text Color */
-	button:hover,
-	button:focus,
-	input[type="button"]:hover,
-	input[type="button"]:focus,
-	input[type="reset"]:hover,
-	input[type="reset"]:focus,
-	input[type="submit"]:hover,
-	input[type="submit"]:focus,
-	.pagination .prev:hover,
-	.pagination .prev:focus,
-	.pagination .next:hover,
-	.pagination .next:focus,
-	.widget_calendar tbody a:hover,
-	.widget_calendar tbody a:focus,
-	.page-links a:hover,
-	.page-links a:focus {
-		background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		background-color: {{ data.secondary_textcolor }};
+	.textwidget a {
+		border-color: {{ data.sidebar_textcolor }};
 	}
 
-	/* Secondary Text Color */
-	blockquote,
-	a:hover,
-	a:focus,
+	/* Sidebar Text Color */
+	.secondary a:hover,
+	.secondary a:focus,
 	.main-navigation .menu-item-description,
-	.post-navigation .meta-nav,
-	.post-navigation a:hover .post-title,
-	.post-navigation a:focus .post-title,
-	.image-navigation,
-	.image-navigation a,
-	.comment-navigation,
-	.comment-navigation a,
 	.widget,
-	.author-heading,
-	.entry-footer,
-	.entry-footer a,
-	.taxonomy-description,
-	.page-links > .page-links-title,
-	.entry-caption,
-	.comment-author,
-	.comment-metadata,
-	.comment-metadata a,
-	.pingback .edit-link,
-	.pingback .edit-link a,
-	.post-password-form label,
-	.comment-form label,
-	.comment-notes,
-	.comment-awaiting-moderation,
-	.logged-in-as,
-	.form-allowed-tags,
-	.no-comments,
-	.site-info,
-	.site-info a,
-	.wp-caption-text,
-	.gallery-caption,
-	.comment-list .reply a {
-		color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		color: {{ data.secondary_textcolor }};
+	.widget blockquote,
+	.widget .wp-caption-text,
+	.widget .gallery-caption {
+		color: {{ data.secondary_sidebar_textcolor }};
 	}
 
-	/* Secondary Text Color */
-	blockquote,
-	.logged-in-as a:hover,
-	.comment-author a:hover {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.secondary_textcolor }};
+	.widget button:hover,
+	.widget button:focus,
+	.widget input[type="button"]:hover,
+	.widget input[type="button"]:focus,
+	.widget input[type="reset"]:hover,
+	.widget input[type="reset"]:focus,
+	.widget input[type="submit"]:hover,
+	.widget input[type="submit"]:focus,
+	.widget_calendar tbody a:hover,
+	.widget_calendar tbody a:focus {
+		background-color: {{ data.secondary_sidebar_textcolor }};
 	}
 
-	/* Border Color */
-	hr,
-	.dropdown-toggle:hover,
-	.dropdown-toggle:focus {
-		background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		background-color: {{ data.border_color }};
+	.widget blockquote {
+		border-color: {{ data.secondary_sidebar_textcolor }};
 	}
 
-	/* Border Color */
-	pre,
-	abbr[title],
-	table,
-	th,
-	td,
-	input,
-	textarea,
+	/* Sidebar Border Color */
 	.main-navigation ul,
 	.main-navigation li,
-	.post-navigation,
-	.post-navigation div + div,
-	.pagination,
-	.comment-navigation,
+	.widget input,
+	.widget textarea,
+	.widget table,
+	.widget th,
+	.widget td,
+	.widget pre,
 	.widget li,
 	.widget_categories .children,
 	.widget_nav_menu .sub-menu,
 	.widget_pages .children,
-	.site-header,
-	.site-footer,
-	.hentry + .hentry,
-	.author-info,
-	.entry-content .page-links a,
-	.page-links > span,
-	.page-header,
-	.comments-area,
-	.comment-list + .comment-respond,
-	.comment-list article,
-	.comment-list .pingback,
-	.comment-list .trackback,
-	.comment-list .reply a,
-	.no-comments {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.border_color }};
+	.widget abbr[title] {
+		border-color: {{ data.sidebar_border_color }};
 	}
 
-	/* Border Focus Color */
-	a:focus,
-	button:focus,
-	input:focus {
-		outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		outline-color: {{ data.border_focus_color }};
+	.dropdown-toggle:hover,
+	.dropdown-toggle:focus,
+	.widget hr {
+		background-color: {{ data.sidebar_border_color }};
 	}
 
-	input:focus,
-	textarea:focus {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.border_focus_color }};
-	}
-
-	/* Sidebar Link Color */
-	.secondary-toggle:before {
-		color: {{ data.sidebar_textcolor }};
-	}
-
-	.site-title a,
-	.site-description {
-		color: {{ data.sidebar_textcolor }};
-	}
-
-	/* Sidebar Text Color */
-	.site-title a:hover,
-	.site-title a:focus {
-		color: {{ data.secondary_sidebar_textcolor }};
-	}
-
-	/* Sidebar Border Color */
-	.secondary-toggle {
-		border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.sidebar_border_color }};
-	}
-
-	/* Sidebar Border Focus Color */
-	.secondary-toggle:hover,
-	.secondary-toggle:focus {
-		border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+	.widget input:focus,
+	.widget textarea:focus {
 		border-color: {{ data.sidebar_border_focus_color }};
 	}
 
-	.site-title a {
-		outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
+	.sidebar a:focus,
+	.dropdown-toggle:focus {
 		outline-color: {{ data.sidebar_border_focus_color }};
 	}
+}';
+}
 
-	/* Meta Background Color */
-	.entry-footer {
-		background-color: {{ data.meta_box_background_color }};
-	}
 
-	@media screen and (min-width: 38.75em) {
-		/* Main Text Color */
-		.page-header {
-			border-color: {{ data.textcolor }};
-		}
-	}
-
-	@media screen and (min-width: 59.6875em) {
-		/* Make sure its transparent on desktop */
-		.site-header,
-		.secondary {
-			background-color: transparent;
-		}
-
-		/* Sidebar Background Color */
-		.widget button,
-		.widget input[type="button"],
-		.widget input[type="reset"],
-		.widget input[type="submit"],
-		.widget_calendar tbody a,
-		.widget_calendar tbody a:hover,
-		.widget_calendar tbody a:focus {
-			color: {{ data.header_background_color }};
-		}
-
-		/* Sidebar Link Color */
-		.secondary a,
-		.dropdown-toggle:after,
-		.widget-title,
-		.widget blockquote cite,
-		.widget blockquote small {
-			color: {{ data.sidebar_textcolor }};
-		}
-
-		.widget button,
-		.widget input[type="button"],
-		.widget input[type="reset"],
-		.widget input[type="submit"],
-		.widget_calendar tbody a {
-			background-color: {{ data.sidebar_textcolor }};
-		}
-
-		.textwidget a {
-			border-color: {{ data.sidebar_textcolor }};
-		}
-
-		/* Sidebar Text Color */
-		.secondary a:hover,
-		.secondary a:focus,
-		.main-navigation .menu-item-description,
-		.widget,
-		.widget blockquote,
-		.widget .wp-caption-text,
-		.widget .gallery-caption {
-			color: {{ data.secondary_sidebar_textcolor }};
-		}
-
-		.widget button:hover,
-		.widget button:focus,
-		.widget input[type="button"]:hover,
-		.widget input[type="button"]:focus,
-		.widget input[type="reset"]:hover,
-		.widget input[type="reset"]:focus,
-		.widget input[type="submit"]:hover,
-		.widget input[type="submit"]:focus,
-		.widget_calendar tbody a:hover,
-		.widget_calendar tbody a:focus {
-			background-color: {{ data.secondary_sidebar_textcolor }};
-		}
-
-		.widget blockquote {
-			border-color: {{ data.secondary_sidebar_textcolor }};
-		}
-
-		/* Sidebar Border Color */
-		.main-navigation ul,
-		.main-navigation li,
-		.widget input,
-		.widget textarea,
-		.widget table,
-		.widget th,
-		.widget td,
-		.widget pre,
-		.widget li,
-		.widget_categories .children,
-		.widget_nav_menu .sub-menu,
-		.widget_pages .children,
-		.widget abbr[title] {
-			border-color: {{ data.sidebar_border_color }};
-		}
-
-		.dropdown-toggle:hover,
-		.dropdown-toggle:focus,
-		.widget hr {
-			background-color: {{ data.sidebar_border_color }};
-		}
-
-		.widget input:focus,
-		.widget textarea:focus {
-			border-color: {{ data.sidebar_border_focus_color }};
-		}
-
-		.sidebar a:focus,
-		.dropdown-toggle:focus {
-			outline-color: {{ data.sidebar_border_focus_color }};
-		}
-	}
+/**
+ * Output an Underscore template for generating CSS for the color scheme.
+ *
+ * The template generates the css dynamically for instant display in the Customizer
+ * preview, and to be saved in a `theme_mod` for display on the front-end.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_color_scheme_css_template() {
+	?>
+	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+		<?php echo _get_twentyfifteen_color_scheme_css(); ?>
 	</script>
 	<?php
 }
Index: src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
===================================================================
--- src/wp-content/themes/twentyfifteen/js/color-scheme-control.js	(revision 30830)
+++ src/wp-content/themes/twentyfifteen/js/color-scheme-control.js	(working copy)
@@ -47,7 +47,7 @@
 	} );
 
 	// Generate the CSS for the current Color Scheme.
-	function getCSS() {
+	function setCSS() {
 		var scheme = api( 'color_scheme' )(),
 			colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
 
@@ -71,7 +71,7 @@
 	_.each( colorSettings, function( setting ) {
 		api( setting, function( setting ) {
 			setting.bind( _.throttle( function() {
-				api( 'color_scheme_css' ).set( getCSS() );
+				setCSS();
 			}, 250 ) );
 		} );
 	} );
