Style Customization

Site colors, fonts, and other styles are mostly configured in tailwind.config.cjs and src/styles/. You can edit the colors and fonts used in the site here.

You also have access to the individual components / sections under src/components/.

Colors

Tailwind Theme Colors

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

Here is an example of the theme.extend.colors object from the tailwind.config.cjs file. You can either use the pre-existing Tailwind colors for your theme, or define your own.

const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    extend: {
      colors: {
        // primary color used. Used for buttons, links, and other components
        primary: {
          50: "#f4f3ff",
          100: "#ebe8ff",
          200: "#d9d5ff",
          300: "#beb3ff",
          400: "#9d88fd",
          500: "#7147fa",
          600: "#6e35f2",
          700: "#5f23de",
          800: "#4f1dba",
          900: "#421a98",
          950: "#270e67",
        },
        // base color used. Backgrounds and text are based on this color
        base: colors.gray,
        info: "#7dd3fc",
        "info-content": "#082f49",
        success: "#6ee7b7",
        "success-content": "#022c22",
        warning: "#fcd34d",
        "warning-content": "#111827",
        error: "#fca5a5",
        "error-content": "#450a0a",
      },
    },
  },
};

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.

<!-- dark mode -->
<html lang="en" class="dark"></html>

<!-- change to light mode -->
 <html lang="en" class="dark"></html>
 <html lang="en"></html>

Fonts

Certain templates may or may not contain proprietary fonts, which are externally linked from a content delivery network (CDN) and not packaged with the template.

They are loaded inside src/layouts/BaseHead.astro and will look like:

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

You can pick which font is used from the tailwind config file under theme.fontFamily. For example, if you wanted to use the Inter font, you would add it to the theme.fontFamily.sans array like so:

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter", // this is loaded from CDN in`BaseHead.astro`
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica",
        "Arial",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
      ],
      mono: [
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace",
      ],
    },
  },
};

Buttons

There is a standard button component used in every theme. There are a few “variants” of the button included for visual hierarchy. Note that not all variants are different in every theme. For example, there will not be a different “secondary” variant if there is no secondary color defined.

You can edit the styles of this button in src/styles/buttons.scss. This is done so that you can override classes for individual buttons. If you have more complex editing needs, feel free to break into the Button component itself and edit as desired.

The button component props are:

/**
 *  * Notes:
 *  if this is to be a link (<a>), pass an "href" prop
 *  if this is to be a button (<button>), pass a "type" prop
 *  you can pass the arrow prop with "left" or "right" to add an arrow to any button variant
 */
interface Props {
  type?: "button" | "submit" | "reset" | null | undefined;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  href?: string; // the href to go to, ex "/posts/"
  arrow?: "left" | "right" | "none";
  onclick?: any; // any onclick events
  class?: string; // any additional classes
  rest?: any; // catch-all for any additional parameters, such as "aria-label"
}

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>