Change Color
Color Variables
To change the color of the website, you can change the color variables in the src/scss/_utilities.scss file.
For example, to change the primary color, you can change the --primary-color variable. For flexibility, we use rgb color format. You can use any color format. But you have to convert it into rgb format. You can use
hex to rgb converter to convert it into rgb format.
:root {
--primary-color: 44 123 229;
--secondary-color: 142 51 255;
--info-color: 0 184 217;
--success-color: 34 197 94;
--warning-color: 257 171 0;
--error-color: 255 86 48;
}
Tailwind Color
Besides this colors variables, you can also change the tailwind color palette in the tailwind.config.js file.
colors: {
transparent: 'transparent',
primary: {
5: 'rgb(var(--primary-color)/.05)',
50: 'rgb(var(--primary-color)/.10)',
75: 'rgb(var(--primary-color)/.20)',
100: 'rgb(var(--primary-color)/.30)',
200: 'rgb(var(--primary-color)/.60)',
300: 'rgb(var(--primary-color)/1)',
400: 'rgb(var(--primary-color)/1.2)',
500: 'rgb(var(--primary-color)/1.4)'
},
secondary: {
50: '#f4ebff',
75: '#d1abff',
100: '#bd89ff',
200: '#a156ff',
300: 'rgb(var(--secondary-color)/1)',
400: '#6324b3',
500: '#571f9c'
},
info: {
50: '#e6f8fb',
75: '#96e2ef',
100: '#6bd6e9',
200: '#2bc4df',
300: 'rgb(var(--info-color)/1)',
400: '#008198',
500: '#007084'
},
success: {
50: '#e9f9ef',
75: '#a4e7bd',
100: '#7fdda2',
200: '#48cf79',
300: 'rgb(var(--success-color)/1)',
400: '#188a42',
500: '#157839'
},
warning: {
50: '#fff7e6',
75: '#ffdd96',
100: '#ffce6b',
200: '#ffb92b',
300: 'rgb(var(--warning-color)/1)',
400: '#b37800',
500: '#9c6800'
},
error: {
50: '#ffeeea',
75: '#ffbaaa',
100: '#ff9d87',
200: '#ff7353',
300: 'rgb(var(--error-color)/1)',
400: '#b33c22',
500: '#9c341d'
},
neutral: {
0: '#FFFFFF',
10: '#FAFAFB',
20: '#f5f6f6',
30: '#ebeced',
40: '#dfe0e2',
50: '#c2c4c8',
60: '#b3b6bb',
70: '#a7aab0',
80: '#999ca3',
90: '#8a8e95',
100: '#7b8088',
200: '#6d717b',
300: '#5e636e',
400: '#525763',
500: '#434956',
600: '#373d4b',
700: '#262d3b',
800: '#171f2e',
900: '#0b1323',
903: '#23262B',
904: '#1D1E24'
}
},