React-data-grid: Force light theme
It should be possibile to set the class rdg-light to force the table in light mode even when OS is set to dark mode and avoid unwanted behaviours. See CSS below:
@media (prefers-color-scheme: dark)
.rdg:not(.rdg-light) {
--color: #ddd;
--border-color: #444;
--summary-border-color: #555;
--background-color: #222;
--header-background-color: #1c1c1c;
--row-hover-background-color: #181818;
--row-selected-background-color: #1a73bc;
--row-selected-hover-background-color: #1868aa;
--checkbox-color: #95cfff;
--checkbox-focus-color: #c8e6ff;
--checkbox-disabled-border-color: #000;
--checkbox-disabled-background-color: #333;
}
iosonosempreio
All 4 comments
@iosonosempreio I simply added .rdg-light as className in DataTable, I guess you could add a flag as dark/light mode and control adding this class.
arditnurcaj
on 15 Oct 2020
As mentioned above, adding rdg-light className should fix the issue
amanmahajan7
on 18 Oct 2020
@iosonosempreio I simply added .rdg-light as className in DataTable, I guess you could add a flag as dark/light mode and control adding this class.
How to please ?!
I need the DataGrid to be light or white
stonestecnologia
on 11 Dec 2020
@stonestecnologia <DataGrid className='rdg-light' columns={columns} rows={rows} />
arditnurcaj
on 11 Dec 2020
Related issues
jmahony
路
4Comments
jlarso11
路
3Comments
localhosted
路
4Comments
GenoD
路
3Comments
SupernaviX
路
3Comments
Most helpful comment
@iosonosempreio I simply added .rdg-light as className in DataTable, I guess you could add a flag as dark/light mode and control adding this class.