A minimalist theme for your favorite React DataGrid
By admin·
We implemented a minimalist theme for the Infinite React DataGrid - it's designed to be simple and clean, with a focus on readability and performance.
Building a second theme forced us think about dark/light mode support and how to make the theme more customizable.
Note
Read more about the available themes in our React DataGrid.
Available themes
Default theme
The default theme is applied when you don't specify any explicit theme by default.
Minimalist theme
The minimalist theme is inspired from minimalistic designs and is a good choice if you want to keep the UI simple and clean.
Applying the theme
A theme is applied by using the "infinite-theme-name--THEME_NAME" CSS className in any parent element of the <InfiniteTable /> component (or even on the component element).
You will want to apply the theme name and theme mode classNames to the same element, so you'll end up with a className like "infinite-theme-name--minimalist infinite-theme-mode--dark".
<body className="infinite-theme-mode--dark infinite-theme-name--minimalist">
<DataSource {...dataSouceProps}>
<InfiniteTable {...props} />
</DataSource>
</body>Using theme mode
There are two theme modes available in Infinite: light and dark. Unless otherwise explicitly configured, the theme mode is applied based on the user OS settings for the preferred color scheme.
However, the theme mode can be enforced, by having a parent element with a CSS className of "infinite-theme-mode--light" or "infinite-theme-mode--dark"
<div className="infinite-theme-mode--light">
<DataSource {...dataSouceProps}>
<InfiniteTable {...props} />
</DataSource>
</div><body className="infinite-theme-mode--dark">
<div>
<DataSource {...dataSouceProps}>
<InfiniteTable {...props} />
</DataSource>
</div>
</body>