Customizing Theme Colors & Fonts

Upstart Theme Documentation

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

@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: #4f1ad6;
  --color-secondary: #b2a6f1;
  --color-accent: #1a122e;
  --color-body: #0e0c0c;
  --color-border-light: #242222;
  --color-theme-dark: #1a191c;

  --color-text-default: #c8c1c1;
  --color-dark: #000e30;
  --color-light: #fff6f6;

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

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

  --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-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 colors section to match your brand.
Adjust heading texts size by updating the —text-base-scale value.

Typography Settings

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

{
  "fontFamily": [
    {
      "name": "Satoshi",
      "src": [
        {
          "style": "normal",
          "weight": "400",
          "path": "public/fonts/Satoshi-Regular.woff2"
        },
        {
          "style": "normal",
          "weight": "500",
          "path": "public/fonts/Satoshi-Medium.woff2"
        }
      ],
      "preload": false,
      "display": "swap",
      "cssVariable": "font-primary",
      "fallback": "sans-serif",
      "locallyHosted": false,
      "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
    },
    {
      "name": "Syne",
      "src": [
        {
          "style": "normal",
          "weight": "500"
        }
      ],
      "preload": true,
      "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"
    },
    {
      "name": "Instrument Serif",
      "src": [
        {
          "style": "normal",
          "weight": "400"
        }
      ],
      "preload": true,
      "display": "swap",
      "cssVariable": "font-tertiary",
      "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

Replace primary and secondary fonts to suit your brand style.
Enable locallyHosted for GDPR compliance (automatically downloads fonts to the /public folder).
In the provided fonts.json code, we have included examples of how to use both local fonts and Google Fonts, as well as how to enable locallyHosted for GDPR compliance.