Customizing Theme Colors & Fonts

The Upstart 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": "#4F1AD6",
        "secondary": "#B2A6F1",
        "accent": "#1A122E",
        "body": "#0e0c0c",
        "border": "#ffffff0d",
        "theme_dark": "#1A191C"
      },
      "text_color": {
        "default": "#C8C1C1",
        "dark": "#000E30",
        "light": "#fff6f6"
      }
    }
  },
}

Customizing Colors

Modify the primary and secondary colors to match your brand.
Adjust text colors.

Typography Settings

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

{
  "fonts": {
    "font_family": [
      {
        "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_size": {
      "base": "16",
      "type_scale": "1.35",
      "line_height": "1.8"
    }
  }
}

Font Customization

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