Dark Mode Strategy

Inertia Table comes with support for both light and dark modes. This is achieved through Tailwind's dark variant, which lets you 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

It's quite common that you've designed your app for light mode and don't want to support dark mode at all. In this case, you want to change Tailwind's strategy from applying dark mode styles based on the user's system color scheme to using a selector instead.

This simply comes down to adding a darkMode key to your tailwind.config.js file and setting it to selector:

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

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

When you change 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');