Documentation

Styling

Astral Themes uses Tailwind CSS v4 for the majority of theme styling.

---

Colors

The theme’s color palette can be customized to match your project’s brand directly in the global.css file.

@theme {
  /* COLORS */
  --color-base-100: #1a1a1a;
  --color-base-200: #1c1c1c;
  --color-base-300: #1e1e1e;
  --color-base-600: #282828;
  --color-base-700: #848482;
  --color-base-800: #d9d5cf;
  --color-primary: #d4b376;
}

Updating the values of these CSS variables will automatically propagate the changes to all elements that reference them throughout the website.

⚠️ Warning: It is strongly advised not to modify variables related to spacing or breakpoints, as doing so may break the website’s layout and responsiveness.

---

Fonts

All themes include open source fonts, sourced either as an installed package from Fontsource or via Google Fonts.

---

Component Variants

Components found in the elements directory are designed to be reused across the website, and most expose multiple variants that control their visual styling.

For example, the Link component supports three variants — nav, button, and inline:

---
// Props
interface Props extends HTMLAttributes<"a"> {
  href: string,
  variant: "button" | "inline" | "nav",
  newWindow?: boolean
}
---

To use a link anywhere on the website, simply specify the desired variant:

<Link variant={'button'} href={link.href} class="text-center">