Customizing Theme Colors & Fonts

The Looka theme 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

The Looka theme also supports advanced typography customization, including the option to self-host fonts for enhanced performance and GDPR compliance.

{
  "fonts": {
    "font_family": [
      {
        "name": "DM Sans",
        "src": [
          {
            "style": "normal",
            "weight": "400"
          },
          {
            "style": "normal",
            "weight": "500"
          },
          {
            "style": "normal",
            "weight": "600"
          },
          {
            "style": "normal",
            "weight": "700"
          }
        ],
        "preload": false,
        "provider": "google-fonts",
        "display": "swap",
        "cssVariable": "font-primary",
        "fallback": "sans-serif",
        "locallyHosted": true,
        "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
      },
      {
        "name": "Syne",
        "src": [
          {
            "style": "normal",
            "weight": "500"
          }
        ],
        "preload": false,
        "display": "swap",
        "cssVariable": "font-secondary",
        "provider": "google-fonts",
        "fallback": "sans-serif",
        "locallyHosted": true,
        "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
      }
    ],
    "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

Update fonts in font_family array to suit your brand style.
Adjust font sizes to enhance readability.
Enable self_hosted_fonts for GDPR compliance (downloads fonts to the /public folder and host them locally instead cdn).