Filament•15mo ago

Tenant depending colours from database

I want to set the primary colour based on the current tenant. The colours are set in the database. How can I include them? I guess not here:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: ...

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: ...

since this is built once using npm. But I wouldn't know how then.

Solution:

Yea I found that. But wasn't sure how that worked with the intensity levels and if it was the way to go. But I got it working like this now: /app/Providers/FilamentServiceProvider.php ```php...

Jump to solution

5 Replies

Patrick Boivin•15mo ago

Maybe this can give you an idea: https://discord.com/channels/883083792112300104/1139266135301300275

JohnOP•15mo ago

I'm on v2, I don't have that Color class.

Patrick Boivin•15mo ago

Oh sorry, I missed the v2 tag. I could be wrong but I think the concept of primary color in v2 is tied to the tailwind config, there can only be one primary color. One option would be to generate multiple themes (one for each primary color) and then register the theme according to the tenant's configuration. Maybe easier to register some custom CSS in a render hook (also according to the tenant's configuration) Another direction to explore: https://tailwindcss.com/docs/customizing-colors#using-css-variables

Solution

John•15mo ago

Yea I found that. But wasn't sure how that worked with the intensity levels and if it was the way to go. But I got it working like this now: /app/Providers/FilamentServiceProvider.php

class FilamentServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerViteTheme([
                'resources/css/filament.css',
                'resources/css/' . tenant()->code . '.css',
            ]);
        });
    }
}

class FilamentServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Filament::serving(function () {
            Filament::registerViteTheme([
                'resources/css/filament.css',
                'resources/css/' . tenant()->code . '.css',
            ]);
        });
    }
}

/resources/css/tenant_abc.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --primary-50: 240 253 250;
        --primary-100: 204 251 241;
        --primary-200: 153 246 228;
        --primary-300: 94 234 212;
        --primary-400: 45 212 191;
        --primary-500: 20 184 166;
        --primary-600: 13 148 136;
        --primary-700: 15 118 110;
        --primary-800: 17 94 89;
        --primary-900: 19 78 74;
        --primary-950: 4 47 46;
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --primary-50: 240 253 250;
        --primary-100: 204 251 241;
        --primary-200: 153 246 228;
        --primary-300: 94 234 212;
        --primary-400: 45 212 191;
        --primary-500: 20 184 166;
        --primary-600: 13 148 136;
        --primary-700: 15 118 110;
        --primary-800: 17 94 89;
        --primary-900: 19 78 74;
        --primary-950: 4 47 46;
    }
}

JohnOP•15mo ago

/tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    // [...]
    theme: {
        extend: {
            colors: {
                danger: colors.red,
                primary: {
                    50: 'rgb(var(--primary-50) / <alpha-value>)',
                    100: 'rgb(var(--primary-100) / <alpha-value>)',
                    200: 'rgb(var(--primary-200) / <alpha-value>)',
                    300: 'rgb(var(--primary-300) / <alpha-value>)',
                    400: 'rgb(var(--primary-400) / <alpha-value>)',
                    500: 'rgb(var(--primary-500) / <alpha-value>)',
                    600: 'rgb(var(--primary-600) / <alpha-value>)',
                    700: 'rgb(var(--primary-700) / <alpha-value>)',
                    800: 'rgb(var(--primary-800) / <alpha-value>)',
                    900: 'rgb(var(--primary-900) / <alpha-value>)',
                    950: 'rgb(var(--primary-950) / <alpha-value>)',
                },
                success: colors.green,
                warning: colors.yellow,
            },
        },
    }
    // [...]
}

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    // [...]
    theme: {
        extend: {
            colors: {
                danger: colors.red,
                primary: {
                    50: 'rgb(var(--primary-50) / <alpha-value>)',
                    100: 'rgb(var(--primary-100) / <alpha-value>)',
                    200: 'rgb(var(--primary-200) / <alpha-value>)',
                    300: 'rgb(var(--primary-300) / <alpha-value>)',
                    400: 'rgb(var(--primary-400) / <alpha-value>)',
                    500: 'rgb(var(--primary-500) / <alpha-value>)',
                    600: 'rgb(var(--primary-600) / <alpha-value>)',
                    700: 'rgb(var(--primary-700) / <alpha-value>)',
                    800: 'rgb(var(--primary-800) / <alpha-value>)',
                    900: 'rgb(var(--primary-900) / <alpha-value>)',
                    950: 'rgb(var(--primary-950) / <alpha-value>)',
                },
                success: colors.green,
                warning: colors.yellow,
            },
        },
    }
    // [...]
}

Thanks for thinking along!

Gaming

Programming

Tenant depending colours from database