Title: Style Variations Published: 24 May 2024 Last modified: 31 July 2024 --- [Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/) [Intermediate Theme Developer](https://learn.wordpress.org/course/intermediate-theme-developer/) Style Variations [ Exit Course ](https://learn.wordpress.org/course/intermediate-theme-developer/) 1. a. [ Global theme settings ](https://learn.wordpress.org/lesson/global-theme-settings/) [Preview](https://learn.wordpress.org/lesson/global-theme-settings/) b. [ Block theme styles ](https://learn.wordpress.org/lesson/block-theme-styles/) [Preview](https://learn.wordpress.org/lesson/block-theme-styles/) c. [ Templates ](https://learn.wordpress.org/lesson/custom-templates/) [Preview](https://learn.wordpress.org/lesson/custom-templates/) d. [ Theme Patterns ](https://learn.wordpress.org/lesson/theme-patterns/) [Preview](https://learn.wordpress.org/lesson/theme-patterns/) e. [ Style Variations ](https://learn.wordpress.org/lesson/style-variations/) [Preview](https://learn.wordpress.org/lesson/style-variations/) 2. 5 lessons 3. a. [ Template overview ](https://learn.wordpress.org/lesson/template-overview/) [Preview](https://learn.wordpress.org/lesson/template-overview/) b. [ Template Hierarchy ](https://learn.wordpress.org/lesson/template-hierarchy/) [Preview](https://learn.wordpress.org/lesson/template-hierarchy/) c. [ Template parts ](https://learn.wordpress.org/lesson/template-parts-4/) [Preview](https://learn.wordpress.org/lesson/template-parts-4/) 4. 3 lessons 5. a. [ Custom functionality ](https://learn.wordpress.org/lesson/custom-functionality/) [Preview](https://learn.wordpress.org/lesson/custom-functionality/) b. [ Including assets ](https://learn.wordpress.org/lesson/including-assets/) [Preview](https://learn.wordpress.org/lesson/including-assets/) c. [ Block stylesheets ](https://learn.wordpress.org/lesson/block-stylesheets/) [Preview](https://learn.wordpress.org/lesson/block-stylesheets/) d. [ Block style variations ](https://learn.wordpress.org/lesson/block-style-variations/) [Preview](https://learn.wordpress.org/lesson/block-style-variations/) e. [ Block variations ](https://learn.wordpress.org/lesson/block-variations/) [Preview](https://learn.wordpress.org/lesson/block-variations/) 6. 5 lessons 7. a. [ Introduction to Classic themes ](https://learn.wordpress.org/lesson/introduction-to-classic-themes/) [Preview](https://learn.wordpress.org/lesson/introduction-to-classic-themes/) b. [ The Loop ](https://learn.wordpress.org/lesson/the-loop/) [Preview](https://learn.wordpress.org/lesson/the-loop/) c. [ Theme options ](https://learn.wordpress.org/lesson/theme-options/) [Preview](https://learn.wordpress.org/lesson/theme-options/) d. [ theme.json in Classic themes ](https://learn.wordpress.org/lesson/theme-json-in-classic-themes/) [Preview](https://learn.wordpress.org/lesson/theme-json-in-classic-themes/) e. [ Converting a Classic theme to a Block theme ](https://learn.wordpress.org/lesson/converting-a-classic-theme-to-a-block-theme/) [Preview](https://learn.wordpress.org/lesson/converting-a-classic-theme-to-a-block-theme/) 8. 5 lessons 9. a. [ Best practices for developing an accessible theme ](https://learn.wordpress.org/lesson/best-practices-for-developing-an-accessible-theme/) [Preview](https://learn.wordpress.org/lesson/best-practices-for-developing-an-accessible-theme/) b. [ Tools for testing theme accessibility ](https://learn.wordpress.org/lesson/tools-for-testing-theme-accessibility/) [Preview](https://learn.wordpress.org/lesson/tools-for-testing-theme-accessibility/) 10. 2 lessons 11. a. [ Themes and user privacy ](https://learn.wordpress.org/lesson/themes-and-user-privacy/) [Preview](https://learn.wordpress.org/lesson/themes-and-user-privacy/) 12. 1 lesson 13. a. [ Child themes ](https://learn.wordpress.org/lesson/child-themes/) [Preview](https://learn.wordpress.org/lesson/child-themes/) b. [ UI Best Practices ](https://learn.wordpress.org/lesson/ui-best-practices/) [Preview](https://learn.wordpress.org/lesson/ui-best-practices/) c. [ JavaScript in Themes ](https://learn.wordpress.org/lesson/javascript-in-themes/) [Preview](https://learn.wordpress.org/lesson/javascript-in-themes/) d. [ Build Process ](https://learn.wordpress.org/lesson/build-process/) [Preview](https://learn.wordpress.org/lesson/build-process/) e. [ Plugin API hooks ](https://learn.wordpress.org/lesson/plugin-api-hooks/) [Preview](https://learn.wordpress.org/lesson/plugin-api-hooks/) f. [ Testing your theme ](https://learn.wordpress.org/lesson/testing-your-theme/) [Preview](https://learn.wordpress.org/lesson/testing-your-theme/) 14. 6 lessons 15. a. [ The WordPress.org Theme Directory ](https://learn.wordpress.org/lesson/the-wordpress-org-theme-directory/) [Preview](https://learn.wordpress.org/lesson/the-wordpress-org-theme-directory/) b. [ Required theme files ](https://learn.wordpress.org/lesson/required-theme-files/) [Preview](https://learn.wordpress.org/lesson/required-theme-files/) c. [ Preparing your theme for submission ](https://learn.wordpress.org/lesson/preparing-your-theme-for-submission/) [Preview](https://learn.wordpress.org/lesson/preparing-your-theme-for-submission/) d. [ Submitting your theme to WordPress.org ](https://learn.wordpress.org/lesson/submitting-your-theme-to-wordpress-org/) [Preview](https://learn.wordpress.org/lesson/submitting-your-theme-to-wordpress-org/) e. [ Updating your theme ](https://learn.wordpress.org/lesson/updating-your-theme/) [Preview](https://learn.wordpress.org/lesson/updating-your-theme/) 16. 5 lessons ### Global Settings and Styles # Style Variations Welcome to this lesson on creating style variations or simply theme.json variations. With this lesson, we will: * define and describe style variations, * differentiate between theme and style variation JSON files, and * differentiate between a child theme and a style variation. ## What are style variations? Style variations are essentially alternative versions of theme.json that you can ship with your theme. They are custom named JSON files that are stored in your theme’s styles folder. Any setting or style that you can add to theme.json can also be added to your style variation JSON file. This lets your users pick and choose which variation they want to use on their site. In a way, they are a sort of skin for your theme and they reflect the mood and tone of voice. This is a way to distinguish your website in a unique way. You can bundle each of these alternative designs for your theme and let your users decide which is the best option for their site. Within the site editor, users can go into styles and choose a different style combination for their website. Here in the default Twenty Twenty-Four theme, a user could choose the Ember variation. What that means is within global styles, they have a different palette and they have these four colors available. Within the gradient tab, they have an entirely different set of gradients and the duotone orange and white. If we go over to the theme files, we see that each variation has its own separate JSON file. It’s important to note that when we create a style variation, the property duotone gradients and/or palette is replaced entirely. We don’t just swap out individual colors. ## Differentiate between theme and style variation JSON files One significant difference with a style variation is we add the title at the top under version. Our example here is Ember. And note again, theme.json has the duotones here that aren’t available when the user chooses the Ember style variation. ## Differentiate between a child theme and a style variation Now first, the similarity is the desire to override the parent theme’s theme.json file but they do it in a different way. If you had a child theme and it was active, and you had the addition of a theme.json file, the settings would override the parent themes. Within a given theme, the style variations have the same ability to override the theme.json file. However, when a user selects a variation, those changes are considered to be user customizations and they’re stored in the database. ## Next steps If you want to learn more about style variations, refer to the [theme handbook available to you on WordPress.org](https://developer.wordpress.org/themes/). This is a preview lesson Register or sign in to take this lesson. [ Take course ](https://learn.wordpress.org/course/intermediate-theme-developer/) [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fstyle-variations%2F&locale=en_US) ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).