WordPress.org

Make WordPress Core

Ticket #25094: 25094-accent-color.diff

File 25094-accent-color.diff, 5.8 KB (added by celloexpressions, 5 years ago)

First-pass at adding an "accent color" option, and generating the needed shades from it to override all of the default greens

  • wp-content/themes/twentyfourteen/inc/customizer.php

     
    1616        $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
    1717        $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
    1818
     19        $wp_customize->add_setting( 'accent_color', array(
     20                'default'       => '#24890d',
     21                'type'          => 'theme_mod',
     22                'capability'    => 'edit_theme_options',
     23                'transport'             => 'refresh',
     24        ) );
     25
     26        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'accent_color', array(
     27                'label'         => __( 'Accent Color', 'twentyfourteen' ),
     28                'section'       => 'colors',
     29                'settings'      => 'accent_color',
     30                'priority'      => 1,
     31        ) ) );
     32
    1933        $wp_customize->add_section( 'twentyfourteen_theme_options', array(
    2034                'title'         => __( 'Theme Options', 'twentyfourteen' ),
    2135                'priority'      => 35,
     
    185199        wp_enqueue_script( 'twentyfourteen_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20120827', true );
    186200}
    187201add_action( 'customize_preview_init', 'twentyfourteen_customize_preview_js' );
     202
     203/**
     204 * Outputs the css for the Theme Customizer options.
     205 *
     206 */
     207function twentyfourteen_customizer_styles() {
     208        $accent_color = get_theme_mod( 'accent_color' );
     209        $accent_1 = twentyfourteen_adjust_color( $accent_color, 14 );
     210        $accent_2 = twentyfourteen_adjust_color( $accent_color, 71 );
     211        ?>
     212        <style type="text/css">
     213                /* custom accent color */
     214                h1 a:hover,
     215                h2 a:hover,
     216                h3 a:hover,
     217                h4 a:hover,
     218                h5 a:hover,
     219                h6 a:hover,
     220                a,
     221                .primary-navigation ul ul a:hover,
     222                .entry-title a:hover,
     223                .cat-links a:hover,
     224                .site-content .post-navigation a:hover,
     225                .site-content .image-navigation a:hover,
     226                .comment-author a:hover,
     227                .comment-metadata a:hover,
     228                .comment-list .trackback a:hover,
     229                .comment-list .pingback a:hover,
     230                .content-sidebar a:hover,
     231                .paging-navigation .page-numbers.current {
     232                        color: <?php echo $accent_color; ?>;
     233                }
     234               
     235                button:hover,
     236                html input[type="button"]:hover,
     237                input[type="reset"]:hover,
     238                input[type="submit"]:hover,
     239                button:focus,
     240                html input[type="button"]:focus,
     241                input[type="reset"]:focus,
     242                input[type="submit"]:focus,
     243                .header-extra,
     244                .social-links-toggle,
     245                .search-toggle,
     246                .bypostauthor .avatar,
     247                .widget-area button,
     248                .widget-area html input[type="button"],
     249                .widget-area input[type="reset"],
     250                .widget-area input[type="submit"],
     251                .widget_calendar a,
     252                .content-sidebar button:hover,
     253                .content-sidebar html input[type="button"]:hover,
     254                .content-sidebar input[type="reset"]:hover,
     255                .content-sidebar input[type="submit"]:hover,
     256                .content-sidebar button:focus,
     257                .content-sidebar html input[type="button"]:focus,
     258                .content-sidebar input[type="reset"]:focus,
     259                .content-sidebar input[type="submit"]:focus,
     260                .page-links a:hover {
     261                        background-color: <?php echo $accent_color; ?>;
     262                }
     263               
     264                ::-moz-selection {
     265                        background: <?php echo $accent_color; ?>;
     266                }
     267               
     268                ::selection {
     269                        background: <?php echo $accent_color; ?>;
     270                }
     271               
     272                .page-links a:hover,
     273                .paging-navigation .page-numbers.current {
     274                        border-color: <?php echo $accent_color; ?>;
     275                }
     276               
     277                /* generated variant of custom accent color: slightly lighter */
     278                .social-links-toggle:hover,
     279                .search-toggle:hover,
     280                .social-links-toggle.active,
     281                .search-toggle.active,
     282                .social-links,
     283                .search-box,
     284                .widget-area button:hover,
     285                .widget-area html input[type="button"]:hover,
     286                .widget-area input[type="reset"]:hover,
     287                .widget-area input[type="submit"]:hover,
     288                .widget-area button:focus,
     289                .widget-area html input[type="button"]:focus,
     290                .widget-area input[type="reset"]:focus,
     291                .widget-area input[type="submit"]:focus,
     292                .widget-area button:active,
     293                .widget-area html input[type="button"]:active,
     294                .widget-area input[type="reset"]:active,
     295                .widget-area input[type="submit"]:active,
     296                .widget_calendar a:hover {
     297                        background-color: <?php echo $accent_1; ?>;
     298                }
     299               
     300                /* generated variant of custom accent color: lighter */
     301                button:active,
     302                html input[type="button"]:active,
     303                input[type="reset"]:active,
     304                input[type="submit"]:active,
     305                .content-sidebar button:active,
     306                .content-sidebar html input[type="button"]:active,
     307                .content-sidebar input[type="reset"]:active,
     308                .content-sidebar input[type="submit"]:active {
     309                        background-color: <?php echo $accent_2; ?>;
     310                }
     311               
     312                a:hover,
     313                a:focus,
     314                a:active,
     315                .primary-navigation li.current_page_item > a,
     316                .primary-navigation li.current-menu-item > a,
     317                .secondary-navigation a:hover,
     318                #secondary .current_page_item > a,
     319                #secondary .current-menu-item > a,
     320                #featured-content .entry-meta a:hover,
     321                #featured-content .entry-title a:hover,
     322                #featured-content .more-link,
     323                .widget-area a:hover {
     324                        color: <?php echo $accent_2; ?>;
     325                }
     326        </style>
     327        <?php
     328}
     329add_action( 'wp_head', 'twentyfourteen_customizer_styles' );
     330
     331/**
     332 * Tweaks the brightness of a color by adjusting the r/g/b values by the given interval.
     333 *
     334 */
     335function twentyfourteen_adjust_color( $color, $steps ) {
     336        // convert shorthand to full hex
     337        if( strlen( $color ) == 4 ) {
     338                $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 );
     339        }
     340       
     341        // convert hex to rgb
     342        $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) );
     343       
     344        // adjust color and switch back to hex
     345        $hex = '#';
     346        foreach ( $rgb as $c ) {
     347                $c = $c + $steps;
     348                if( $c > 255 )
     349                        $c = 255;
     350                elseif( $c < 0 )
     351                        $c = 0;
     352                $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT);
     353        }
     354       
     355        return $hex;
     356}
     357 No newline at end of file