Customization

# Colors

The main Zinq color palette is 3 colors called primary, primary dark and primary darker. These colors were carefully picked to match gray-scale Tailwind's colors like zinc, neutral or stone colors.

For your convinence, Zinq does not compile colors in the CSS file, but instead uses CSS variables. This way you can easily change the colors in your project.

# Primary

The primary color is used for the primary button, primary link, and accent elements like backgrounds or shadows. It should be a color that stands out and contrasts with the background color.

--primary: #ffb92f;
--primary-dark: #ff9b0c;
--primary-darker: #ff9000;

# Background

The background color is used for the main background of the page. It should be a color that is easy on the eyes and contrasts with the primary color. Zinq uses both light and dark backgrounds.

--main-bg-color: #ffffff; /* white */
--main-bg-color-dark: #868e96; // /* bg-zinc-900 */

# Text

The text color is used for the main text color of the page. It should be a color that is easy to read and contrasts with the background color. Zinq uses both light and dark text colors.

--main-text-color: #212529;
--main-text-color-dark: #868e96; /* text-zinc-900 */

# Configuration

In order to customize Zinq colors, you can define these values in your zinq.php configuration file. You can publish zinq.php configuration file using Publish command.

'colors' => [
    '--primary' => '#ffb92f',
    '--primary-dark' => '#ff9b0c',
    '--primary-darker' => '#ff9000',
    '--gray-100' => '#f8f9fa',
    '--gray-200' => '#e9ecef',
    '--gray-300' => '#dee2e6',
    '--gray-400' => '#ced4da',
    '--gray-500' => '#adb5bd',
    '--gray-600' => '#868e96',
    '--gray-700' => '#495057',
    '--gray-800' => '#343a40',
    '--gray-900' => '#212529',
    '--main-bg-color' => '#ffffff',
    '--main-bg-color-dark' => '#141416',
    '--main-text-color' => '#212529',
    '--main-text-color-dark' => '#868e96',
],