| 43 | | |
| 44 | | /** |
| 45 | | * Generate two variants of the accent color, return the original, and |
| 46 | | * save the others as theme mods. |
| 47 | | * |
| 48 | | * @since Twenty Fourteen 1.0 |
| 49 | | * |
| 50 | | * @param string $color The original color. |
| 51 | | * @return string $color The original color, sanitized. |
| 52 | | */ |
| 53 | | function twentyfourteen_generate_accent_colors( $color ) { |
| 54 | | $color = sanitize_hex_color( $color ); |
| 55 | | |
| 56 | | set_theme_mod( 'accent_lighter', twentyfourteen_adjust_color( $color, 14 ) ); |
| 57 | | set_theme_mod( 'accent_much_lighter', twentyfourteen_adjust_color( $color, 71 ) ); |
| 58 | | |
| 59 | | return $color; |
| 60 | | } |
| 61 | | |
| 62 | | /** |
| 63 | | * Tweak the brightness of a color by adjusting the RGB values by the given interval. |
| 64 | | * |
| 65 | | * Use positive values of $steps to brighten the color and negative values to darken the color. |
| 66 | | * All three RGB values are modified by the specified steps, within the range of 0-255. The hue |
| 67 | | * is generally maintained unless the number of steps causes one value to be capped at 0 or 255. |
| 68 | | * |
| 69 | | * @since Twenty Fourteen 1.0 |
| 70 | | * |
| 71 | | * @param string $color The original color, in 3- or 6-digit hexadecimal form. |
| 72 | | * @param int $steps The number of steps to adjust the color by, in RGB units. |
| 73 | | * @return string $color The new color, in 6-digit hexadecimal form. |
| 74 | | */ |
| 75 | | function twentyfourteen_adjust_color( $color, $steps ) { |
| 76 | | // Convert shorthand to full hex. |
| 77 | | if ( strlen( $color ) == 3 ) { |
| 78 | | $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 ); |
| 79 | | } |
| 80 | | |
| 81 | | // Convert hex to rgb. |
| 82 | | $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) ); |
| 83 | | |
| 84 | | // Adjust color and switch back to hex. |
| 85 | | $hex = '#'; |
| 86 | | foreach ( $rgb as $c ) { |
| 87 | | $c += $steps; |
| 88 | | if ( $c > 255 ) |
| 89 | | $c = 255; |
| 90 | | elseif ( $c < 0 ) |
| 91 | | $c = 0; |
| 92 | | $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT); |
| 93 | | } |
| 94 | | |
| 95 | | return $hex; |
| 96 | | } |
| 97 | | |
| 98 | | /** |
| 99 | | * Output the CSS for the Theme Customizer options. |
| 100 | | * |
| 101 | | * @since Twenty Fourteen 1.0 |
| 102 | | * |
| 103 | | * @return void |
| 104 | | */ |
| 105 | | function twentyfourteen_customizer_styles() { |
| 106 | | $accent_color = get_theme_mod( 'accent_color' ); |
| 107 | | |
| 108 | | // Don't do anything if the current color is the default. |
| 109 | | if ( '#24890d' === $accent_color ) |
| 110 | | return; |
| 111 | | |
| 112 | | $accent_lighter = get_theme_mod( 'accent_lighter' ); |
| 113 | | $accent_much_lighter = get_theme_mod( 'accent_much_lighter' ); |
| 114 | | |
| 115 | | $css = '<style type="text/css" id="twentyfourteen-accent-color"> |
| 116 | | /* Custom accent color. */ |
| 117 | | h1 a:hover, |
| 118 | | h2 a:hover, |
| 119 | | h3 a:hover, |
| 120 | | h4 a:hover, |
| 121 | | h5 a:hover, |
| 122 | | h6 a:hover, |
| 123 | | a, |
| 124 | | .entry-title a:hover, |
| 125 | | .cat-links a:hover, |
| 126 | | .site-content .post-navigation a:hover, |
| 127 | | .site-content .image-navigation a:hover, |
| 128 | | .comment-author a:hover, |
| 129 | | .comment-metadata a:hover, |
| 130 | | .comment-list .trackback a:hover, |
| 131 | | .comment-list .pingback a:hover, |
| 132 | | .paging-navigation .page-numbers.current, |
| 133 | | .content-sidebar.widget-area a:hover, |
| 134 | | .content-sidebar .widget_twentyfourteen_ephemera .post-format-archive-link { |
| 135 | | color: ' . $accent_color . '; |
| 136 | | } |
| 137 | | |
| 138 | | button, |
| 139 | | html input[type="button"], |
| 140 | | input[type="reset"], |
| 141 | | input[type="submit"], |
| 142 | | .hentry .mejs-controls .mejs-time-rail .mejs-time-current, |
| 143 | | .header-extra, |
| 144 | | .search-toggle, |
| 145 | | .primary-navigation ul ul, |
| 146 | | .primary-navigation li:hover > a, |
| 147 | | .page-links a:hover, |
| 148 | | .widget_calendar tbody a { |
| 149 | | background-color: ' . $accent_color . '; |
| 150 | | } |
| 151 | | |
| 152 | | ::-moz-selection { |
| 153 | | background: ' . $accent_color . '; |
| 154 | | } |
| 155 | | |
| 156 | | ::selection { |
| 157 | | background: ' . $accent_color . '; |
| 158 | | } |
| 159 | | |
| 160 | | .page-links a:hover, |
| 161 | | .paging-navigation .page-numbers.current { |
| 162 | | border-color: ' . $accent_color . '; |
| 163 | | } |
| 164 | | |
| 165 | | /* Generated variant of custom accent color: slightly lighter. */ |
| 166 | | .search-toggle:hover, |
| 167 | | .search-toggle.active, |
| 168 | | .search-box, |
| 169 | | button:hover, |
| 170 | | html input[type="button"]:hover, |
| 171 | | input[type="reset"]:hover, |
| 172 | | input[type="submit"]:hover, |
| 173 | | button:focus, |
| 174 | | html input[type="button"]:focus, |
| 175 | | input[type="reset"]:focus, |
| 176 | | input[type="submit"]:focus, |
| 177 | | .widget_calendar tbody a:hover { |
| 178 | | background-color: ' . $accent_lighter . '; |
| 179 | | } |
| 180 | | |
| 181 | | /* Generated variant of custom accent color: much lighter. */ |
| 182 | | button:active, |
| 183 | | html input[type="button"]:active, |
| 184 | | input[type="reset"]:active, |
| 185 | | input[type="submit"]:active { |
| 186 | | background-color: ' . $accent_much_lighter . '; |
| 187 | | } |
| 188 | | |
| 189 | | a:hover, |
| 190 | | a:focus, |
| 191 | | a:active, |
| 192 | | .primary-navigation li.current_page_item > a, |
| 193 | | .primary-navigation li.current-menu-item > a, |
| 194 | | .secondary-navigation a:hover, |
| 195 | | #secondary .current_page_item > a, |
| 196 | | #secondary .current-menu-item > a, |
| 197 | | .featured-content a:hover, |
| 198 | | .featured-content .more-link, |
| 199 | | .widget-area a:hover { |
| 200 | | color: ' . $accent_much_lighter . '; |
| 201 | | } |
| 202 | | </style>'; |
| 203 | | |
| 204 | | wp_add_inline_style( 'twentyfourteen-style', $css ); |
| 205 | | } |
| 206 | | add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' ); |