Colorffy CSS
Customization
Override SCSS variables, mixins, and CSS custom properties.
Colorffy CSS is built to be customized — override variables at build time or CSS custom properties at runtime.
Override SCSS variables
Use @forward ... with to set your brand values before importing the framework:
variables.scss
@forward '@colorffy/css/scss/abstracts/variables' with (
$primary: #4f46e5,
$secondary: #ec4899,
$accent: #0ea5e9,
);
@use '@colorffy/css/scss/main';
Commonly overridden variables:
// Colors
$primary: #002678;
$secondary: #0075d6;
$accent: #fda001;
// Typography
$font-primary: 'Your Font Family';
$font-secondary: 'Your Font Family';
Use mixins and functions
@use '@colorffy/css/scss/abstracts/mixins' as mix;
@use '@colorffy/css/scss/abstracts/functions' as fn;
.hero {
@include mix.flex-center;
@include mix.glass-effect;
@include mix.text-gradient(45deg, (#ff0080, #ff8c00));
}
Customize in Nuxt 3
Feed your variables into every SCSS file via Vite:
nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/scss/main.scss'],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "~/assets/scss/variables.scss" as *;',
},
},
},
},
})
Override at runtime
:root {
--theme-primary-base: #4f46e5;
--_btn-radius: 50px;
--_card-bg-color: #ffffff;
}