Add color palette option to Customizer in WP Rig theme

Component.php

<?php
/**
 * WP_Rig\WP_Rig\Customizer\Component class
 *
 * @package wp_rig
 */

namespace WP_Rig\WP_Rig\Customizer;

use WP_Rig\WP_Rig\Component_Interface;
use WP_Rig\WP_Rig\Templating_Component_Interface;
use function WP_Rig\WP_Rig\wp_rig;
use WP_Customize_Manager;
use function add_action;
use function bloginfo;
use function wp_enqueue_script;
use function get_theme_file_uri;

/**
 * Class for managing Customizer integration.
 *
 * Exposes template tags:
 * * wp_rig()->get_color_scheme
 * * wp_rig()->get_color_scheme_choices
 * * wp_rig()->sanitize_color_scheme
 * * wp_rig()->filter_body_classes
 *
 * @link https://wordpress.org/plugins/amp/
 */
class Component implements Component_Interface, Templating_Component_Interface {

	/**
	 * Gets the unique identifier for the theme component.
	 *
	 * @return string Component slug.
	 */
	public function get_slug() : string {
		return 'customizer';
	}

	/**
	 * Adds the action and filter hooks to integrate with WordPress.
	 */
	public function initialize() {
		add_action( 'customize_register', [ $this, 'action_customize_register' ] );
		add_action( 'customize_preview_init', [ $this, 'action_enqueue_customize_preview_js' ] );
		add_filter( 'body_class', [ $this, 'filter_body_classes' ] );
	}

	/**
	 * Gets template tags to expose as methods on the Template_Tags class instance, accessible through `wp_rig()`.
	 *
	 * @return array Associative array of $method_name => $callback_info pairs. Each $callback_info must either be
	 *               a callable or an array with key 'callable'. This approach is used to reserve the possibility of
	 *               adding support for further arguments in the future.
	 */
	public function template_tags() : array {
		return [
			'get_color_schemes'        => [ $this, 'get_color_schemes' ],
			'get_color_scheme'         => [ $this, 'get_color_scheme' ],
			'get_color_scheme_choices' => [ $this, 'get_color_scheme_choices' ],
			'sanitize_color_scheme'    => [ $this, 'sanitize_color_scheme' ],
			'filter_body_classes'      => [ $this, 'filter_body_classes' ],
		];
	}

	/**
	 * Adds postMessage support for site title and description, plus a custom Theme Options section.
	 *
	 * @param WP_Customize_Manager $wp_customize Customizer manager instance.
	 */
	public function action_customize_register( WP_Customize_Manager $wp_customize ) {
		$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
		$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
		$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

		if ( isset( $wp_customize->selective_refresh ) ) {
			$wp_customize->selective_refresh->add_partial(
				'blogname',
				[
					'selector'        => '.site-title a',
					'render_callback' => function() {
						bloginfo( 'name' );
					},
				]
			);
			$wp_customize->selective_refresh->add_partial(
				'blogdescription',
				[
					'selector'        => '.site-description',
					'render_callback' => function() {
						bloginfo( 'description' );
					},
				]
			);
		}

		/**
		 * Theme options.
		 */
		$wp_customize->add_section(
			'theme_options',
			[
				'title'    => __( 'Theme Options', 'wp-rig' ),
				'priority' => 130, // Before Additional CSS.
			]
		);

		// Add color scheme setting and control.
		$wp_customize->add_setting(
			'color_scheme',
			array(
				'default'           => 'default',
				'sanitize_callback' => array( $this, 'sanitize_color_scheme' ),
				'transport'         => 'postMessage',
			)
		);

		$wp_customize->add_control(
			'color_scheme',
			array(
				'label'    => __( 'Base Color Scheme', 'wp-rig' ),
				'section'  => 'colors',
				'type'     => 'select',
				'choices'  => array(
					'default' => __( 'Default', 'wp-rig' ),
					'dark'    => __( 'Dark', 'wp-rig' ),
				),
				'priority' => 1,
			)
		);
	}

	/**
	 * Registers color schemes for WPCampus Rig.
	 *
	 * @return array An associative array of color scheme options.
	 */
	public function get_color_schemes() {
		/**
		 * Filter the color schemes registered for use with Twenty Sixteen.
		 *
		 * The schemes are 'default' and 'dark'.
		 *
		 * @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.
		 *     }
		 * }
		 */
		return apply_filters(
			'wprig_color_schemes',
			array(
				'default' => array(
					'label' => __( 'Default', 'wp-rig' ),
					'slug'  => 'color-scheme-default',
				),
				'dark' => array(
					'label' => __( 'Dark', 'wp-rig' ),
					'slug'  => 'color-scheme-dark',
				),
			)
		);
	}

	/**
	 * Retrieves the current WPCampus Rig color scheme.
	 *
	 * @return string The color scheme slug.
	 */
	public function get_color_scheme() {
		$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
		$color_schemes       = wp_rig()->get_color_schemes();

		if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
			return $color_schemes[ $color_scheme_option ]['slug'];
		}

		return $color_schemes['default']['slug'];
	}

	/**
	 * Retrieves an array of color scheme choices registered for WPCampus Rig.
	 *
	 * @return array Array of color schemes.
	 */
	public function get_color_scheme_choices() {
		wp_rig()->get_color_scheme();

		$color_schemes                = wp_rig()->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;
	}


	/**
	 * Handles sanitization for WPCampus Rig color schemes.
	 *
	 * @param string $value Color scheme name value.
	 * @return string Color scheme name.
	 */
	public function sanitize_color_scheme( $value ) {

		if ( ! in_array( $value, array( 'default', 'dark' ), true ) ) {
			$value = 'default';
		}

		return $value;
	}

	/**
	 * Adds custom classes to indicate current color scheme.
	 *
	 * @param array $classes Classes for the body element.
	 * @return array Filtered body classes.
	 */
	public function filter_body_classes( array $classes ) : array {
		$classes[] = wp_rig()->get_color_scheme();

		return $classes;
	}

	/**
	 * Enqueues JavaScript to make Customizer preview reload changes asynchronously.
	 */
	public function action_enqueue_customize_preview_js() {
		wp_enqueue_script(
			'wp-rig-customizer',
			get_theme_file_uri( '/assets/js/customizer.min.js' ),
			[ 'customize-preview' ],
			wp_rig()->get_asset_version( get_theme_file_path( '/assets/js/customizer.min.js' ) ),
			true
		);
	}
}

custom-properties.css

/**
 * Custom Properties
 * aka CSS variables.
 *
 * @link: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
 **/

:root {
	--global-font-color: #333;
	--global-font-family: "Crimson Text", serif;
	--global-font-size: 20;
	--global-font-line-height: 1.4;
	--highlight-font-family:
		"Roboto Condensed",
 "Helvetica Neue",
 "Arial Narrow",
		sans-serif;
	--content-width: 45rem;
	--dropdown-symbol-width: 0.7em;
	--main-nav-text-color: #000;

	/* Custom editor colors */
	--color-theme-primary: #e36d60;
	--color-theme-secondary: #41848f;
	--color-theme-red: #c0392b;
	--color-theme-green: #27ae60;
	--color-theme-blue: #2980b9;
	--color-theme-yellow: #f1c40f;
	--color-theme-black: #1c2833;
	--color-theme-grey: #95a5a6;
	--color-theme-white: #ecf0f1;
	--color-custom-daylight: #97c0b7;
	--color-custom-sun: #eee9d1;

	--color-link: #0073aa;
	--color-link-visited: #333;
	--color-link-active: #00a0d2;

	--color-quote-border: #000;
	--color-quote-citation: #6c7781;

	/* Custom editor font sizes */
	--font-size-small: calc(16 / var(--global-font-size) * 1rem);
	--font-size-regular: calc(var(--global-font-size) / 16 * 1rem);
	--font-size-large: calc(36 / var(--global-font-size) * 1rem);
	--font-size-larger: calc(48 / var(--global-font-size) * 1rem);
}

.color-scheme-dark {
	background-color: #121212;
	--global-font-color: #fff;

	--color-link: hsl(267, 95%, 76%);
	--color-link-visited: hsl(267, 95%, 96%);
	--color-link-active: #fff;

	--main-nav-text-color: hsl(267, 95%, 76%);

	--color-quote-border: hsl(0, 0%, 80%);
	--color-quote-citation: hsl(0, 0%, 50%);
}

customizer.js

/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */

( function( $ ) {
	// Site title and description.
	wp.customize( 'blogname', function( value ) {
		value.bind( function( to ) {
			$( '.site-title a' ).text( to );
		} );
	} );
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( to ) {
			$( '.site-description' ).text( to );
		} );
	} );

	// Header text color.
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( to ) {
			if ( 'blank' === to ) {
				$( '.site-title, .site-description' ).css( {
					clip: 'rect(1px, 1px, 1px, 1px)',
					position: 'absolute',
				} );
			} else {
				$( '.site-title, .site-description' ).css( {
					clip: 'auto',
					position: 'relative',
				} );
				$( '.site-title a, .site-description' ).css( {
					color: to,
				} );
			}
		} );
	} );

	// Color scheme.
	wp.customize( 'color_scheme', function( value ) {
		value.bind( function( to ) {
			if ( $( 'body.logged-in' ).hasClass( 'color-scheme-' + to ) ) {
			} else {
				$( 'body.logged-in' )
					.removeClass( function( index, className ) {
						return ( className.match( /(^|\s)color-scheme-\S+/g ) || [] ).join( ' ' );
					} )
					.addClass( 'color-scheme-' + to );
			}
		} );
	} );
}( jQuery ) );