I have been trying to edit the color scheme of my app by making changes to the “_custom-variables.scss” file in the \theme\styles\web\sass\app folder. In particular I would like to make some changes to data grids. I am a beginner when it comes to css and scss, so my approach has just been trial and error to this point. I made some changes to the “_variables.scss” file in the \theme\styles\web\sass\core folder. I was able to find the following: // Background Colors $grid-bg: #747480 !default; $grid-bg-header: transparent !default; // Grid Headers $grid-bg-hover: mix($grid-border-color, #FFF, 20%) !default; $grid-bg-selected: #FFE600 !default; $grid-bg-selected-hover: mix($grid-border-color, #FFF, 50%) !default; // Striped Background Color $grid-bg-striped: mix($grid-border-color, #FFF, 10%) !default; // Background Footer Color $grid-footer-bg: $gray-primary !default; I was able to change some of this to alter the colors of the data grid, but cannot adjust the alternative color so that the grid looks as follows with the header being in black and then a light and dark grey color alternatively: I was able to change the dark grey myself using: $grid-bg: #747480 !default; Can anyone suggest which scss variable I would need to change to alter the lighter grey color? Any help would be much appreciated.
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.
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.
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