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: #6d4df2,
                primary-light: #a38cff,
                secondary: #7f7d88,
                primary-soft: #f5eeff,
                primary-dark: #6342ec,
            ),
            theme-dark: (
                primary: #6d4df2,
                primary-light: #866dee,
                secondary: #7f7d88,
                primary-soft: #271c52,
                primary-dark: #baa9ff,
            ),
            neutral: (
                0: #ffffff,
                100: #f3f4f6,
                200: #e5e7eb,
                300: #d1d5db,
                400: #9ca3af,
                500: #6b7280,
                600: #4b5563,
                700: #374151,
                800: #1f2937,
                900: #111827,
            ),
            neutral-dark: (
                0:#010101,
                100: #111827,
                200: #1f2937,
                300: #374151,
                400: #4b5563,
                500: #6b7280,
                600: #9ca3af,
                700: #d1d5db,
                800: #e5e7eb,
                900: #f3f4f6,
            ),
            system: (
                success: #64e1b0,
                info: #5577a7,
                warning: #f39e0d,
                danger: #ef4444,
                white: #ffffff,
                dark: #000000,
                muted: #9ca3af,
            ),
            system-dark: (
                success: #10b983,
                info: #0f172e,
                warning: #fcd34e,
                danger: #fca5a7,
                white: #151524,
                dark: #efeff8,
                muted: #9ca3af,
            ),
            bg: (
                1: #f7f4ff,
                2: #e1d6ff,
                3: #f2fbf9,
                4: #eef2ff,
                5: #fff7ee,
                6: #374151,
                7: #1f2937,
            ),
            bg-dark: (
                1: #1c1b1f,
                2: #362e4f,
                3: #141817,
                4: #131518,
                5: #100f0e,
                6: #1a2028,
                7: #111822,
            ),
            linear: (
                1: linear-gradient(90deg, #d7cdff 0%, #f8e2ff 100%),
                2: linear-gradient(90deg, #6d4df2 0%, #8c71ff 100%),
                3: linear-gradient(180deg, #eeebf0 0%, #ffffff 100%),
                4: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%),
            ),
            linear-dark: (
                1: linear-gradient(90deg, #a89adb 0%, #e6ceee 100%),
                2: linear-gradient(90deg, #696381 0%, #837389 100%),
                3: linear-gradient(180deg, #151524 0%, #212135 100%),
                4: linear-gradient(180deg, #151524 0%, #212135 100%),
            ),
            shadow: (
                1: 0 13px 35px -12px rgba(35, 35, 35, 0.1),
                2: 0px 0px 25px 0px rgba(0, 0, 0, 0.08),
            ),
        );
    
 

Typography

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

     
        // Font Family
        $theme-fonts: (
            body: (
                font-family: 'Satoshi-Variable',
            ),
            heading: (
                font-family: 'Satoshi-Variable',
            ),
            display: (
                font-family: 'Satoshi-Variable',
            ),
        );
        // 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,
                9: 10px,
            ),
            ds: (
                1: 80px,
                2: 72px,
                3: 64px,
                4: 56px,
                5: 48px,
                6: 40px,
            ),
            ds-xs: ( //for mobile screens
                1: 64px,
                2: 56px,
                3: 48px,
                4: 36px,
                5: 28px,
                6: 24px,
            ),
        );
        // Line Height
        $theme-lh: (
            body: (
                line-height: 1.5,
            ),
            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,
            ),
        );