diff --git a/src/assets/css/colors-dark.css b/src/assets/css/colors-dark.css
deleted file mode 100755
index c6bdbf0..0000000
--- a/src/assets/css/colors-dark.css
+++ /dev/null
@@ -1,566 +0,0 @@
-/**
- * Dark Color Scheme
- *
- * See inc/color-patterns.php for dynamic color overrides for the theme.
- *
- * Colors are ordered from light to dark.
- */
-
-.colors-dark button,
-.colors-dark input[type="button"],
-.colors-dark input[type="submit"],
-.colors-dark .entry-footer .edit-link a.post-edit-link {
- background-color: #fff;
-}
-
-.colors-dark a:hover,
-.colors-dark a:active,
-.colors-dark .entry-content a:focus,
-.colors-dark .entry-content a:hover,
-.colors-dark .entry-summary a:focus,
-.colors-dark .entry-summary a:hover,
-.colors-dark .comment-content a:focus,
-.colors-dark .comment-content a:hover,
-.colors-dark .widget a:focus,
-.colors-dark .widget a:hover,
-.colors-dark .site-footer .widget-area a:focus,
-.colors-dark .site-footer .widget-area a:hover,
-.colors-dark .posts-navigation a:focus,
-.colors-dark .posts-navigation a:hover,
-.colors-dark .comment-metadata a:focus,
-.colors-dark .comment-metadata a:hover,
-.colors-dark .comment-metadata a.comment-edit-link:focus,
-.colors-dark .comment-metadata a.comment-edit-link:hover,
-.colors-dark .comment-reply-link:focus,
-.colors-dark .comment-reply-link:hover,
-.colors-dark .widget_authors a:focus strong,
-.colors-dark .widget_authors a:hover strong,
-.colors-dark .entry-title a:focus,
-.colors-dark .entry-title a:hover,
-.colors-dark .entry-meta a:focus,
-.colors-dark .entry-meta a:hover,
-.colors-dark.blog .entry-meta a.post-edit-link:focus,
-.colors-dark.blog .entry-meta a.post-edit-link:hover,
-.colors-dark.archive .entry-meta a.post-edit-link:focus,
-.colors-dark.archive .entry-meta a.post-edit-link:hover,
-.colors-dark.search .entry-meta a.post-edit-link:focus,
-.colors-dark.search .entry-meta a.post-edit-link:hover,
-.colors-dark .page-links a:focus .page-number,
-.colors-dark .page-links a:hover .page-number,
-.colors-dark .entry-footer .cat-links a:focus,
-.colors-dark .entry-footer .cat-links a:hover,
-.colors-dark .entry-footer .tags-links a:focus,
-.colors-dark .entry-footer .tags-links a:hover,
-.colors-dark .post-navigation a:focus,
-.colors-dark .post-navigation a:hover,
-.colors-dark .pagination a:not(.prev):not(.next):focus,
-.colors-dark .pagination a:not(.prev):not(.next):hover,
-.colors-dark .comments-pagination a:not(.prev):not(.next):focus,
-.colors-dark .comments-pagination a:not(.prev):not(.next):hover,
-.colors-dark .logged-in-as a:focus,
-.colors-dark .logged-in-as a:hover,
-.colors-dark a:focus .nav-title,
-.colors-dark a:hover .nav-title,
-.colors-dark .edit-link a:focus,
-.colors-dark .edit-link a:hover,
-.colors-dark .site-info a:focus,
-.colors-dark .site-info a:hover,
-.colors-dark .widget .widget-title a:focus,
-.colors-dark .widget .widget-title a:hover,
-.colors-dark .widget ul li a:focus,
-.colors-dark .widget ul li a:hover {
- color: #fff;
-}
-
-.colors-dark .entry-content a:focus,
-.colors-dark .entry-content a:hover,
-.colors-dark .entry-summary a:focus,
-.colors-dark .entry-summary a:hover,
-.colors-dark .comment-content a:focus,
-.colors-dark .comment-content a:hover,
-.colors-dark .widget a:focus,
-.colors-dark .widget a:hover,
-.colors-dark .site-footer .widget-area a:focus,
-.colors-dark .site-footer .widget-area a:hover,
-.colors-dark .posts-navigation a:focus,
-.colors-dark .posts-navigation a:hover,
-.colors-dark .comment-metadata a:focus,
-.colors-dark .comment-metadata a:hover,
-.colors-dark .comment-metadata a.comment-edit-link:focus,
-.colors-dark .comment-metadata a.comment-edit-link:hover,
-.colors-dark .comment-reply-link:focus,
-.colors-dark .comment-reply-link:hover,
-.colors-dark .widget_authors a:focus strong,
-.colors-dark .widget_authors a:hover strong,
-.colors-dark .entry-title a:focus,
-.colors-dark .entry-title a:hover,
-.colors-dark .entry-meta a:focus,
-.colors-dark .entry-meta a:hover,
-.colors-dark.blog .entry-meta a.post-edit-link:focus,
-.colors-dark.blog .entry-meta a.post-edit-link:hover,
-.colors-dark.archive .entry-meta a.post-edit-link:focus,
-.colors-dark.archive .entry-meta a.post-edit-link:hover,
-.colors-dark.search .entry-meta a.post-edit-link:focus,
-.colors-dark.search .entry-meta a.post-edit-link:hover,
-.colors-dark .page-links a:focus .page-number,
-.colors-dark .page-links a:hover .page-number,
-.colors-dark .entry-footer .cat-links a:focus,
-.colors-dark .entry-footer .cat-links a:hover,
-.colors-dark .entry-footer .tags-links a:focus,
-.colors-dark .entry-footer .tags-links a:hover,
-.colors-dark .post-navigation a:focus,
-.colors-dark .post-navigation a:hover,
-.colors-dark .pagination a:not(.prev):not(.next):focus,
-.colors-dark .pagination a:not(.prev):not(.next):hover,
-.colors-dark .comments-pagination a:not(.prev):not(.next):focus,
-.colors-dark .comments-pagination a:not(.prev):not(.next):hover,
-.colors-dark .logged-in-as a:focus,
-.colors-dark .logged-in-as a:hover,
-.colors-dark a:focus .nav-title,
-.colors-dark a:hover .nav-title,
-.colors-dark .edit-link a:focus,
-.colors-dark .edit-link a:hover,
-.colors-dark .site-info a:focus,
-.colors-dark .site-info a:hover,
-.colors-dark .widget .widget-title a:focus,
-.colors-dark .widget .widget-title a:hover,
-.colors-dark .widget ul li a:focus,
-.colors-dark .widget ul li a:hover {
- -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 3px 0 rgba(255, 255, 255, 1); /* Equivalant to #fff */
- box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 3px 0 rgba(255, 255, 255, 1); /* Equivalant to #fff */
-}
-
-.colors-dark .entry-content a,
-.colors-dark .entry-summary a,
-.colors-dark .comment-content a,
-.colors-dark .widget a,
-.colors-dark .site-footer .widget-area a,
-.colors-dark .posts-navigation a,
-.colors-dark .widget_authors a strong {
- -webkit-box-shadow: inset 0 -1px 0 rgba(240, 240, 240, 1); /* Equivalant to #f0f0f0 */
- box-shadow: inset 0 -1px 0 rgba(240, 240, 240, 1); /* Equivalant to #f0f0f0 */
-}
-
-body.colors-dark,
-.colors-dark button,
-.colors-dark input,
-.colors-dark select,
-.colors-dark textarea,
-.colors-dark h3,
-.colors-dark h4,
-.colors-dark h6,
-.colors-dark label,
-.colors-dark .entry-title a,
-.colors-dark.twentyseventeen-front-page .panel-content .recent-posts article,
-.colors-dark .entry-footer .cat-links a,
-.colors-dark .entry-footer .tags-links a,
-.colors-dark .format-quote blockquote,
-.colors-dark .nav-title,
-.colors-dark .comment-body {
- color: #eee;
-}
-
-/* Placeholder text color -- selectors need to be separate to work. */
-.colors-dark ::-webkit-input-placeholder {
- color: #ddd;
-}
-
-.colors-dark :-moz-placeholder {
- color: #ddd;
-}
-
-.colors-dark ::-moz-placeholder {
- color: #ddd;
-}
-
-.colors-dark :-ms-input-placeholder {
- color: #ddd;
-}
-
-.colors-dark input[type="text"]:focus,
-.colors-dark input[type="email"]:focus,
-.colors-dark input[type="url"]:focus,
-.colors-dark input[type="password"]:focus,
-.colors-dark input[type="search"]:focus,
-.colors-dark input[type="number"]:focus,
-.colors-dark input[type="tel"]:focus,
-.colors-dark input[type="range"]:focus,
-.colors-dark input[type="date"]:focus,
-.colors-dark input[type="month"]:focus,
-.colors-dark input[type="week"]:focus,
-.colors-dark input[type="time"]:focus,
-.colors-dark input[type="datetime"]:focus,
-.colors-dark input[type="datetime-local"]:focus,
-.colors-dark input[type="color"]:focus,
-.colors-dark textarea:focus,
-.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
- border-color: #eee;
-}
-
-.colors-dark input[type="text"]:focus,
-.colors-dark input[type="email"]:focus,
-.colors-dark input[type="url"]:focus,
-.colors-dark input[type="password"]:focus,
-.colors-dark input[type="search"]:focus,
-.colors-dark input[type="number"]:focus,
-.colors-dark input[type="tel"]:focus,
-.colors-dark input[type="range"]:focus,
-.colors-dark input[type="date"]:focus,
-.colors-dark input[type="month"]:focus,
-.colors-dark input[type="week"]:focus,
-.colors-dark input[type="time"]:focus,
-.colors-dark input[type="datetime"]:focus,
-.colors-dark input[type="datetime-local"]:focus,
-.colors-dark input[type="color"]:focus,
-.colors-dark textarea:focus,
-.colors-dark button.secondary,
-.colors-dark input[type="reset"],
-.colors-dark input[type="button"].secondary,
-.colors-dark input[type="reset"].secondary,
-.colors-dark input[type="submit"].secondary,
-.colors-dark a,
-.colors-dark .site-title,
-.colors-dark .site-title a,
-.colors-dark .navigation-top a,
-.colors-dark .dropdown-toggle,
-.colors-dark .menu-toggle,
-.colors-dark .page .panel-content .entry-title,
-.colors-dark .page-title,
-.colors-dark.page:not(.twentyseventeen-front-page) .entry-title,
-.colors-dark .page-links a .page-number,
-.colors-dark .comment-metadata a.comment-edit-link,
-.colors-dark .comment-reply-link .icon,
-.colors-dark h2.widget-title,
-.colors-dark mark,
-.colors-dark .post-navigation a:focus .icon,
-.colors-dark .post-navigation a:hover .icon,
-.colors-dark.blog .entry-meta a.post-edit-link,
-.colors-dark.archive .entry-meta a.post-edit-link,
-.colors-dark.search .entry-meta a.post-edit-link,
-.colors-custom .twentyseventeen-panel .recent-posts .entry-header .edit-link {
- color: #ddd;
-}
-
-.colors-dark h2,
-.colors-dark blockquote,
-.colors-dark input[type="text"],
-.colors-dark input[type="email"],
-.colors-dark input[type="url"],
-.colors-dark input[type="password"],
-.colors-dark input[type="search"],
-.colors-dark input[type="number"],
-.colors-dark input[type="tel"],
-.colors-dark input[type="range"],
-.colors-dark input[type="date"],
-.colors-dark input[type="month"],
-.colors-dark input[type="week"],
-.colors-dark input[type="time"],
-.colors-dark input[type="datetime"],
-.colors-dark input[type="datetime-local"],
-.colors-dark input[type="color"],
-.colors-dark textarea,
-.colors-dark .navigation-top .current-menu-item > a,
-.colors-dark .navigation-top .current_page_item > a,
-.colors-dark .entry-content blockquote.alignleft,
-.colors-dark .entry-content blockquote.alignright,
-.colors-dark .taxonomy-description,
-.colors-dark .site-info a,
-.colors-dark .wp-caption {
- color: #ccc;
-}
-
-.colors-dark abbr,
-.colors-dark acronym {
- border-bottom-color: #ccc;
-}
-
-.colors-dark h5,
-.main-navigation a:hover,
-.colors-dark .entry-meta,
-.colors-dark .entry-meta a,
-.colors-dark .nav-subtitle,
-.colors-dark .comment-metadata,
-.colors-dark .comment-metadata a,
-.colors-dark .no-comments,
-.colors-dark .comment-awaiting-moderation,
-.colors-dark .page-numbers.current,
-.colors-dark .page-links .page-number,
-.colors-dark .site-description {
- color: #bbb;
-}
-
-.colors-dark button:hover,
-.colors-dark button:focus,
-.colors-dark input[type="button"]:hover,
-.colors-dark input[type="button"]:focus,
-.colors-dark input[type="submit"]:hover,
-.colors-dark input[type="submit"]:focus,
-.colors-dark .prev.page-numbers:focus,
-.colors-dark .prev.page-numbers:hover,
-.colors-dark .next.page-numbers:focus,
-.colors-dark .next.page-numbers:hover,
-.colors-dark .entry-footer .edit-link a.post-edit-link:focus,
-.colors-dark .entry-footer .edit-link a.post-edit-link:hover {
- background: #bbb;
-}
-
-.colors-dark .social-navigation a:hover,
-.colors-dark .social-navigation a:focus {
- background: #999;
- color: #222;
-}
-
-.colors-dark .entry-footer .cat-links .icon,
-.colors-dark .entry-footer .tags-links .icon {
- color: #666;
-}
-
-.colors-dark button.secondary:hover,
-.colors-dark button.secondary:focus,
-.colors-dark input[type="reset"]:hover,
-.colors-dark input[type="reset"]:focus,
-.colors-dark input[type="button"].secondary:hover,
-.colors-dark input[type="button"].secondary:focus,
-.colors-dark input[type="reset"].secondary:hover,
-.colors-dark input[type="reset"].secondary:focus,
-.colors-dark input[type="submit"].secondary:hover,
-.colors-dark input[type="submit"].secondary:focus,
-.colors-dark .social-navigation a,
-.colors-dark hr {
- background: #555;
-}
-
-.colors-dark input[type="text"],
-.colors-dark input[type="email"],
-.colors-dark input[type="url"],
-.colors-dark input[type="password"],
-.colors-dark input[type="search"],
-.colors-dark input[type="number"],
-.colors-dark input[type="tel"],
-.colors-dark input[type="range"],
-.colors-dark input[type="date"],
-.colors-dark input[type="month"],
-.colors-dark input[type="week"],
-.colors-dark input[type="time"],
-.colors-dark input[type="datetime"],
-.colors-dark input[type="datetime-local"],
-.colors-dark input[type="color"],
-.colors-dark textarea,
-.colors-dark select,
-.colors-dark fieldset,
-.colors-dark .widget .tagcloud a:hover,
-.colors-dark .widget .tagcloud a:focus,
-.colors-dark .widget.widget_tag_cloud a:hover,
-.colors-dark .widget.widget_tag_cloud a:focus,
-.colors-dark .wp_widget_tag_cloud a:hover,
-.colors-dark .wp_widget_tag_cloud a:focus {
- border-color: #555;
-}
-
-.colors-dark button.secondary,
-.colors-dark input[type="reset"],
-.colors-dark input[type="button"].secondary,
-.colors-dark input[type="reset"].secondary,
-.colors-dark input[type="submit"].secondary,
-.colors-dark .prev.page-numbers,
-.colors-dark .next.page-numbers {
- background-color: #444;
-}
-
-.colors-dark .widget .tagcloud a,
-.colors-dark .widget.widget_tag_cloud a,
-.colors-dark .wp_widget_tag_cloud a {
- border-color: #444;
-}
-
-.colors-dark.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child),
-.colors-dark .widget ul li {
- border-top-color: #444;
-}
-
-.colors-dark .widget ul li {
- border-bottom-color: #444;
-}
-
-.colors-dark pre,
-.colors-dark mark,
-.colors-dark ins,
-.colors-dark input[type="text"],
-.colors-dark input[type="email"],
-.colors-dark input[type="url"],
-.colors-dark input[type="password"],
-.colors-dark input[type="search"],
-.colors-dark input[type="number"],
-.colors-dark input[type="tel"],
-.colors-dark input[type="range"],
-.colors-dark input[type="date"],
-.colors-dark input[type="month"],
-.colors-dark input[type="week"],
-.colors-dark input[type="time"],
-.colors-dark input[type="datetime"],
-.colors-dark input[type="datetime-local"],
-.colors-dark input[type="color"],
-.colors-dark textarea,
-.colors-dark select,
-.colors-dark fieldset {
- background: #333;
-}
-
-.colors-dark tr,
-.colors-dark thead th {
- border-color: #333;
-}
-
-.colors-dark .navigation-top,
-.colors-dark .main-navigation > div > ul,
-.colors-dark .pagination,
-.colors-dark .comment-navigation,
-.colors-dark .entry-footer,
-.colors-dark .site-footer {
- border-top-color: #333;
-}
-
-.colors-dark .single-featured-image-header,
-.colors-dark .navigation-top,
-.colors-dark .main-navigation li,
-.colors-dark .entry-footer,
-.colors-dark #comments {
- border-bottom-color: #333;
-}
-
-.colors-dark .site-header,
-.colors-dark .single-featured-image-header {
- background-color: #262626;
-}
-
-.colors-dark button,
-.colors-dark input[type="button"],
-.colors-dark input[type="submit"],
-.colors-dark .prev.page-numbers:focus,
-.colors-dark .prev.page-numbers:hover,
-.colors-dark .next.page-numbers:focus,
-.colors-dark .next.page-numbers:hover {
- color: #222;
-}
-
-body.colors-dark,
-.colors-dark .site-content-contain,
-.colors-dark .navigation-top,
-.colors-dark .main-navigation ul {
- background: #222;
-}
-
-.colors-dark .entry-title a,
-.colors-dark .entry-meta a,
-.colors-dark.blog .entry-meta a.post-edit-link,
-.colors-dark.archive .entry-meta a.post-edit-link,
-.colors-dark.search .entry-meta a.post-edit-link,
-.colors-dark .page-links a,
-.colors-dark .page-links a .page-number,
-.colors-dark .entry-footer a,
-.colors-dark .entry-footer .cat-links a,
-.colors-dark .entry-footer .tags-links a,
-.colors-dark .edit-link a,
-.colors-dark .post-navigation a,
-.colors-dark .logged-in-as a,
-.colors-dark .comment-navigation a,
-.colors-dark .comment-metadata a,
-.colors-dark .comment-metadata a.comment-edit-link,
-.colors-dark .comment-reply-link,
-.colors-dark a .nav-title,
-.colors-dark .pagination a,
-.colors-dark .comments-pagination a,
-.colors-dark .widget .widget-title a,
-.colors-dark .widget ul li a,
-.colors-dark .site-footer .widget-area ul li a,
-.colors-dark .site-info a {
- -webkit-box-shadow: inset 0 -1px 0 rgba(34, 34, 34, 1); /* Equivalant to #222 */
- box-shadow: inset 0 -1px 0 rgba(34, 34, 34, 1); /* Equivalant to #222 */
-}
-
-/* Fixes linked images */
-.colors-dark .entry-content a img,
-.colors-dark .comment-content a img,
-.colors-dark .widget a img {
- -webkit-box-shadow: 0 0 0 8px #222;
- box-shadow: 0 0 0 8px #222;
-}
-
-.colors-dark .entry-footer .edit-link a.post-edit-link {
- color: #000;
-}
-
-.colors-dark .menu-toggle,
-.colors-dark .menu-toggle:hover,
-.colors-dark .menu-toggle:focus,
-.colors-dark .dropdown-toggle,
-.colors-dark .dropdown-toggle:hover,
-.colors-dark .dropdown-toggle:focus,
-.colors-dark .menu-scroll-down,
-.colors-dark .menu-scroll-down:hover,
-.colors-dark .menu-scroll-down:focus {
- background-color: transparent;
-}
-
-.colors-dark .gallery-item a,
-.colors-dark .gallery-item a:hover,
-.colors-dark .gallery-item a:focus,
-.colors-dark .widget .tagcloud a,
-.colors-dark .widget .tagcloud a:focus,
-.colors-dark .widget .tagcloud a:hover,
-.colors-dark .widget.widget_tag_cloud a,
-.colors-dark .widget.widget_tag_cloud a:focus,
-.colors-dark .widget.widget_tag_cloud a:hover,
-.colors-dark .wp_widget_tag_cloud a,
-.colors-dark .wp_widget_tag_cloud a:focus,
-.colors-dark .wp_widget_tag_cloud a:hover,
-.colors-dark .entry-footer .edit-link a.post-edit-link:focus,
-.colors-dark .entry-footer .edit-link a.post-edit-link:hover {
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-@media screen and (min-width: 48em) {
-
- .colors-dark .nav-links .nav-previous .nav-title .icon,
- .colors-dark .nav-links .nav-next .nav-title .icon {
- color: #eee;
- }
-
- .colors-dark .main-navigation li li:hover,
- .colors-dark .main-navigation li li.focus {
- background: #999;
- }
-
- .colors-dark .menu-scroll-down {
- color: #999;
- }
-
- .colors-dark .main-navigation ul ul {
- border-color: #333;
- background: #222;
- }
-
- .colors-dark .main-navigation ul li.menu-item-has-children:before,
- .colors-dark .main-navigation ul li.page_item_has_children:before {
- border-bottom-color: #333;
- }
-
- .main-navigation ul li.menu-item-has-children:after,
- .main-navigation ul li.page_item_has_children:after {
- border-bottom-color: #222;
- }
-
- .colors-dark .main-navigation li li.focus > a,
- .colors-dark .main-navigation li li:focus > a,
- .colors-dark .main-navigation li li:hover > a,
- .colors-dark .main-navigation li li a:hover,
- .colors-dark .main-navigation li li a:focus,
- .colors-dark .main-navigation li li.current_page_item a:hover,
- .colors-dark .main-navigation li li.current-menu-item a:hover,
- .colors-dark .main-navigation li li.current_page_item a:focus,
- .colors-dark .main-navigation li li.current-menu-item a:focus {
- color: #222;
- }
-
-}
diff --git a/src/assets/js/color-scheme-control.js b/src/assets/js/color-scheme-control.js
new file mode 100755
index 0000000..d3ffff2
--- /dev/null
+++ b/src/assets/js/color-scheme-control.js
@@ -0,0 +1,79 @@
+/* global colorScheme, Color */
+/**
+ * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
+ * Also trigger an update of the Color Scheme CSS when a color is changed.
+ */
+
+( function( api ) {
+ var cssTemplate = wp.template( 'tainacan-color-scheme' ),
+ colorSchemeKeys = [
+ 'link_color',
+ 'main_text_color',
+ 'secondary_text_color'
+ ],
+ colorSettings = [
+ 'link_color',
+ 'main_text_color',
+ 'secondary_text_color'
+ ];
+
+ api.controlConstructor.select = api.Control.extend( {
+ ready: function() {
+ if ( 'color_scheme' === this.id ) {
+ this.setting.bind( 'change', function( value ) {
+ var colors = colorScheme[value].colors;
+
+
+ // Update Link Color.
+ color = colors[2];
+ api( 'link_color' ).set( color );
+ api.control( 'link_color' ).container.find( '.color-picker-hex' )
+ .data( 'data-default-color', color )
+ .wpColorPicker( 'defaultColor', color );
+
+ // Update Main Text Color.
+ color = colors[3];
+ api( 'main_text_color' ).set( color );
+ api.control( 'main_text_color' ).container.find( '.color-picker-hex' )
+ .data( 'data-default-color', color )
+ .wpColorPicker( 'defaultColor', color );
+
+ // Update Secondary Text Color.
+ color = colors[4];
+ api( 'secondary_text_color' ).set( color );
+ api.control( 'secondary_text_color' ).container.find( '.color-picker-hex' )
+ .data( 'data-default-color', color )
+ .wpColorPicker( 'defaultColor', color );
+ } );
+ }
+ }
+ } );
+
+ // Generate the CSS for the current Color Scheme.
+ function updateCSS() {
+ var scheme = api( 'color_scheme' )(),
+ css,
+ colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
+
+ // Merge in color scheme overrides.
+ _.each( colorSettings, function( setting ) {
+ colors[ setting ] = api( setting )();
+ } );
+
+ // Add additional color.
+ // jscs:disable
+ colors.border_color = Color( colors.main_text_color ).toCSS( 'rgba', 0.2 );
+ // jscs:enable
+
+ css = cssTemplate( colors );
+
+ api.previewer.send( 'update-color-scheme-css', css );
+ }
+
+ // Update the CSS whenever a color setting is changed.
+ _.each( colorSettings, function( setting ) {
+ api( setting, function( setting ) {
+ setting.bind( updateCSS );
+ } );
+ } );
+} )( wp.customize );
diff --git a/src/assets/js/customize-controls.js b/src/assets/js/customize-controls.js
deleted file mode 100755
index e6f6037..0000000
--- a/src/assets/js/customize-controls.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Scripts within the customizer controls window.
- *
- * Contextually shows the color hue control and informs the preview
- * when users open or close the front page sections section.
- */
-
-(function() {
- wp.customize.bind( 'ready', function() {
-
- // Only show the color hue control when there's a custom color scheme.
- wp.customize( 'colorscheme', function( setting ) {
- wp.customize.control( 'colorscheme_hue', function( control ) {
- var visibility = function() {
- if ( 'custom' === setting.get() ) {
- control.container.slideDown( 180 );
- } else {
- control.container.slideUp( 180 );
- }
- };
-
- visibility();
- setting.bind( visibility );
- });
- });
-
- // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly.
- wp.customize.section( 'theme_options', function( section ) {
- section.expanded.bind( function( isExpanding ) {
-
- // Value of isExpanding will = true if you're entering the section, false if you're leaving it.
- wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding });
- } );
- } );
- });
-})( jQuery );
diff --git a/src/assets/js/customize-preview.js b/src/assets/js/customize-preview.js
index 9ebfb11..6fa7a1e 100755
--- a/src/assets/js/customize-preview.js
+++ b/src/assets/js/customize-preview.js
@@ -1,35 +1,41 @@
/**
- * File customize-preview.js.
- *
- * Instantly live-update customizer settings in the preview for improved user experience.
+ * Live-update changed settings in real time in the Customizer preview.
*/
-(function( $ ) {
+( function( $ ) {
+ var style = $( '#tainacan-color-scheme-css' ),
+ api = wp.customize;
- // Color scheme.
- wp.customize( 'colorscheme', function( value ) {
+ if ( ! style.length ) {
+ style = $( 'head' ).append( '' )
+ .find( '#tainacan-color-scheme-css' );
+ }
+
+ // Site title.
+ api( 'blogname', function( value ) {
value.bind( function( to ) {
+ $( '.site-title a' ).text( to );
+ } );
+ } );
- // Update color body class.
- $( 'body' )
- .removeClass( 'colors-light colors-dark colors-custom' )
- .addClass( 'colors-' + to );
- });
- });
-
- // Custom color hue.
- wp.customize( 'colorscheme_hue', function( value ) {
+ // Site tagline.
+ api( 'blogdescription', function( value ) {
value.bind( function( to ) {
+ $( '.site-description' ).text( to );
+ } );
+ } );
- // Update custom color CSS.
- var style = $( '#custom-theme-colors' ),
- hue = style.data( 'hue' ),
- css = style.html();
-
- // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
- css = css.split( hue + ',' ).join( to + ',' );
- style.html( css ).data( 'hue', to );
- });
- });
+ // Add custom-background-image body class when background image is added.
+ api( 'background_image', function( value ) {
+ value.bind( function( to ) {
+ $( 'body' ).toggleClass( 'custom-background-image', '' !== to );
+ } );
+ } );
+ // Color Scheme CSS.
+ api.bind( 'preview-ready', function() {
+ api.preview.bind( 'update-color-scheme-css', function( css ) {
+ style.html( css );
+ } );
+ } );
} )( jQuery );
diff --git a/src/functions.php b/src/functions.php
index 0a23022..21be4e3 100644
--- a/src/functions.php
+++ b/src/functions.php
@@ -134,7 +134,26 @@ register_nav_menus( array(
'navMenubelowHeader' => __( 'Nav Menu Below Header', 'tainacan-theme' ),
) );
-require get_template_directory() . '/functions/enqueues.php';
+require get_template_directory() . '/functions/enqueues.php';
+
+function tainacan_hex2rgb( $color ) {
+ $color = trim( $color, '#' );
+
+ if ( strlen( $color ) === 3 ) {
+ $r = hexdec( substr( $color, 0, 1 ).substr( $color, 0, 1 ) );
+ $g = hexdec( substr( $color, 1, 1 ).substr( $color, 1, 1 ) );
+ $b = hexdec( substr( $color, 2, 1 ).substr( $color, 2, 1 ) );
+ } else if ( strlen( $color ) === 6 ) {
+ $r = hexdec( substr( $color, 0, 2 ) );
+ $g = hexdec( substr( $color, 2, 2 ) );
+ $b = hexdec( substr( $color, 4, 2 ) );
+ } else {
+ return array();
+ }
+
+ return array( 'red' => $r, 'green' => $g, 'blue' => $b );
+}
+
require get_template_directory() . '/functions/customizer.php';
require get_template_directory() . '/functions/pagination.php';
require get_template_directory() . '/functions/single-functions.php';
\ No newline at end of file
diff --git a/src/functions/customizer.php b/src/functions/customizer.php
index 03c1533..798b50a 100644
--- a/src/functions/customizer.php
+++ b/src/functions/customizer.php
@@ -1,96 +1,1124 @@
+
-add_setting(
- 'colorscheme', array(
- 'default' => 'light',
- 'transport' => 'postMessage',
- 'sanitize_callback' => 'tainacan_sanitize_colorscheme',
- )
- );
+ $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
+ $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
- $wp_customize->add_setting(
- 'colorscheme_hue', array(
- 'default' => 250,
- 'transport' => 'postMessage',
- 'sanitize_callback' => 'absint', // The hue is stored as a positive integer.
- )
- );
-
- $wp_customize->add_control(
- 'colorscheme', array(
- 'type' => 'radio',
- 'label' => __( 'Color Scheme', 'tainacan-theme' ),
- 'choices' => array(
- 'light' => __( 'Light', 'tainacan-theme' ),
- 'dark' => __( 'Dark', 'tainacan-theme' ),
- 'custom' => __( 'Custom', 'tainacan-theme' ),
- ),
- 'section' => 'colors',
- 'priority' => 5,
- )
- );
-
- $wp_customize->add_control(
- new WP_Customize_Color_Control(
- $wp_customize, 'colorscheme_hue', array(
- 'mode' => 'hue',
- 'section' => 'colors',
- 'priority' => 6,
- )
- )
- );
-}
-add_action( 'customize_register', 'tainacan_customize_register' );
-
-function tainacan_sanitize_colorscheme( $input ) {
- $valid = array( 'light', 'dark', 'custom' );
-
- if ( in_array( $input, $valid, true ) ) {
- return $input;
+ if ( isset( $wp_customize->selective_refresh ) ) {
+ $wp_customize->selective_refresh->add_partial( 'blogname', array(
+ 'selector' => '.site-title a',
+ 'container_inclusive' => false,
+ 'render_callback' => 'tainacan_customize_partial_blogname',
+ ) );
+ $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
+ 'selector' => '.site-description',
+ 'container_inclusive' => false,
+ 'render_callback' => 'tainacan_customize_partial_blogdescription',
+ ) );
}
- return 'light';
+ // Add color scheme setting and control.
+ $wp_customize->add_setting( 'color_scheme', array(
+ 'default' => 'default',
+ 'sanitize_callback' => 'tainacan_sanitize_color_scheme',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( 'color_scheme', array(
+ 'label' => __( 'Base Color Scheme', 'tainacan' ),
+ 'section' => 'colors',
+ 'type' => 'select',
+ 'choices' => tainacan_get_color_scheme_choices(),
+ 'priority' => 1,
+ ) );
+
+ // Remove the core header textcolor control, as it shares the main text color.
+ $wp_customize->remove_control( 'header_textcolor' );
+
+ // Add link color setting and control.
+ $wp_customize->add_setting( 'link_color', array(
+ 'default' => $color_scheme[2],
+ 'sanitize_callback' => 'sanitize_hex_color',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
+ 'label' => __( 'Link Color', 'tainacan' ),
+ 'section' => 'colors',
+ ) ) );
+
+ // Add main text color setting and control.
+ $wp_customize->add_setting( 'main_text_color', array(
+ 'default' => $color_scheme[3],
+ 'sanitize_callback' => 'sanitize_hex_color',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array(
+ 'label' => __( 'Main Text Color', 'tainacan' ),
+ 'section' => 'colors',
+ ) ) );
+
+ // Add secondary text color setting and control.
+ $wp_customize->add_setting( 'secondary_text_color', array(
+ 'default' => $color_scheme[4],
+ 'sanitize_callback' => 'sanitize_hex_color',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array(
+ 'label' => __( 'Secondary Text Color', 'tainacan' ),
+ 'section' => 'colors',
+ ) ) );
+}
+add_action( 'customize_register', 'tainacan_customize_register', 11 );
+
+/**
+ * Render the site title for the selective refresh partial.
+ *
+ * @since Tainacan Theme
+ * @see tainacan_customize_register()
+ *
+ * @return void
+ */
+function tainacan_customize_partial_blogname() {
+ bloginfo( 'name' );
}
/**
- * Bind JS handlers to instantly live-preview changes.
+ * Render the site tagline for the selective refresh partial.
+ *
+ * @since Tainacan Theme
+ * @see tainacan_customize_register()
+ *
+ * @return void
+ */
+function tainacan_customize_partial_blogdescription() {
+ bloginfo( 'description' );
+}
+
+/**
+ * Registers color schemes for Tainacan Theme.
+ *
+ * Can be filtered with {@see 'tainacan_color_schemes'}.
+ *
+ * The order of colors in a colors array:
+ * 1. Main Background Color.
+ * 2. Page Background Color.
+ * 3. Link Color.
+ * 4. Main Text Color.
+ * 5. Secondary Text Color.
+ *
+ * @since Tainacan Theme
+ *
+ * @return array An associative array of color scheme options.
+ */
+function tainacan_get_color_schemes() {
+ /**
+ * Filter the color schemes registered for use with Tainacan Theme.
+ *
+ * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'.
+ *
+ * @since Tainacan Theme
+ *
+ * @param array $schemes {
+ * Associative array of color schemes data.
+ *
+ * @type array $slug {
+ * Associative array of information for setting up the color scheme.
+ *
+ * @type string $label Color scheme label.
+ * @type array $colors HEX codes for default colors prepended with a hash symbol ('#').
+ * Colors are defined in the following order: Main background, page
+ * background, link, main text, secondary text.
+ * }
+ * }
+ */
+ return apply_filters( 'tainacan_color_schemes', array(
+ 'default' => array(
+ 'label' => __( 'Default', 'tainacan' ),
+ 'colors' => array(
+ '#1a1a1a',
+ '#ffffff',
+ '#007acc',
+ '#1a1a1a',
+ '#686868',
+ ),
+ ),
+ 'dark' => array(
+ 'label' => __( 'Dark', 'tainacan' ),
+ 'colors' => array(
+ '#262626',
+ '#1a1a1a',
+ '#9adffd',
+ '#e5e5e5',
+ '#c1c1c1',
+ ),
+ ),
+ 'gray' => array(
+ 'label' => __( 'Gray', 'tainacan' ),
+ 'colors' => array(
+ '#616a73',
+ '#4d545c',
+ '#c7c7c7',
+ '#f2f2f2',
+ '#f2f2f2',
+ ),
+ ),
+ 'red' => array(
+ 'label' => __( 'Red', 'tainacan' ),
+ 'colors' => array(
+ '#ffffff',
+ '#ff675f',
+ '#640c1f',
+ '#402b30',
+ '#402b30',
+ ),
+ ),
+ 'yellow' => array(
+ 'label' => __( 'Yellow', 'tainacan' ),
+ 'colors' => array(
+ '#3b3721',
+ '#ffef8e',
+ '#774e24',
+ '#3b3721',
+ '#5b4d3e',
+ ),
+ ),
+ ) );
+}
+
+if ( ! function_exists( 'tainacan_get_color_scheme' ) ) :
+/**
+ * Retrieves the current Tainacan Theme color scheme.
+ *
+ * Create your own tainacan_get_color_scheme() function to override in a child theme.
+ *
+ * @since Tainacan Theme
+ *
+ * @return array An associative array of either the current or default color scheme HEX values.
+ */
+function tainacan_get_color_scheme() {
+ $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+ $color_schemes = tainacan_get_color_schemes();
+
+ if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
+ return $color_schemes[ $color_scheme_option ]['colors'];
+ }
+
+ return $color_schemes['default']['colors'];
+}
+endif; // tainacan_get_color_scheme
+
+if ( ! function_exists( 'tainacan_get_color_scheme_choices' ) ) :
+/**
+ * Retrieves an array of color scheme choices registered for Tainacan Theme.
+ *
+ * Create your own tainacan_get_color_scheme_choices() function to override
+ * in a child theme.
+ *
+ * @since Tainacan Theme
+ *
+ * @return array Array of color schemes.
+ */
+function tainacan_get_color_scheme_choices() {
+ $color_schemes = tainacan_get_color_schemes();
+ $color_scheme_control_options = array();
+
+ foreach ( $color_schemes as $color_scheme => $value ) {
+ $color_scheme_control_options[ $color_scheme ] = $value['label'];
+ }
+
+ return $color_scheme_control_options;
+}
+endif; // tainacan_get_color_scheme_choices
+
+
+if ( ! function_exists( 'tainacan_sanitize_color_scheme' ) ) :
+/**
+ * Handles sanitization for Tainacan Theme color schemes.
+ *
+ * Create your own tainacan_sanitize_color_scheme() function to override
+ * in a child theme.
+ *
+ * @since Tainacan Theme
+ *
+ * @param string $value Color scheme name value.
+ * @return string Color scheme name.
+ */
+function tainacan_sanitize_color_scheme( $value ) {
+ $color_schemes = tainacan_get_color_scheme_choices();
+
+ if ( ! array_key_exists( $value, $color_schemes ) ) {
+ return 'default';
+ }
+
+ return $value;
+}
+endif; // tainacan_sanitize_color_scheme
+
+/**
+ * Enqueues front-end CSS for color scheme.
+ *
+ * @since Tainacan Theme
+ *
+ * @see wp_add_inline_style()
+ */
+function tainacan_color_scheme_css() {
+ $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+
+ // Don't do anything if the default color scheme is selected.
+ if ( 'default' === $color_scheme_option ) {
+ return;
+ }
+
+ $color_scheme = tainacan_get_color_scheme();
+
+ // Convert main text hex color to rgba.
+ $color_textcolor_rgb = tainacan_hex2rgb( $color_scheme[3] );
+
+ // If the rgba values are empty return early.
+ if ( empty( $color_textcolor_rgb ) ) {
+ return;
+ }
+
+ // If we get this far, we have a custom color scheme.
+ $colors = array(
+ 'background_color' => $color_scheme[0],
+ 'page_background_color' => $color_scheme[1],
+ 'link_color' => $color_scheme[2],
+ 'main_text_color' => $color_scheme[3],
+ 'secondary_text_color' => $color_scheme[4],
+ 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ),
+
+ );
+
+ $color_scheme_css = tainacan_get_color_scheme_css( $colors );
+
+ wp_add_inline_style( 'tainacan-style', $color_scheme_css );
+}
+add_action( 'wp_enqueue_scripts', 'tainacan_color_scheme_css' );
+
+/**
+ * Binds the JS listener to make Customizer color_scheme control.
+ *
+ * Passes color scheme data as colorScheme global.
+ *
+ * @since Tainacan Theme
+ */
+function tainacan_customize_control_js() {
+ wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/assets/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20160816', true );
+ wp_localize_script( 'color-scheme-control', 'colorScheme', tainacan_get_color_schemes() );
+}
+add_action( 'customize_controls_enqueue_scripts', 'tainacan_customize_control_js' );
+
+/**
+ * Binds JS handlers to make the Customizer preview reload changes asynchronously.
+ *
+ * @since Tainacan Theme
*/
function tainacan_customize_preview_js() {
- wp_enqueue_script( 'tainacan-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
+ wp_enqueue_script( 'tainacan-customize-preview', get_template_directory_uri() . '/assets/js/customize-preview.js', array( 'customize-preview' ), '20160816', true );
}
add_action( 'customize_preview_init', 'tainacan_customize_preview_js' );
/**
- * Load dynamic logic for the customizer controls area.
+ * Returns CSS for the color schemes.
+ *
+ * @since Tainacan Theme
+ *
+ * @param array $colors Color scheme colors.
+ * @return string Color scheme CSS.
*/
-function tainacan_panels_js() {
- wp_enqueue_script( 'tainacan-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
+function tainacan_get_color_scheme_css( $colors ) {
+ $colors = wp_parse_args( $colors, array(
+ 'background_color' => '',
+ 'page_background_color' => '',
+ 'link_color' => '',
+ 'main_text_color' => '',
+ 'secondary_text_color' => '',
+ 'border_color' => '',
+ ) );
+
+ return << .page-links-title,
+ .comment-author,
+ .comment-reply-title small a:hover,
+ .comment-reply-title small a:focus {
+ color: {$colors['main_text_color']};
+ }
+
+ blockquote,
+ .menu-toggle.toggled-on,
+ .menu-toggle.toggled-on:hover,
+ .menu-toggle.toggled-on:focus,
+ .post-navigation,
+ .post-navigation div + div,
+ .pagination,
+ .widget,
+ .page-header,
+ .page-links a,
+ .comments-title,
+ .comment-reply-title {
+ border-color: {$colors['main_text_color']};
+ }
+
+ button,
+ button[disabled]:hover,
+ button[disabled]:focus,
+ input[type="button"],
+ input[type="button"][disabled]:hover,
+ input[type="button"][disabled]:focus,
+ input[type="reset"],
+ input[type="reset"][disabled]:hover,
+ input[type="reset"][disabled]:focus,
+ input[type="submit"],
+ input[type="submit"][disabled]:hover,
+ input[type="submit"][disabled]:focus,
+ .menu-toggle.toggled-on,
+ .menu-toggle.toggled-on:hover,
+ .menu-toggle.toggled-on:focus,
+ .pagination:before,
+ .pagination:after,
+ .pagination .prev,
+ .pagination .next,
+ .page-links a {
+ background-color: {$colors['main_text_color']};
+ }
+
+ /* Secondary Text Color */
+
+ /**
+ * IE8 and earlier will drop any block with CSS3 selectors.
+ * Do not combine these styles with the next block.
+ */
+ body:not(.search-results) .entry-summary {
+ color: {$colors['secondary_text_color']};
+ }
+
+ blockquote,
+ .post-password-form label,
+ a:hover,
+ a:focus,
+ a:active,
+ .post-navigation .meta-nav,
+ .image-navigation,
+ .comment-navigation,
+ .widget_recent_entries .post-date,
+ .widget_rss .rss-date,
+ .widget_rss cite,
+ .site-description,
+ .author-bio,
+ .entry-footer,
+ .entry-footer a,
+ .sticky-post,
+ .taxonomy-description,
+ .entry-caption,
+ .comment-metadata,
+ .pingback .edit-link,
+ .comment-metadata a,
+ .pingback .comment-edit-link,
+ .comment-form label,
+ .comment-notes,
+ .comment-awaiting-moderation,
+ .logged-in-as,
+ .form-allowed-tags,
+ .site-info,
+ .site-info a,
+ .wp-caption .wp-caption-text,
+ .gallery-caption,
+ .widecolumn label,
+ .widecolumn .mu_register label {
+ color: {$colors['secondary_text_color']};
+ }
+
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus {
+ background-color: {$colors['secondary_text_color']};
+ }
+
+ /* Border Color */
+ fieldset,
+ pre,
+ abbr,
+ acronym,
+ table,
+ th,
+ td,
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="week"],
+ input[type="month"],
+ input[type="text"],
+ input[type="email"],
+ input[type="url"],
+ input[type="password"],
+ input[type="search"],
+ input[type="tel"],
+ input[type="number"],
+ textarea,
+ .main-navigation li,
+ .main-navigation .primary-menu,
+ .menu-toggle,
+ .dropdown-toggle:after,
+ .social-navigation a,
+ .image-navigation,
+ .comment-navigation,
+ .tagcloud a,
+ .entry-content,
+ .entry-summary,
+ .page-links a,
+ .page-links > span,
+ .comment-list article,
+ .comment-list .pingback,
+ .comment-list .trackback,
+ .comment-reply-link,
+ .no-comments,
+ .widecolumn .mu_register .mu_alert {
+ border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['border_color']};
+ }
+
+ hr,
+ code {
+ background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
+ background-color: {$colors['border_color']};
+ }
+
+ @media screen and (min-width: 56.875em) {
+ .main-navigation li:hover > a,
+ .main-navigation li.focus > a {
+ color: {$colors['link_color']};
+ }
+
+ .main-navigation ul ul,
+ .main-navigation ul ul li {
+ border-color: {$colors['border_color']};
+ }
+
+ .main-navigation ul ul:before {
+ border-top-color: {$colors['border_color']};
+ border-bottom-color: {$colors['border_color']};
+ }
+
+ .main-navigation ul ul li {
+ background-color: {$colors['page_background_color']};
+ }
+
+ .main-navigation ul ul:after {
+ border-top-color: {$colors['page_background_color']};
+ border-bottom-color: {$colors['page_background_color']};
+ }
+ }
+
+CSS;
}
-add_action( 'customize_controls_enqueue_scripts', 'tainacan_panels_js' );
\ No newline at end of file
+
+
+/**
+ * Outputs an Underscore template for generating CSS for the color scheme.
+ *
+ * The template generates the css dynamically for instant display in the
+ * Customizer preview.
+ *
+ * @since Tainacan Theme
+ */
+function tainacan_color_scheme_css_template() {
+ $colors = array(
+ 'background_color' => '{{ data.background_color }}',
+ 'page_background_color' => '{{ data.page_background_color }}',
+ 'link_color' => '{{ data.link_color }}',
+ 'main_text_color' => '{{ data.main_text_color }}',
+ 'secondary_text_color' => '{{ data.secondary_text_color }}',
+ 'border_color' => '{{ data.border_color }}',
+ );
+ ?>
+
+ a,
+ .main-navigation li.focus > a {
+ color: %1$s;
+ }
+ }
+ ';
+
+ wp_add_inline_style( 'tainacan-style', sprintf( $css, $link_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'tainacan_link_color_css', 11 );
+
+/**
+ * Enqueues front-end CSS for the main text color.
+ *
+ * @since Tainacan Theme
+ *
+ * @see wp_add_inline_style()
+ */
+function tainacan_main_text_color_css() {
+ $color_scheme = tainacan_get_color_scheme();
+ $default_color = $color_scheme[3];
+ $main_text_color = get_theme_mod( 'main_text_color', $default_color );
+
+ // Don't do anything if the current color is the default.
+ if ( $main_text_color === $default_color ) {
+ return;
+ }
+
+ // Convert main text hex color to rgba.
+ $main_text_color_rgb = tainacan_hex2rgb( $main_text_color );
+
+ // If the rgba values are empty return early.
+ if ( empty( $main_text_color_rgb ) ) {
+ return;
+ }
+
+ // If we get this far, we have a custom color scheme.
+ $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
+
+ $css = '
+ /* Custom Main Text Color */
+ body,
+ blockquote cite,
+ blockquote small,
+ .main-navigation a,
+ .menu-toggle,
+ .dropdown-toggle,
+ .social-navigation a,
+ .post-navigation a,
+ .pagination a:hover,
+ .pagination a:focus,
+ .widget-title a,
+ .site-branding .site-title a,
+ .entry-title a,
+ .page-links > .page-links-title,
+ .comment-author,
+ .comment-reply-title small a:hover,
+ .comment-reply-title small a:focus {
+ color: %1$s
+ }
+
+ blockquote,
+ .menu-toggle.toggled-on,
+ .menu-toggle.toggled-on:hover,
+ .menu-toggle.toggled-on:focus,
+ .post-navigation,
+ .post-navigation div + div,
+ .pagination,
+ .widget,
+ .page-header,
+ .page-links a,
+ .comments-title,
+ .comment-reply-title {
+ border-color: %1$s;
+ }
+
+ button,
+ button[disabled]:hover,
+ button[disabled]:focus,
+ input[type="button"],
+ input[type="button"][disabled]:hover,
+ input[type="button"][disabled]:focus,
+ input[type="reset"],
+ input[type="reset"][disabled]:hover,
+ input[type="reset"][disabled]:focus,
+ input[type="submit"],
+ input[type="submit"][disabled]:hover,
+ input[type="submit"][disabled]:focus,
+ .menu-toggle.toggled-on,
+ .menu-toggle.toggled-on:hover,
+ .menu-toggle.toggled-on:focus,
+ .pagination:before,
+ .pagination:after,
+ .pagination .prev,
+ .pagination .next,
+ .page-links a {
+ background-color: %1$s;
+ }
+
+ /* Border Color */
+ fieldset,
+ pre,
+ abbr,
+ acronym,
+ table,
+ th,
+ td,
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="week"],
+ input[type="month"],
+ input[type="text"],
+ input[type="email"],
+ input[type="url"],
+ input[type="password"],
+ input[type="search"],
+ input[type="tel"],
+ input[type="number"],
+ textarea,
+ .main-navigation li,
+ .main-navigation .primary-menu,
+ .menu-toggle,
+ .dropdown-toggle:after,
+ .social-navigation a,
+ .image-navigation,
+ .comment-navigation,
+ .tagcloud a,
+ .entry-content,
+ .entry-summary,
+ .page-links a,
+ .page-links > span,
+ .comment-list article,
+ .comment-list .pingback,
+ .comment-list .trackback,
+ .comment-reply-link,
+ .no-comments,
+ .widecolumn .mu_register .mu_alert {
+ border-color: %1$s; /* Fallback for IE7 and IE8 */
+ border-color: %2$s;
+ }
+
+ hr,
+ code {
+ background-color: %1$s; /* Fallback for IE7 and IE8 */
+ background-color: %2$s;
+ }
+
+ @media screen and (min-width: 56.875em) {
+ .main-navigation ul ul,
+ .main-navigation ul ul li {
+ border-color: %2$s;
+ }
+
+ .main-navigation ul ul:before {
+ border-top-color: %2$s;
+ border-bottom-color: %2$s;
+ }
+ }
+ ';
+
+ wp_add_inline_style( 'tainacan-style', sprintf( $css, $main_text_color, $border_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'tainacan_main_text_color_css', 11 );
+
+/**
+ * Enqueues front-end CSS for the secondary text color.
+ *
+ * @since Tainacan Theme
+ *
+ * @see wp_add_inline_style()
+ */
+function tainacan_secondary_text_color_css() {
+ $color_scheme = tainacan_get_color_scheme();
+ $default_color = $color_scheme[4];
+ $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
+
+ // Don't do anything if the current color is the default.
+ if ( $secondary_text_color === $default_color ) {
+ return;
+ }
+
+ $css = '
+ /* Custom Secondary Text Color */
+
+ /**
+ * IE8 and earlier will drop any block with CSS3 selectors.
+ * Do not combine these styles with the next block.
+ */
+ body:not(.search-results) .entry-summary {
+ color: %1$s;
+ }
+
+ blockquote,
+ .post-password-form label,
+ a:hover,
+ a:focus,
+ a:active,
+ .post-navigation .meta-nav,
+ .image-navigation,
+ .comment-navigation,
+ .widget_recent_entries .post-date,
+ .widget_rss .rss-date,
+ .widget_rss cite,
+ .site-description,
+ .author-bio,
+ .entry-footer,
+ .entry-footer a,
+ .sticky-post,
+ .taxonomy-description,
+ .entry-caption,
+ .comment-metadata,
+ .pingback .edit-link,
+ .comment-metadata a,
+ .pingback .comment-edit-link,
+ .comment-form label,
+ .comment-notes,
+ .comment-awaiting-moderation,
+ .logged-in-as,
+ .form-allowed-tags,
+ .site-info,
+ .site-info a,
+ .wp-caption .wp-caption-text,
+ .gallery-caption,
+ .widecolumn label,
+ .widecolumn .mu_register label {
+ color: %1$s;
+ }
+
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus {
+ background-color: %1$s;
+ }
+ ';
+
+ wp_add_inline_style( 'tainacan-style', sprintf( $css, $secondary_text_color ) );
+}
+add_action( 'wp_enqueue_scripts', 'tainacan_secondary_text_color_css', 11 );
diff --git a/src/functions/enqueues.php b/src/functions/enqueues.php
index 39eced0..10543fa 100644
--- a/src/functions/enqueues.php
+++ b/src/functions/enqueues.php
@@ -28,11 +28,6 @@ if ( ! function_exists('tainacan_Enqueues') ) {
wp_register_script('popper_bootstrap4', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true);
wp_enqueue_script('popper_bootstrap4');
- // Load the dark colorscheme.
- if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
- wp_register_style('tainacan-colors-dark', get_stylesheet_uri(). '/assets/css/colors-dark.css');
- wp_enqueue_style('tainacan-colors-dark');
- }
/**
* Google Charts