Customize

As for using SCSS to develop this template, it is very easy to customize colors and fonts. See instructions below:

---

Colors

Customize colors in the src\assets\scss\utils\_colors.scss file.

     
        $colors: (
            theme: (
                primary: #0d6efd,
                secondary: #6c757d,
                success: #198754,
                info: #0dcaf0,
                warning: #ffc107,
                danger: #dc3545,
                light: #f8f9fa,
                dark: #212529,
                gray: #6c757d,
            ),
            body: (
                text: #666666,
                text-secondary: #999999,
            ),
            system: (
                white: #ffffff,
                stroke: #e2e2e2,
                black: #292929,
                black-2: #2c2e3c,
                indigo: #794aff,
                indigo-light: #beaaee,
                green: #1aaa59,
                green-2: #01473c,
                green-3: #d5d52b,
                green-4: #b1e346,
                green-5: #001d21,
                navy-blue: #152833,
                navy-blue-2: #0f313a,
                navy-blue-3: #24222c,
                navy-blue-4: #040826,
                orange: #ff652e,
                light-orange: #f7775e,
                radish: #005153,
                yellow: #ecab23,
                pink: #d42c6c,
                red: #d60a2b,
                blue: #0d6efd,
                gold: #b98e44,
                cream: #55bbaf,
            ),
            bg: (
                1: #bfdbff,
                light: #f3f3f3,
                light-2: #eff6ff,
            ),
            black-bg: (
                white: #b4b4b4,
                stroke: #5a5a5a,
                body-text: #a8a8a8,
            ),
            linear: (
                1: linear-gradient(180deg, #794aff 0%, #c9b6ff 100%),
                2: linear-gradient(180deg, #ebe3ff 0%, #fff 100%),
                3: linear-gradient(260deg, #23efef 2.2%, #37b8be 35.5%, #2da0ff 69.1%, #b172fe 97.6%),
                4: linear-gradient(88deg, #e9a457 0.99%, #637ce6 46.72%, #b07be0 99.34%),
            ),
            gradient: (
                1: linear-gradient(90deg, #0d6efd 0%, #d39fe5 100%),
                2: linear-gradient(90deg, #2c2e3c 0%, #ffffff 100%),
            ),
        );
    
 

Typography

Customize typography in the src\assets\scss\utils\_typography.scss file.

     
        $theme-fonts: (
            body: (
                font-family: "'Rubik',sans-serif",
            ),
            heading: (
                font-family: "'Libre Franklin',sans-serif",
            ),
            btn: (
                font-family: "'Libre Franklin',sans-serif",
            ),
        );
        // Font Family
        // Font Size
        $font-size: (
            body: (
                font-size: 16px,
            ),
            fs: (
                1: 40px,
                2: 32px,
                3: 28px,
                4: 24px,
                5: 20px,
                6: 16px,
                7: 14px,
                8: 12px,
            ),
            ds: (
                1: 80px,
                2: 72px,
                3: 64px,
                4: 56px,
                5: 48px,
                6: 40px,
            ),
            ds-xs: (
                1: 64px,
                2: 56px,
                3: 48px,
                4: 36px,
                5: 28px,
                6: 24px,
            ),
        );
        // Line Height
        $theme-lh: (
            body: (
                line-height: 1.6,
            ),
            heading: (
                line-height: 1.2,
            ),
        );
        // Font Weight
        $font-weight: (
            fw: (
                black: 900,
                extra-bold: 800,
                bold: 700,
                semi-bold: 600,
                medium: 500,
                regular: 400,
                light: 300,
            ),
        );