how to add Custom theme styles in dawn theme?

Store Design
,

Topic summary

Goal: Implement switchable “Theme Style” options in a custom Shopify theme (similar to Vintage/Boost), using presets defined in config to change styles and load different CSS (e.g., aesthetic.css vs minimal.css).

What was tried: The author added named presets (Aesthetic, Minimal) in settings_data.json and asked how to use the selected preset in code to change styles and templates.

Suggestions provided:

  • Example preset structure showing style-specific values under global and sections.
  • A Liquid + schema workaround: create a new radio setting (settings.layout_style) and use conditionals to include different CSS or sections based on the selected value.

Disagreement/limitation: The author wants to automatically read the currently selected Theme Style from presets (Theme Settings > Theme Style) rather than adding a new custom setting. The provided solution introduces an extra setting and does not fetch the preset name directly.

Status: Unresolved. No confirmed method was given to access the active preset name directly in Liquid. Next step would be clarifying if Shopify exposes the selected preset to Liquid or relying on a custom setting as a workaround.

Note: Code snippets are central to understanding the proposed approach.

Summarized with AI on December 13. AI used: gpt-5.
4

@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"
        }
      }
    }
  }
}