I'm trying to change the color of QComboBox (or a few widgets actually) but it seems that when I create a QStyleSheet with just a color property, it over writes all the other properties. Most notably on Windows, rounded QComboBoxes become square, and rather ugly. Snippet below (note that the colors in the actual code are generated. Just using black on white for ease).
QString styleSheet = "QComboBox { background-color: #ffffff; color: #000000 }";
combBox->setStyleSheet( styleSheet );
Sorry for the ridiculous sizing of these images.
This is a regular, non-styled QComboBox:
And this is a QComboBox after applying the aforementioned style:
You are using Dynamic Stylesheets.
Reference: https://wiki.qt.io/Dynamic_Properties_and_Stylesheets
try using this in your code:
ui->comboBox->setStyleSheet("background-color: rgb(16, 72, 255); color: rgb(255, 17, 80);");
It's like append your stylesheet to the widget stylesheet.
Related
For buttons Bootstrap v5.2 dynamically generates the colour of the text based on the button colour.
At the moment I’m setting bootstrap variables override file to override the primary color of for my custom theme
$green: #369d6d !default;
$primary: $green !default;
When I’m using buttons btn-primary class I'm seeing a black text
The CSS that is generated is:
btn-primary {
--bs-btn-color: #000;
--bs-btn-bg: #369d6d;
--bs-btn-border-color: #369d6d;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #54ac83;
--bs-btn-hover-border-color: #4aa77c;
--bs-btn-focus-shadow-rgb: 46,133,93;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #5eb18a;
--bs-btn-active-border-color: #4aa77c;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #369d6d;
--bs-btn-disabled-border-color: #369d6d;
}
The bootstrap 5 button mix-in (bootstrap/scss/mixins/_buttons.scss) is dynamically setting the text color using a color-contrast function the documentation about color-contrast is here: https://getbootstrap.com/docs/5.2/helpers/color-background/
So bootstrap is now 'automatically determine a contrasting color for a particular background-color.'. So bootstrap is now automatically creating the button text color based on the buttons background. I guess this is for accessibility contrast reasons.
My question here is what is the best method to override this behavour. At the moment I'm overriding the text color using for the created buttons like so:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
color: white !important;
}
Is there a better method using variables? Or something else to override this the bootstrap way.
the Bootstrap recommended way is to use the color-contrast function on a custom-class.
https://getbootstrap.com/docs/5.2/customize/sass/#color-contrast
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
I'm new to Angular and I'm trying to to change mat chip default colors using global CSS file but some reason it won't let me change the default chip color and inside text color.
Homepage.component HTML
<mat-chip-list>
<mat-chip>Tag1</mat-chip>
</mat-chip-list>
Global CSS
.mat-chip{
background-color:mat-color($accent);
color: mat-contrast($positive,50);
}
This is what it look like inside mat-card
You can use !important operator, as below :
.mat-chip{
background-color: mat-color($accent) !important;
color: mat-contrast($positive,50) !important;
}
I'm trying to adjust the color of my error messages from my Combobox. I tried to overwrite the style I saw getting applied, but it just isn't sticking. I saw the normal way to apply styles in Vuetify is to add [color]--text to a component, but what would I need to do to set just the error style?
<style>
.error--text {
color:rgb(0, 0, 0) !important;
caret-color: rgb(2, 0, 0) !important;
}
</style>
EDIT:
Here is a reproduction of the issue
codepen
Add arbitrary class to your component (e.g. app-combobox):
<v-combobox class="app-combobox"
Then style like so:
.app-combobox.error--text,
.app-combobox .error--text {
color: rgb(0, 0, 0) !important;
caret-color: rgb(2, 0, 0) !important;
}
Vuetify uses !important as well so it seems that vuetify style has higher level of specificity, thus you need to add your own class and use it so that it has more.
It seems that .app-combobox.error--text is needed to color the input line, and .app-combobox. error--text (with space) to color child components i.e. text and icons.
I'm using Nuxt with Vuetify module. I just updated the error color in the nuxt.config.js, and all works fine for me.
I want to assign a style class to an element.
I have a css:
.text-field{
-fx-background-color: #333333;
-fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
-fx-text-fill: white;
-fx-prompt-text-fill: white;
-fx-font-family: Trebuchet MS;
-fx-font-size: 14px;
}
.text-field:focused{
-fx-focus-color: white;
-fx-prompt-text-fill: white;
-fx-highlight-fill: grey ;
}
And the java code I´m using:
JFXTextField textField = new JFXTextField();
textField.getStylesheets().add(this.getClass().getResource("/css/TextField_Style_Sheet.css").toExternalForm());
textField.getStyleClass().clear();
textField.getStyleClass().add("text-field");
The problem I´m having is that the ":focused" style is not being applied to this element.
What am I doing wrong?
Already tested it using directly scenebuilder in the element and it seems that the setting in "Focus Color" and "UnFocus Color" options override the text-field:focused style.
As the JFXTextField is created in runtime it seems the default Focus Color overrides the css text-field:focused style.
How can this be solved?
You replace all the style classes of the node with a single style class: text-field.
Take a look at modena.css to see that the style of TextFields is defined in rules for style class text-input.
These rules are also the only place where the CSS variable -fx-focus-color is used for TextFields. Since you make sure those rules are no longer applied you don't see any visible effect when modifying the -fx-focus-color variable.
If you do want to keep the parts of the old style you should not remove the style classes that are added when creating the node and modify properties that don't suit your needs in your own style. If you clear the style classes you're responsible for rebuilding the look from scratch.
Change focused to hover
like this:
.text-field:hover {
..}
Recently I found the way to change color of GtkToggleToolButton text with a CSS sheet (Gtk 3.20):
#histoToolGreen label {
color: green;
}
#histoToolBlue label {
color: blue;
}
To do that, I changed the color of the label rather than that of the button. It works well. But now I want doing the same in C code. So I write :
gtk_css_provider_load_from_data(provider, "#histoToolRed label {color: red;}", -1, NULL);
gtk_style_context_add_provider(
gtk_widget_get_style_context(lookup_widget("histoToolRed")),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
But that does not work. I also tried, with no success:
gtk_css_provider_load_from_data(provider, "* {color: red;}", -1, NULL);
and many other things.
Can someone tell me how to change color of GtkToggleToolButton text in C code using CSS provider ?
I've made no progress trying to add CSS styling at the widget level. I've only managed to get it to work by adding a style sheet at the application level with gtk_css_provider_get_default.
What I expected when I did something similar to what you've done is that the style would be applied to the widget I attached it to, and all of it's children. What I found is that style is only applied to the individual widget that got the provider added to it.