Colors

Nexgen’s palette is driven entirely by CSS variables. Recolor the template by editing a handful of values in assets/css/default.css — no find-and-replace across dozens of files.

The color variables

Colors are declared on :root. Each one has a clear, descriptive name so you always know what it affects:

assets/css/default.css

:root {
/* Brand */
--primary-color: #4a6cf7;
--secondary-color: #1d2144;

/* Text */
--heading-color: #1d2144;
--text-color: #637381;

/* Neutrals */
--white-color: #ffffff;
--dark-color: #090e34;
}

The palette is structured like this (example values shown):

• Primary#4a6cf7
• Secondary#1d2144
• Text#637381
• Dark#090e34

Change once, apply everywhere

Because these variables cascade to every element, updating --primary-color instantly restyles buttons, links, highlights and accents across the whole template. Change the value, save, and refresh.

Your exact values live in default.css

The hex codes above illustrate the structure — open your copy of default.css to see and edit the values your template actually ships with.

Next: Background ColorsGive individual sections their own background color.