Dark Mode Strategy

Inertia Table supports both light and dark modes via Tailwind's dark variant, which lets you style elements differently based on the user's system color scheme by adding dark:* classes.

Forcing Light Mode When the User Prefers Dark Mode

For light-mode-only apps, switch Tailwind's strategy from system-based to selector-based so dark mode styles are never applied automatically.

In Tailwind CSS v4, this is configured directly in your CSS file via the @custom-variant directive:

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

For more details, see Tailwind's dark mode documentation.

After configuring the dark variant, apply the same strategy to Inertia Table via the setDarkModeStrategy method, typically in your app.js file:

Vue

import { setDarkModeStrategy } from '@inertiaui/table-vue'

setDarkModeStrategy('selector')

React

import { setDarkModeStrategy } from '@inertiaui/table-react'

setDarkModeStrategy('selector')

Alternatively, you may pass a callback to setDarkModeStrategy. It should return a boolean indicating whether dark mode is active:

Vue

setDarkModeStrategy(() => {
    return document.documentElement.classList.contains('dark-mode')
})

React

setDarkModeStrategy(() => {
    return document.documentElement.classList.contains('dark-mode')
})