Theming

Bulkit is built in a CSS modular approach. We've made it easy for you to customize theme colors. In this section, we are going to setup a project from scratch to help you get started.

Creating a Theme

Let's start from scratch to make you understand how you can do theming with Bulkit.

Add a new Theme

WARNING

If your pnpm gulp watcher is still running in your terminal, we recommend you to stop it (Ctrl + C) before creating a new theme.

Create a new file in /src/assets/scss/abstracts/. For the sake of the example, we will name this file _themes-example.scss . Notice the underscore at the start of the file name. Don't forget it or your project will break.

Theme colors

Each Bulkit theme uses the same color variables that you can customize to control 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 its main colors (these colors are just an example, do not use in production and pick your own colors instead). Lets create those new variables. Add this to your src/assets/_themes-example.scss file :

/*! _themes-example.scss | My project | My name */

/* ==========================================================================
Example theme variables and styles
========================================================================== */

//Theme color variables
$primary: #f95c64;
$secondary: #325bff;
$accent: #dc2dff;

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

Theme gradient

Every theme comes with a linear gradient based on primary and secondary colors (you can change that if you want, but defining the gradient is mandatory). Add this to your scss/abstracts/_themes-example.scss file :

//Hero gradient
$webkit-hero-gradient: -webkit-linear-gradient(to right, $accent, $secondary);
$hero-gradient: linear-gradient(to right, $accent, $secondary);

Theme shadows

Bulkit plays a lot with colored box shadows. Box shadows inherit their colors from the 3 main variables:

Variable	Hex	Rgb
$primary	#f95c64	rgb(249, 92, 100)
$secondary	#325bff	rgb(50, 91, 255)
$accent	#dc2dff	rgb(220, 45, 255)

Now that we have our converted values, we can setup box shadows using the rgba format, which adds the alpha channel for transparency. If you are using SCSS you can simply put the variable name instead. Shadow variables now live in their own file, in assets/scss/abstracts/_shadows.scss.

//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 !important;

//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 !important;

//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 !important;

Theme page loader

Every theme customizes the default background color for the page loader but it's not mandatory. You are free to do so only if you want to.

//Pageloader background color
.pageloader {
    background: $primary !important;
}

Activating a Theme

You're almost ready to start using your new theme but first, we need to wire it to the core SCSS file. You can create a new core file or edit the existing one. in this example, we will create a new theme based off the _themes-main.scss file that lives in the assets/scss/abstracts/ folder.

Start by creating a file named _themes-example.scss in the same folder and copy the contents of _themes-main.scss in it.

Open core.scss with your favorite text editor and edit the theme import original statement

@import 'themes-main';

Change it to

@import 'themes-example';

Now start the Sass watcher with gulp:

pnpm gulp dev

Congratulations, your demo is setup with a brand new theme you just created. You are now ready to start customizing the template. Now that you have a global understanding of how Bulkit works, you can use the CSS and JS reference sections of this documentation to get a grasp on Bulkit classes, classes modifiers and javascript options.