Have you tried the Atlas UI design editor? There you have a lot nice features to make some base design settings. You can enter this editor by using the Mx Studio.
Hi Razwan,
If you go to the folder Theme > Styles > Sass > Custom > Components you’ll see the file “_datagrids.scss”. If you open this, you can see which variables are used to give color to the different elements of a data grid. You can change the file here as well, just make sure to recompile using Koala or a similar program (see docs for more info on how to do this https://docs.mendix.com/howto7/front-end/style-with-gulp-and-sass). This is especially usefull if you don’t want to change all your default variables/colors, just whats needed to change the data grid appearance.
Good luck!
Hi Razwan,
Best practice is to never touch any file within the web core folder (theme\styles\web\sass\core) or native core folder. If you want to change any variable inside theme\styles\web\sass\core\variables.scss, please copy them over to theme\styles\web\sass\app\custom-variables.scss and change them there. custom-variables.scss will overwrite the core variables.scss.
Can you try setting these variables in your custom-variables.scss file? (Add your desired colors)
// Background Colors
$grid-bg: // Your light gray color
$grid-bg-header: // Your dark gray color
// Striped Background Color
$grid-bg-striped: // Gray color between the lighest and darkest above
Don’t forget to compile your SCSS to CSS.