Dark Mode Strategy

Inertia Table supports both light and dark modes. This is achieved using Tailwind's dark variant, which allows you to style elements differently based on the user's system color scheme by adding dark:* classes to the elements.

Force Light Mode when user prefers Dark Mode

If your app is designed exclusively for light mode and you don't want to support dark mode, you need to change Tailwind's strategy from applying dark mode styles based on the user's system color scheme to using a selector instead.

To do this, add a darkMode key to your tailwind.config.js file and set it to selector:

module.exports = {
    darkMode: 'selector',
    // ...
}

For more details, see Tailwind's documentation on this topic.

When you modify the darkMode configuration, you also need to apply this strategy to Inertia Table. You can do this by using the setDarkModeStrategy method, for example, 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 can pass a callback to the setDarkModeStrategy method. This callback should return a boolean indicating whether dark mode should be enabled:

Vue

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

React

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