F
Filament•9mo ago
Sane

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
Sane•9mo ago
Fixed by setting darkMode: 'media', flag in a custom preset definition that extends the filament default

Did you find this page helpful?