Customizing Theme Colors & Fonts

Each of our themes allows full customization of colors via the theme.json file. Below is an overview of how the colors are structured:

{
  "colors": {
    "default": {
      "theme_color": {
        "primary": "#1f58eb", // Main brand color
        "secondary": "#BCD4FF", // Supporting brand color
        "accent": "#E4EA8C", // Highlighted elements
        "body": "#fff", // Background color
        "border": "#E5E5E5", // Default border color
        "theme_dark": "#101E43", // Dark background
        "theme_light": "#F9FBFF" // Light background
      },
      "text_color": {
        "default": "#2E2E2E", // Standard text color
        "dark": "#000E30", // Darker text for emphasis
        "light": "#565555" // Lighter text for subtitles
      }
    }
  }
}

Customizing Colors

Modify the primary and secondary colors to match your brand.
Adjust text colors.

Typography Settings

Each of our themes also supports advanced typography customization, including the option to self-host fonts for enhanced performance and GDPR compliance.

{
  "fonts": {
    "font_family": {
      "primary": "DM Sans",
      "primary_weights": "400;500;700",
      "primary_type": "sans-serif",
      "secondary": "Syne",
      "secondary_weights": "700",
      "secondary_type": "sans-serif",

      "self_hosted_fonts": true,
      "_comment": "Set to true to download fonts to public folder."
    },
    "font_size": {
      "base": "16",          // Default font size (px)
      "type_scale": "1.29",  // Scaling factor for responsive typography
      "line_height": "1.8"   // Line spacing for better readability
    }
  }
}

Font Customization

Replace primary and secondary fonts to suit your brand style.
Adjust font sizes to enhance readability.
Enable self_hosted_fonts for GDPR compliance (downloads fonts to the /public folder).