Default Colors

Domiex provide you the best of both worlds. We have provided multiple colors set so it will be easy to use for customers as well as designers to change quickly. No need to add lots of classes for single elements. We have managed the colors in the Admin/tailwind.config.js file. You can easily copy any predefined object (e.g., purple, red, green, etc.) and customize it with your desired color to apply it seamlessly across all pages.

import preset from 'pixeleyezui/tailwind.config';
const variablesConfig = require('./variables-confing');
const colorsConfig = require('./config-colors');
const colors = require('tailwindcss/colors');
const _ = require('lodash');
const pixeleyezui = require('pixeleyezui');

const defaultConfig = {
    presets: [
        preset,
    ],
    // Customizations specific to this project would go here
    content: [
        "./src/**/*.{html,js}",
        "./src/assets/libs/*"
    ],
    theme: {
        extend: {
            colors: {
                purple:{ 
                    '50': colors.purple[50],
                    '100': colors.purple[100],
                    '200': colors.purple[200],
                    '300': colors.purple[300],
                    '400': colors.purple[400],
                    '500': colors.purple[500],
                    '600': colors.purple[600],
                    '700': colors.purple[700],
                    '800': colors.purple[800],
                    '900': colors.purple[900],
                    '950': colors.purple[950],
                },
                red:{ 
                    '50': colors.red[50],
                    '100': colors.red[100],
                    '200': colors.red[200],
                    '300': colors.red[300],
                    '400': colors.red[400],
                    '500': colors.red[500],
                    '600': colors.red[600],
                    '700': colors.red[700],
                    '800': colors.red[800],
                    '900': colors.red[900],
                    '950': colors.red[950],
                },
                green:{ 
                    '50': colors.green[50],
                    '100': colors.green[100],
                    '200': colors.green[200],
                    '300': colors.green[300],
                    '400': colors.green[400],
                    '500': colors.green[500],
                    '600': colors.green[600],
                    '700': colors.green[700],
                    '800': colors.green[800],
                    '900': colors.green[900],
                    '950': colors.green[950],
                },
                yellow:{ 
                    '50': colors.yellow[50],
                    '100': colors.yellow[100],
                    '200': colors.yellow[200],
                    '300': colors.yellow[300],
                    '400': colors.yellow[400],
                    '500': colors.yellow[500],
                    '600': colors.yellow[600],
                    '700': colors.yellow[700],
                    '800': colors.yellow[800],
                    '900': colors.yellow[900],
                    '950': colors.yellow[950],
                },
                sky:{ 
                    '50': colors.sky[50],
                    '100': colors.sky[100],
                    '200': colors.sky[200],
                    '300': colors.sky[300],
                    '400': colors.sky[400],
                    '500': colors.sky[500],
                    '600': colors.sky[600],
                    '700': colors.sky[700],
                    '800': colors.sky[800],
                    '900': colors.sky[900],
                    '950': colors.sky[950],
                },
                pink:{ 
                    '50': colors.pink[50],
                    '100': colors.pink[100],
                    '200': colors.pink[200],
                    '300': colors.pink[300],
                    '400': colors.pink[400],
                    '500': colors.pink[500],
                    '600': colors.pink[600],
                    '700': colors.pink[700],
                    '800': colors.pink[800],
                    '900': colors.pink[900],
                    '950': colors.pink[950],
                },
                indigo:{ 
                    '50': colors.indigo[50],
                    '100': colors.indigo[100],
                    '200': colors.indigo[200],
                    '300': colors.indigo[300],
                    '400': colors.indigo[400],
                    '500': colors.indigo[500],
                    '600': colors.indigo[600],
                    '700': colors.indigo[700],
                    '800': colors.indigo[800],
                    '900': colors.indigo[900],
                    '950': colors.indigo[950],
                },
                gray:{ 
                    '50': colors.gray[50],
                    '100': colors.gray[100],
                    '200': colors.gray[200],
                    '300': colors.gray[300],
                    '400': colors.gray[400],
                    '500': colors.gray[500],
                    '600': colors.gray[600],
                    '700': colors.gray[700],
                    '800': colors.gray[800],
                    '900': colors.gray[900],
                    '950': colors.gray[950],
                },
                orange:{ 
                    '50': colors.orange[50],
                    '100': colors.orange[100],
                    '200': colors.orange[200],
                    '300': colors.orange[300],
                    '400': colors.orange[400],
                    '500': colors.orange[500],
                    '600': colors.orange[600],
                    '700': colors.orange[700],
                    '800': colors.orange[800],
                    '900': colors.orange[900],
                    '950': colors.orange[950],
                }
            },
        },
    },
}

const configMerged = _.merge({}, preset, defaultConfig);

module.exports = configMerged;