WordPress.org

Make WordPress Core

Ticket #25094: 25094-accent-color.diff

File 25094-accent-color.diff, 5.8 KB (added by celloexpressions, 2 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