Customizing Theme Colors & Fonts

Folex Theme Documentation

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

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

  /* Colors */
  --color-primary: #0d0f01;
  --color-secondary: #bcd4ff;
  --color-accent: #e3ff04;
  --color-accent-blue: #1601ac;
  --color-body: #fff;
  --color-body-dark: #070800;
  --color-border-light: #e5e5e5;
  --color-border-dark: #292525;
  --color-theme-dark: #0e1118;
  --color-theme-darker: #131312;
  --color-theme-light: #f6f5f3;
  --color-text-default: #2e2e2e;
  --color-dark: #0a0c00;
  --color-light: #f6f5f3;

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

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

  --text-display-1: calc(var(--text-base) * pow(var(--text-base-scale), 8.8)); /* 115px  */
  --text-display-2: calc(var(--text-base) * pow(var(--text-base-scale), 8)); /* 95px  */
  --text-display-3: calc(var(--text-base) * pow(var(--text-base-scale), 7.25)); /* 80px  */
  --text-display-4: calc(var(--text-base) * pow(var(--text-base-scale), 6.5)); /* 65px  */
  --text-display-5: calc(var(--text-base) * pow(var(--text-base-scale), 5.5)); /* 50px  */
  --text-display-6: calc(var(--text-base) * pow(var(--text-base-scale), 4.5)); /* 40px  */

  --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.75);
  --text-h3-sm: calc(var(--text-h3) * 0.85);
  --text-h4-sm: calc(var(--text-h4) * 0.9);
  --text-h5-sm: calc(var(--text-h5) * 0.9);
  --text-h6-sm: calc(var(--text-h6) * 0.9);
}

Customizing Colors

Modify the --color-primary and --color-secondary to match your brand identity.
Adjust --color-accent and --color-accent-blue 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 Folex theme also supports advanced typography customization, including the option to self-host fonts for enhanced performance and GDPR compliance.

{
  "fontFamily": [
    {
      "name": "Poppins",
      "src": [
        {
          "weight": "400"
        },
        {
          "weight": "500"
        }
      ],
      "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": "Unbounded",
      "src": [
        {
          "style": "normal",
          "weight": "400"
        },
        {
          "style": "normal",
          "weight": "500"
        },
        {
          "style": "normal",
          "weight": "600"
        },
        {
          "style": "normal",
          "weight": "700"
        }
      ],
      "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 Customization

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

Change Font Families: Update the "name" field inside each object in the fontFamily array 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.
Enable Local Hosting (Recommended): Set locallyHosted: true to automatically download and host the fonts in your /public directory. This enhances GDPR compliance and improves performance by avoiding external CDN dependencies.