Site colors, fonts, and other styles are mostly configured in
src/styles/. You can edit the colors and fonts used in the site here.
You also have access to the individual components / sections under
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
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.
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.
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:
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:
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:
A few examples of the button component in use: