Skip to main content
On this page

Style Customization

Site colors, fonts, and other styles are mostly configured in the src/styles/ folder. You also have access to the individual components and sections under src/components/.

Tailwind Theme Colors

You can easily edit the color scheme the website uses in tailwind-theme.css. The themes will have one or more of primary, secondary, accent, or base colors which are used throughout the site. This makes it extremely easy to change to your desired color scheme.

Here is an example of the @theme definition from the tailwind-theme.css file. You can either use the pre-existing Tailwind colors for your theme, or define your own.

src/styles/tailwind-theme.css
@theme {
  /* primary colors */
  --color-primary-50: var(--color-violet-50);
  --color-primary-100: var(--color-violet-100);
  --color-primary-200: var(--color-violet-200);
  --color-primary-300: var(--color-violet-300);
  --color-primary-400: var(--color-violet-400);
  --color-primary-500: var(--color-violet-500);
  --color-primary-600: var(--color-violet-600);
  --color-primary-700: var(--color-violet-700);
  --color-primary-800: var(--color-violet-800);
  --color-primary-900: var(--color-violet-900);
  --color-primary-950: var(--color-violet-950);


  /* base colors */
  --color-base-50: var(--color-zinc-50);
  --color-base-100: var(--color-zinc-100);
  --color-base-200: var(--color-zinc-200);
  --color-base-300: var(--color-zinc-300);
  --color-base-400: var(--color-zinc-400);
  --color-base-500: var(--color-zinc-500);
  --color-base-600: var(--color-zinc-600);
  --color-base-700: var(--color-zinc-700);
  --color-base-800: var(--color-zinc-800);
  --color-base-900: var(--color-zinc-900);
  --color-base-950: var(--color-zinc-950);
}

Light and Dark Theme

Some templates, like Galaxy, have both a light and dark theme built-in. These themes have a <ThemeToggle /> component for a user to toggle the theme. You could also choose to remove that component, and set the theme by adding or removing the dark class from the html element in src/layouts/BaseLayout.astro. This will change the theme from dark to light.

src/layouts/BaseLayout.astro
<!-- dark mode -->
<html lang="en" class="dark"></html>
src/layouts/BaseLayout.astro
<!-- change to light mode -->
 <html lang="en" class="dark"></html>
 <html lang="en"></html>

Fonts

Templates may contain open source or proprietary fonts. Open source fonts are loaded as an installed package where possible from Fontsource. Proprietary fonts are externally linked from a content delivery network (CDN) and not packaged with the template.

Tip

The newest theme versions use Tailwind CSS v4, where you define the font family in a CSS variable in the tailwind-theme.css or global.css file.

src/styles/tailwind-theme.css
@theme {
  /* example font families */
  --font-fallback:
    "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
    "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-sans: "Inter Variable", var(--font-fallback);
}

Open Source Fonts

Fontsource fonts are loaded in src/styles/fonts.css and use @font-face rules to load the fonts. They are also loaded locally in src/layouts/BaseHead.astro to improve loading speed and will look like:

src/layouts/BaseHead.astro
---
import interVariable from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
---


<!-- local font preload for better performance -->
<link
  rel="preload"
  href={interVariable}
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

CDN fonts

CDN sourced fonts are loaded in src/layouts/BaseHead.astro and will look like:

src/layouts/BaseHead.astro
<!-- Inter Font: https://rsms.me/inter/ -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Buttons

There is a standard button component used in every theme. There are a few “variants” of the button included for visual hierarchy.

You can edit the styles of this button in src/styles/buttons.css. This is done so that you can override classes for individual buttons.

A few examples of the button component in use:

<!-- becomes an anchor <a> tag -->
<Button variant="primary" href="/">Primary</Button>


<!-- becomes an anchor <a> tag -->
<Button variant="outline" href="/" arrow="right" class="text-lg">
  Outline with right arrow and "text-lg" tailwind override
</Button>


<!-- becomes a <button> tag -->
<Button variant="primary" type="submit">Form submission</Button>