selective_refresh->add_partial( 'rivet_color_accent', array( 'selector' => 'style', 'render_callback' => 'rivet_customizer_css', ) ); $wp_customize->selective_refresh->add_partial( 'rivet_color_accent_alt', array( 'selector' => 'style', 'render_callback' => 'rivet_customizer_css', ) ); $wp_customize->add_setting( 'rivet_color_accent', array( 'default' => 'default', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_control( 'rivet_color_accent', array( 'label' => esc_html__( 'Primary accent color', 'rivet' ), 'section' => 'colors', 'type' => 'color', ) ); $wp_customize->add_setting( 'rivet_color_accent_alt', array( 'default' => 'default', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'refresh', ) ); $wp_customize->add_control( 'rivet_color_accent_alt', array( 'label' => esc_html__( 'Secondary accent color', 'rivet' ), 'section' => 'colors', 'type' => 'color', ) ); } add_action( 'customize_register', 'rivet_colors_register' ); /** * Add inline CSS needed for accent colours. * * @see wp_add_inline_style() */ function rivet_apply_colors() { $accent = get_theme_mod( 'rivet_color_accent', '40' ); $accent_dark = $accent; // figure out how to darken this! $accent_alt = get_theme_mod( 'rivet_color_accent_alt', '40' ); $css = ':root { --accent: '.$accent.'; --accent-alt: '.$accent_alt.'; --accent-dark: '.$accent_dark.'; }'; wp_add_inline_style( 'rivet-style', $css ); } add_filter( 'wp_enqueue_scripts', 'rivet_apply_colors' ); /** * Add inline CSS for the Customizer, too. * */ function rivet_customizer_css() { ?>