Styles and Theming

The styling in Zenith is composed of three main elements:

Tailwind CSS for a robust base of utility-first styles.
CSS Variables for custom theme creation.
Astro styles for applying global styles and some complex component scoped styles.

In this guide, we’ll cover how to combine those tools to customize the styles in your project.

Colors

Page colors setup

Colors used on a particular page are defined using components imported from three directories.

src/styles/colors/dusk - contains CSS variables used to define 11 shades of the gray color. The folder includes 5 presets, each based on the grayscale palettes in Tailwind.
src/styles/colors/accent - contains CSS variables used to define 11 shades of the accent color. The folder includes 17 presets, each based on the colorful palettes in Tailwind.
src/styles/colors/elements - contains CSS variables actually used to style the components, both in light and dark mode. We provide you only with a default.astro configuration but you can easily create your own files by copying the existing one and changing the values.

For every page you need to import one component from each of those directories and place them within the <Fragment slot="head"> element.

Custom dusk/accent presets

As dusk and accent CSS variables have to use space-separated HSL syntax we generate them from HEX values that are easier to reason about. To add your own palette, open the cli/commands/colors.ts file and add your HEX values to the dusks or accents object.

const dusks: Record<string, Shades> = {
  ...pick(colors, /* our presets */),
  'my-dusk': {
    50: '#f8f8f8',
    100: '#f1f1f1',
    200: '#e1e1e1',
    /* ... */,
    800: '#4a4a4a',
    900: '#383838',
    950: '#2e2e2e',
  },
};

const accents: Record<string, Shades> = {
  ...pick(colors, /* our presets */),
  'my-accent': {
    50: '#e4f7f8',
    100: '#c9eff1',
    200: '#8edde3',
    /* ... */,
    800: '#007a8c',
    900: '#005f6e',
    950: '#004f5a',
  },
};

After saving the file, open your terminal and invoke the npm run update:colors command to generate CSS variables for your new palette.

Theming

Zenith comes with built-in support for light and dark themes in all web resume pages. PDF and Open Graph pages always use the light theme.

Values of CSS variables used for styling components in both themes are defined in files within the src/styles/colors/elements directory. To determine which theme should be used on a particular page, you can change value of the theme property in the web global context.

Theming in custom components

If you plan to create your own components there is a few ways you can incorporate theming support into them:

Use CSS variables defined in the src/styles/colors/elements directory files when styling components. In Tailwind, all those variables are prefixed with color- to make them more distinctive. For example, to use the --icon-light variable as a text color (text-* class in Tailwind) you should use text-color-icon-light class.
Use the dark: variant in Tailwind CSS to apply different styles based on the theme.
Use the light-dark CSS function to apply different colors based on the theme.

Typography

Zenith uses the default Tailwind classes for styling text. The only thing we customize is font family.

Page font setup

Components that modifies font family are exported from the src/styles/fonts directory. By default we provide setup for the Inter font. Looking into its file you can see a @font-face importing the font and two CSS variables defining it as the font family for headers and the body.

To use the font on the page you only need to import it and place it within the <Fragment slot="head"> element.

Custom fonts

In order to create your own font component:

Create a new file in the src/styles/fonts directory.
Follow the Astro docs for using local fonts or using remote fonts. Put all imports and @font-face declarations in the file you created.
Instead of setting the font-family property in a way Astro docs suggest, pass it to --font-header or --font-body CSS variable in the file.