Documentation View source on GitHub

Blade Colors

Getting Started

Blade Colors offers Tailwind CSS compatible, CSS variable based, color palettes. Color definitions can be configured dynamically during runtime using the provided color manager.

<?php

use DistortedFusion\BladeColors\Facades\BladeColor;
use DistortedFusion\BladeColors\Palettes\Tailwind;

BladeColor::register(['primary' => Tailwind::INDIGO]);
?>

<!-- Applied directly using a CSS variable -->
<div class="bg-[rgb(var(--primary-500))]"></div>

<!-- Or with the optional additional presets -->
<div class="bg-primary-500"></div>

Installation

Require the Blade Colors package using Composer:

composer require distortedfusion/blade-colors

After installation the CSS variables need to be added to your main application layout. This is done by adding the @bladeColor directive to your layouts <head> section:

<html>
<head>
    <title>DDFSN</title>

    @bladeColor
</head>
    <body>
    </body>
</html>

The @bladeColor directive will inject a dynamically generated <style> element containing all the configured colors:

<style>:root { --primary-50: 238, 242, 255; ... }</style>

Version Compatibility

Laravel PHP Package
9.x ^8.0 >= 1.0
10.x ^8.1 >= 1.0
11.x ^8.2 >= 1.0

Only the currently supported PHP versions are listed. Please refer to previous releases of this package for support for older PHP or Laravel versions.

Next Usage