Folex Theme Documentation

Customizing Theme Colors & Fonts

The Folex theme uses CSS variables in src/styles/theme.css for colors and typography. Update these values to match your brand.

src/styles/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-light: #f6f5f3;
  --color-text-default: #2e2e2e;
  --color-dark: #0a0c00;
  --color-light: #f6f5f3;

}

Customizing Colors

• Adjust the --color-* variables to match your brand palette.
• Update --color-text-* variables to refine text contrast.

---

Typography Settings

Fonts are configured in src/config/fonts.json and loaded automatically.

[
  {
    "name": "Poppins",
    "variants": [
      {
        "style": "normal",
        "weight": "400"
      },
      {
        "style": "normal",
        "weight": "500"
      }
    ],
    "preload": false,
    "display": "swap",
    "cssVariable": "--font-primary",
    "provider": "google",
    "subsets": [
      "latin"
    ],
    "fallback": "sans-serif"
  },
  {
    "name": "Unbounded",
    "variants": [
      {
        "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",
    "subsets": [
      "latin"
    ],
    "fallback": "sans-serif"
  }
]

Font Customization

• Update name, weights/variants, and styles to match your brand.
• Keep cssVariable in sync with theme styles that reference it.
• For local fonts, ensure the src paths exist and are committed.