scss 定制器+ Gutenberg + SASS配色方案

Posted 2021-05-17

/**
 * Add the Color Options section to the customizer
 *
 * @param $wp_customize
 */
function cgs_color_options_section( $wp_customize ) {
	$wp_customize->add_section(
		'cgs_color_options',
		array(
			'title'       => esc_html__( 'Theme Color Scheme', 'cgs' ),
			'description' => esc_html__( 'Select the color scheme', 'cgs' ),
			'priority'    => 35,
		)
	);

	$wp_customize->add_setting(
		'cgs_color_scheme',
		array(
			'default'           => 'default',
			'sanitize_callback' => 'cgs_sanitize_color',
		)
	);

	$wp_customize->add_control(
		'cgs_color_scheme',
		array(
			'label'   => esc_html__( 'Color Scheme', 'cgs' ),
			'section' => 'tfc_color_options',
			'type'    => 'radio',
			'choices' => array(
				'default'      => esc_html__( 'Default', 'cgs' ),
				'youthful' => esc_html__( 'Youthful', 'cgs' ),
				'established' => esc_html__( 'Established', 'cgs' ),
			),
		)
	);
}
add_action( 'customize_register', 'cgs_color_options_section' );

/**
 * Sanitize color options
 *
 * @param $input
 * @return string
 */
function cgs_sanitize_color( $input ) {
	$allowed = array(
		'default',
		'youthful',
		'established',
	);
	if ( in_array( $input, $allowed, true ) ) {
		return $input;
	} else {
		return '';
	}
}

/**
 * Add styles to the customizer so users can get a preview of the color scheme
 */
function cgs_customizer_styles() { ?>
	<style>
        #sub-accordion-section-cgs_color_options input + label:after {
            display: block;
            content: '';
            width: 0;
            height: 2em;
        }
        #_customize-input-cgs_color_scheme-radio-default + label:after {
            border-left: 5em solid #DB043C;
            border-right: 5em solid #1478C6;
        }
        #_customize-input-cgs_color_scheme-radio-youthful + label:after {
            border-left: 5em solid #D43666;
            border-right: 5em solid #2056C0;
        }
        #_customize-input-cgs_color_scheme-radio-established + label:after {
            border-left: 5em solid #EFEFEF;
            border-right: 5em solid #A52B22;
        }
	</style>
	<?php

}
add_action( 'customize_controls_print_styles', 'cgs_customizer_styles', 999 );

/*
 * When you set up the theme, enable Gutenberg color palettes.
 */
function gcs_setup() {
    /*
     * Enable support for Gutenberg color palette.
     */
    add_theme_support( 'editor-color-palette', cgs_current_color_palette()	);
    add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'cgs_setup' );

/**
 * Get the current color palette
 *
 * @return array $colors
 */
function cgs_current_color_palette() {
	$palette = get_theme_mod( 'cgs_color_scheme', 'default' );

	if( 'youthful' === $palette ) {
		$colors = array(
			array(
				'name' => esc_html__( 'Text', 'cgs' ),
				'slug' => 'main-text',
				'color' => '#282B2F',
			),
			array(
				'name' => esc_html__( 'Red', 'cgs' ),
				'slug' => 'red',
				'color' => '#D43666',
			),
			array(
				'name' => esc_html__( 'Blue', 'cgs' ),
				'slug' => 'blue',
				'color' => '#2056C0',
			),
			array(
				'name' => esc_html__( 'Footer', 'cgs' ),
				'slug' => 'footer',
				'color' => '#17191C',
			),
			array(
				'name' => esc_html__( 'White', 'cgs' ),
				'slug' => 'white',
				'color' => '#FFFFFF',
			)
		);
	} elseif( 'established' === $palette ) {
		$colors = array(
			array(
				'name' => esc_html__( 'Text', 'cgs' ),
				'slug' => 'main-text',
				'color' => '#1E2529',
			),
			array(
				'name' => esc_html__( 'Red', 'cgs' ),
				'slug' => 'red',
				'color' => '#A52B22',
			),
			array(
				'name' => esc_html__( 'Blue', 'cgs' ),
				'slug' => 'blue',
				'color' => '#EFEFEF',
			),
			array(
				'name' => esc_html__( 'Footer', 'cgs' ),
				'slug' => 'footer',
				'color' => '#062C46',
			),
			array(
				'name' => esc_html__( 'White', 'cgs' ),
				'slug' => 'white',
				'color' => '#FFFFFF',
			)
		);
	} else {
		$colors = array(
			array(
				'name' => esc_html__( 'Text', 'cgs' ),
				'slug' => 'main-text',
				'color' => '#171A1C',
			),
			array(
				'name' => esc_html__( 'Red', 'cgs' ),
				'slug' => 'red',
				'color' => '#DB043C',
			),
			array(
				'name' => esc_html__( 'Blue', 'cgs' ),
				'slug' => 'blue',
				'color' => '#1478C6',
			),
			array(
				'name' => esc_html__( 'Footer', 'cgs' ),
				'slug' => 'footer',
				'color' => '#0A1C29',
			),
			array(
				'name' => esc_html__( 'White', 'cgs' ),
				'slug' => 'white',
				'color' => '#FFFFFF',
			)
		);
	}
	return $colors;
}

// Color schemes

@mixin color-schemes( $variant ) {
	@each $scheme in default, youthful, established {
		color: map-get($colors, $variant);
		body.#{$scheme} & {
			color: map-get($colors, $variant#{-#{$scheme}});
		}
	}
}

@mixin color-schemes-background( $variant ) {
	@each $scheme in default, youthful, established {
		color: map-get($colors, $variant);
		body.#{$scheme} & {
			background-color: map-get($colors, $variant#{-#{$scheme}});
		}
	}
}

// Any time you need to use a color, use the mixin with the color variant (text, primary, secondary, etc.)

button {
  @include color-schemes-background( primary );
	@include color-schemes( foreground );
}

$colors: (
  // Default color scheme
  text-default: #171A1C,        // text
  primary-default: #DB043C,     // red
  secondary-default: #1478C6,   // blue
  nav-default: #1478C6,
  footer-default: #0A1C29,      // footer
  background-default: #1478C6,
  foreground-default: #FFFFFF,  // white
  // Youthful color scheme
  text-youthful: #282B2F,       // text
  primary-youthful: #D43666,    // red
  secondary-youthful: #2056C0,  // blue
  nav-youthful: #2056C0,
  footer-youthful: #17191C,     // footer
  background-youthful: #2056C0,
  foreground-youthful: #FFFFFF,
  // Established color scheme
  text-established: #1E2529,      // text
  primary-established: #A52B22,   // red
  secondary-established: #EFEFEF, // blue
  footer-established: #062C46,    // footer
  nav-established: #062C46,
  background-established: #EFEFEF,
  foreground-established: #1E2529,
)