Colors

This theme uses CSS variables to manage colors, making it easy to update your palette in one place—the WordPress customizer. Changes made here are reflected throughout the theme for consistent styling.

Color Variables

The theme provides eight (or more) CSS color variables:

var(--theme-palette-color-1)
var(--theme-palette-color-2)
var(--theme-palette-color-3)
var(--theme-palette-color-4)
var(--theme-palette-color-5)
var(--theme-palette-color-6)
var(--theme-palette-color-7)
var(--theme-palette-color-8)

To use a color variable in your CSS, reference it in a property:

.my-element {
    background-color: var(--theme-palette-color-1);
}

Changing Colors

To update the theme colors, go to the WordPress customizer and set values for each variable. All uses of these variables in your theme will update automatically, ensuring consistency and simplifying maintenance.

VS Code Snippets

Visual Studio Code supports “snippets”—short keywords that expand into code blocks. This theme provides snippets for each color variable to speed up your workflow.

Using Snippets

Type the snippet name (e.g., pc1) and press Tab to insert the corresponding color variable.

Snippet Reference

• pc1: var(--theme-palette-color-1)
• pc2: var(--theme-palette-color-2)
• pc3: var(--theme-palette-color-3)
• pc4: var(--theme-palette-color-4)
• pc5: var(--theme-palette-color-5)
• pc6: var(--theme-palette-color-6)
• pc7: var(--theme-palette-color-7)
• pc8: var(--theme-palette-color-8)

Snippets help you write code faster and keep your theme consistent. Happy coding!