Template Customization

You should now have a basic understanding of what Astro and Alpine.js are doing. You are now ready to setup the project to start developing. We've been talking about Astro for ages but you'll quickly see how fast it is to setup your project. In your terminal window, change directory to the root of the project:

cd path/to/my/project/

Then start by building the project. Run the following command. It will also launch a development server in your browser window :

pnpm dev

When the task starts, you should be redirected to your browser showing the index.html page. That's it, your project is now running. Every change you make to the HTML or SCSS files will trigger a code compilation and a browser refresh. Really easy isn't it?

Theme colors

Every project uses 3 color variables and a set of box shadows that you can customize to control global colors across the template. There are 3 main variables :

• Primary color
• Secondary color
• Accent color

Our new example theme will use primary red (#f95c64), secondary blue (#325bff) and accent purple (#dc2dff) as the main colors (these colors are just a random example, do not use in production and pick your own colors instead). Lets create those new variables. Add this to your src/scss/abstracts/_variables.scss file :

/* ==========================================================================
Example theme variables
========================================================================== */

$primary-color: #f95c64;
$secondary-color: #325bff;
$accent-color: #dc2dff;

Every project component and layout element rely on these variables. Changing them will immediately impact all colors in the project.

Theme shadows

Some elements, like buttons, have colored box shadows. Box shadows inherit their colors from the 3 previously defined color variables. What is great is that you don't have anything to do. Those box shadows variables are generated for you, because they inherit the value of each one of the main colors.

//Base shadow
$base-shadow: rgba(0, 0, 0, 0.12);

//Primary box shadow
$primary-shadow-from: rgba($primary, 0.42);
$primary-shadow-to: rgba($primary, 0.2);
$primary-box-shadow:  0 14px 26px -12px $primary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $primary-shadow-to;

//Secondary box shadow
$secondary-shadow-from: rgba($secondary, 0.42);
$secondary-shadow-to: rgba($secondary, 0.2);
$secondary-box-shadow:  0 14px 26px -12px $secondary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $secondary-shadow-to;

//Accent box shadow
$accent-shadow-from: rgba($accent, 0.42);
$accent-shadow-to: rgba($accent, 0.2);
$accent-box-shadow:  0 14px 26px -12px $accent-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $accent-shadow-to;