How to override the default color properties in the CSS of a Widget?

June 16, 2023

I am using a widget from Thingsboard’s library to update a shared attribute value. The widget allows for customization through the settings, but I am only able to update the background and title colors. The default black text color in the editable text box is not easily visible due to my chosen dark blue color scheme. I need to update the properties so that the text inside the text box is white.

After inspecting the widget in dev mode on Chrome, I found that the CSS property responsible for the color is:

.tb-default .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: #000000de;
}

Then in the widget settings, I added this to try and update the color:

.mdc-text-field__input  {
    color:white;
}

When I reload the page, the color does not update, and in the dev console I see the CSS property I added crossed out:

The default widget CSS properties are:

.attribute-update-form {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.attribute-update-form__grid {
    display: flex;
}
.grid__element:first-child {
    flex: 1;
}
.grid__element:last-child {
    align-items: center;
    margin-left: 7px;
}
.grid__element {
    display: flex;
}

.attribute-update-form .mat-button.mat-icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 20px;
}

.tb-image-preview-container div,
.tb-flow-drop label {
    font-size: 16px !important;
}

.attribute-update-form .mat-icon-button mat-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    font-size: 20px;
}

.tb-toast {
    font-size: 14px!important;
}

How can I this? I come from a C background so my knowledge on javascript and CSS is pretty basic but really do want to learn more of it.