Filament Preset breaks system theme following

When I set the preset in my tailwind.config.js file:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    presets: [preset],
    plugins: [forms],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    presets: [preset],
    plugins: [forms],
};

It enables the colors (danger, success, etc.) to work, however it stops following the theme of my system. If I remove the preset line, the theme following works properly. How can I keep the system theme following feature with preset enabled?

Solution:

Fixed by setting darkMode: 'media', flag in a custom preset definition that extends the filament default

Jump to solution

1 Reply

Solution

Sane•3mo ago

Fixed by setting darkMode: 'media', flag in a custom preset definition that extends the filament default

Gaming

Programming

Filament Preset breaks system theme following