F
Filament•4w ago
Jamie Cee

Why am I getting dark mode classes when I've disabled it

            ->darkMode(false, true)
            ->darkMode(false, true)
In my panel provider, I've set it to false, but im getting the dark mode css classes and it's messing with my view. What am I missing?
No description
Solution:
Okay, so I've had to add this to my tailwind config ```js darkMode: 'false', theme: {...
Jump to solution
3 Replies
toeknee
toeknee•4w ago
You probably have a custom display? NPM Run build
Jamie Cee
Jamie CeeOP•4w ago
I've setup a custom theme, but even running npm run build. Still having the same issue. And even the custom theme css doesn't modify many filament components 
@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

:root {
    --instructor-portal-blue: #252D4A;
    --instructor-portal-widget-background: #F9F9F9;
    --instructor-portal-orange: #FF4438;

    --event-bg-available: #EBF6EE;
    --event-border-available: #A6D9B4;
    --event-border-left-available: #34A853;
    --event-bg-unavailable: #F9E6E6;
    --event-border-unavailable: #DC7979;
    --event-border-left-unavailable: #C20000;
    --ec-event-bg-color: #F9F9F9
}

.fi-topbar,
.fi-topbar-with-navigation nav {
    background-color: var(--instructor-portal-blue) !important;
}

.fi-topbar-item a span {
    color: #FFF !important;
}

.fi-topbar-item:hover a span,
.fi-topbar-item-active a span {
    color: var(--instructor-portal-orange) !important;
}

.fi-logo {
    color: #FFF !important;
}
@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

:root {
    --instructor-portal-blue: #252D4A;
    --instructor-portal-widget-background: #F9F9F9;
    --instructor-portal-orange: #FF4438;

    --event-bg-available: #EBF6EE;
    --event-border-available: #A6D9B4;
    --event-border-left-available: #34A853;
    --event-bg-unavailable: #F9E6E6;
    --event-border-unavailable: #DC7979;
    --event-border-left-unavailable: #C20000;
    --ec-event-bg-color: #F9F9F9
}

.fi-topbar,
.fi-topbar-with-navigation nav {
    background-color: var(--instructor-portal-blue) !important;
}

.fi-topbar-item a span {
    color: #FFF !important;
}

.fi-topbar-item:hover a span,
.fi-topbar-item-active a span {
    color: var(--instructor-portal-orange) !important;
}

.fi-logo {
    color: #FFF !important;
}
Solution
Jamie Cee
Jamie Cee•4w ago
Okay, so I've had to add this to my tailwind config 
    darkMode: 'false',
    theme: {
        extend: {

        },
    },
    darkMode: 'false',
    theme: {
        extend: {

        },
    },

Did you find this page helpful?