how to add Custom theme styles in dawn theme?

[varsha11]

I am creating my own custom theme for selling on the Shopify theme store, I want to provide a feature for changing theme style which is present in the many themes, I have created the option in settings_data.json inside the presets but how do I implement it into the code to create different theme styles, 

[KetanKumar]

@varsha11 

Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

also please share your custom style layout

[varsha11]

Hello @KetanKumar 

I have created my custom theme and have to give a feature for switching theme styles, which is present in many themes like vintage and boost. There is an option in Theme Settings > Theme Style from where we can change the Theme style and it will change the whole style and template of the theme, I have created the option in the settings_data.json file in the presets section, but how to bring it into the code to change the theme style.

settings_data.json - 

"presets": {
"Aesthetic": {

}

"minimal"{

}

}

I Have to get these theme styles in my code to change the style of themes according to its name.

[KetanKumar]

@varsha11 thanks for details 

{
  "presets": {
    "Aesthetic": {
      "global": {
        "color_scheme": "light",
        "primary_color": "#ff6347",  // Custom color
        "secondary_color": "#32cd32"
      },
      "sections": {
        "header": {
          "background_color": "#f0f8ff" // Custom background color for header
        },
        "footer": {
          "text_color": "#000000"  // Custom text color for footer
        }
      }
    },
    "Minimal": {
      "global": {
        "color_scheme": "dark",
        "primary_color": "#333333",
        "secondary_color": "#ffffff"
      },
      "sections": {
        "header": {
          "background_color": "#000000"
        },
        "footer": {
          "text_color": "#f0f0f0"
        }
      }
    }
  }
}

[varsha11]

How to Bring this into the code, for example, if I want to add an aesthetic.css file if the selected theme style is aesthetic and minimal if the  selected theme style is minimal, so that I can render different section for different theme

[KetanKumar]

@varsha11 try this way for example

{%- if settings.layout_style == 'theme_one' -%}
  <!-- Code for Theme 1 -->
  <div class="theme-one">
    <!-- Content specific to theme one -->
  </div>
{%- elsif settings.layout_style == 'theme_two' -%}
  <!-- Code for Theme 2 -->
  <div class="theme-two">
    <!-- Content specific to theme two -->
  </div>
{%- else -%}
  <!-- Default theme or layout -->
  <div class="default-theme">
    <!-- Content for default theme -->
  </div>
{%- endif -%}

schema code 

{
  "type": "radio",
  "id": "layout_style",
  "label": "Select Layout Style",
  "options": [
    {
      "value": "theme_one",
      "label": "Theme 1"
    },
    {
      "value": "theme_two",
      "label": "Theme 2"
    }
  ],
  "default": "theme_one"
}

[varsha11]

This is not bringing the theme names from the presets it is creating a new radio setting, I directly want it fetched from the presets section.

[KetanKumar]

@varsha11  sorry but your have add this code general schema code and apply your logic