How to change Confirmation content color

Anvil Q&A
2

Don’t forget anvil objects are not plain structured objects. Sometimes the CSS roles must be more advanced. Applying it on general level won’t affect all levels of that structure.
Originally they are using On Surface for text color. So you can just change it in your color scheme or use CSS. Playing with colors there impact your alerts and different objects.

  1. Open Dev Tools for example in google chrome: ctrl + shift + i

  2. Find your object

    image
    image1010×159 22 KB

  3. Test different settings then apply it via CSS Role
    image

  4. The Text is being controlled by:
    image
    image

Partial example from the CSS role for DataGrid Object, based on that you can create now your own role:
Just aplly the new role, open alert and check with the tools, why it is not to 100% applied. Then correct it and repeat.

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:first-child {
  border-radius: 4px 0px 0px 0px;
}

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-child {
  border-radius: 0px 4px 0px 0px;
}
/*Line at the end of the repeating panel, atm it's green*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-of-type {
  border-bottom: 2px solid #009879;
}

.anvil-role-tonal-data-grid.anvil-data-grid .data-row-col {
  font-size: 12px; /* set the font size to 12px */
  align-items: center; /* center align the contents vertically */
  justify-content: center; /* center align the contents horizontally */
  text-align: center;
2 Likes