DigiFlash includes predefined style variations that provide different color schemes and design presets through the Site Editor.
Accessing Style Variations
Navigate to Appearance → Editor and click the Styles icon in the top-right corner. At the top of the Styles panel, locate the Browse styles option and click it to view all available style variations.
Understanding Style Variations
Style variations are essentially alternative versions of theme.json that ship with your theme, stored as custom-named JSON files in the theme’s /styles folder Style Variations – Theme Handbook | Developer. Each variation can include different color palettes, typography settings, and other design configurations.
DigiFlash comes with several predefined style variations. Each variation displays as a preview card showing how the colors and fonts appear when applied to your website.
Applying a Style Variation
In the Browse styles view, click on any style variation card to apply it to your entire website. The preview updates immediately, and all pages, templates, and posts adopt the new color scheme and design settings.
Only one style variation can be active at a time. When a user selects a style variation, the JSON data is migrated to the site’s database and stored as a user customization, allowing the data to overrule the theme’s primary theme.json settings Style Variations – Theme Handbook | Developer.
Customizing an Active Style Variation
After applying a style variation, you can further customize its colors through the Styles panel. Click the back arrow from the Browse styles view, then navigate to Colors to modify individual colors in the palette.
Any customizations you make are saved to your database and override the style variation’s default settings. These changes persist even if you switch to a different variation and switch back.
Customizing Colors
Within the Colors section, modify each color individually:
Primary Color – Your brand’s main color used for buttons and key elements
Secondary Color – Supporting color for accents and variations
Background Colors – Base and contrast backgrounds for different sections
Text Colors – Primary and secondary text colors for content hierarchy
Neutral Colors – Grayscale options for borders and subtle elements
Click each color swatch and use the color picker to select your desired values. Changes apply immediately to your website.
Resetting to Default Style Variation
To return to the original style variation settings, navigate to the Colors section and click the three-dot menu. Select Reset to defaults to remove all customizations and restore the variation’s original color palette.