Customizing Theme Colors & Fonts

Looka Theme Documentation

The Looka theme allows full customization of colors via the theme.css file. Below is an overview of how the colors are structured:

// theme.css
@theme inline {
  /* Configure font families in `src/config/fonts.json` */
  --leading-body: 1.8;
  --leading-inherit: inherit;

  /* Colors */
  --color-primary: #1f58eb;
  --color-secondary: #BCD4FF;
  --color-accent: #E4EA8C;
  --color-body: #fff;
  --color-border-light: #E5E5E5;
  --color-theme-dark: #101E43;
  --color-theme-light: #F9FBFF;

  --color-text-default: #2E2E2E;
  --color-dark: #000E30; /* Heading colors */
  --color-light: #565555;

  /* Screen */
  --breakpoint-*: initial;
  --breakpoint-xs: 440px;
  --breakpoint-sm: 540px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1320px;

  /* Typography */
  --text-base: 1rem;
  --text-base-scale: 1.22;
  --text-base-sm: calc(var(--text-base) * 0.9);
  --text-base-xs: calc(var(--text-base) * 0.8);

  --text-h1: calc(var(--text-base) * pow(var(--text-base-scale), 6));
  --text-h2: calc(var(--text-base) * pow(var(--text-base-scale), 5));
  --text-h3: calc(var(--text-base) * pow(var(--text-base-scale), 4));
  --text-h4: calc(var(--text-base) * pow(var(--text-base-scale), 3));
  --text-h5: calc(var(--text-base) * pow(var(--text-base-scale), 2));
  --text-h6: calc(var(--text-base) * pow(var(--text-base-scale), 1));

  --text-h1-sm: calc(var(--text-h1) * 0.7);
  --text-h2-sm: calc(var(--text-h2) * 0.7);
  --text-h3-sm: calc(var(--text-h3) * 0.7);
  --text-h1-md: calc(var(--text-h1) * 0.8);
  --text-h2-md: calc(var(--text-h2) * 0.8);
  --text-h3-md: calc(var(--text-h3) * 0.8);
  --text-h4-sm: calc(var(--text-h4) * 0.85);
  --text-h5-sm: calc(var(--text-h5) * 0.95);
  --text-h6-sm: calc(var(--text-h6) * 1);
}

Customizing Colors

Modify the --color-primary to match your brand identity.
Adjust --color-accent for highlight elements.
Customize --color-body, --color-body-dark, --color-border-light, and --color-border-dark for body background and borders.
Tweak --color-theme-dark, --color-theme-darker, and --color-theme-light for layout sections.
Change --color-text-default to set the default text color.
Use --color-dark and --color-light for additional brand-specific needs.

Typography Settings

The Looka theme also supports advanced typography customization.

[
  {
    "name": "Figtree",
    "src": [
      {
        "style": "normal",
        "weight": "400"
      },
      {
        "style": "normal",
        "weight": "500"
      }
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": ["latin"],
    "fallback": ""
  },
  {
    "name": "Instrument Serif",
    "src": [
      {
        "style": "normal",
        "weight": "400"
      }
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-secondary",
    "provider": "google",
    "subsets": ["latin"],
    "fallback": ""
  }
]

Font Customization

The Looka theme enables flexible font customization through the src/config/fonts.json file.

Change Font Families: Update the "name" field inside each object to apply your preferred fonts. Common sources like Google Fonts are supported.
Set Font Weights and Styles: Use the src array to define specific weights (e.g., 400, 500) and styles (normal, italic) for each font.
Control Font Loading Behavior:
- Set preload: true if you want the fonts to preload for performance-critical content.
- display: swap ensures a fallback font is shown while the custom font loads, improving perceived performance.
Customize CSS Variables: Assign your font to a cssVariable like font-primary or font-secondary, which can then be used throughout your theme’s CSS (theme.css).
Fallback Fonts: Set a fallback font like "sans-serif" to ensure graceful degradation if the custom font fails to load.
Automatically Font Download: We use Astro official fonts API to automatically download and host the fonts in the .astro directory. This enhances GDPR compliance and improves performance.