I have this style in my controller:
vm.backgroundColor = {
'background': '#' + vm.colorHex,
'filter': 'alpha(opacity = 10)',
'-moz-opacity': '0.1', 'opacity': '0.1'
};
How can I use this without affecting the font color? Thanks
By changing the opacity of the whole element, you're by definition fading the whole element.
If you want the background to be semi-transparent, you can achieve this very easily using rgba colours.
The first three numbers represent red, green and blue, and are rated 0-255, and the fourth is the alpha (transparency), which is rated from 0 (transparent) to 1 (no transparency).
The code below would give a transparent red background.
vm.backgroundColor = {
'background' : rgba(255,0,0,0.5)
};
Related
I have
<span [ngStyle]="{'background-color': dynamicColor}">ABC</span>
I want to set the font color of text based on the background color that is inverted color of background-color so that is easily readable. Like if background-color is white then text color should be black. And if background-color is black then text color is white.
In sass, I could do this easily using the following function
// function to return the text-color based on the passed background color
#function text-color($color) {
#if (lightness($color) > 50) {
#return #000000; // Lighter backgorund, return dark color
}
#else {
#return #ffffff; // Darker background, return light color
}
}
but the background-color is getting changed run time based on the dynamic content using AJAX.
Update
Added more detail to clear the question.
When ngStyle change, color while change!
element:
<span ngStyle="{\"backgroundColor\":\"#000\"}">ABC</span>
js:
setTimeout(function() {
var dom = document.querySelector("[ngStyle]");
var temp = JSON.parse(dom.getAttribute("ngStyle"));
dom.style.color = (temp.backgroundColor === "#000" ? "#fff" : "#000")
}, 16)
I have some buttons with simple black images on them. When my program switches to a black theme, I modify the images using a color adjust:
private ColorAdjust darkThemeButtons = new ColorAdjust(); {
darkThemeButtons.setSaturation( -1 );
darkThemeButtons.setHue( 1 );
darkThemeButtons.setBrightness( .75 );
}
I would love to be able to specify these values via CSS and read them into the color adjust rather than specifying them in code. Is that possible?
For example, Is there a way to generically ask a stylesheet for a selector's value? Maybe something like this (psuedocode):
HSB color = stylesheet.getSelector( ".darkThemeButtonColor" ).getHSB();
I am currently rendering a canvas below some HTML elements (currently a h1 and a span). The canvas contains a kaleidoscope based on an image with two major colors: one pretty dark (almost black), and one really bright, and it can be moved by moving the mouse. The HTML elements are rendered with a color: white style.
The problem I encounter is when the kaleidoscope renders a huge white part. The text becomes invisible. Is it possible to make the text display the negative color of the part of the canvas right under it ? So for example, if the part of the canvas under the text is white, the text would be black ? Here is a screenshot of the problem:
You can set the color to white and use css blending-mode difference:
h1{
color:white;
mix-blend-mode: difference;
}
Demo
Sure, you can use the "difference" blending mode to make the text change color:
ctx.globalCompositeOperation = "difference";
ctx.fillText(myText, x, y);
Example
var ctx = c.getContext("2d");
var toggle = false;
for(var x = 0, step = c.width / 16; x < c.width; x += step) {
toggle = !toggle;
ctx.fillStyle = toggle ? "#000" : "#fff";
ctx.fillRect(x, 0, step, c.height);
}
ctx.globalCompositeOperation = "difference";
ctx.font = "32px sans-serif";
ctx.textAlign = "center";
ctx.fillText("ALTERNATING", c.width>>1, c.height>>1);
<canvas id=c></canvas>
Creative options: draw background slightly transparent to make white light-grey (setting the canvas element's CSS opacity), use shadow or outline for the text.
I have a Javafx interface with white text and a black background, however the white seems REALLY dim, below is the result of my CSS and my code.As you can see there is barely any difference between the white and black even though I explicitly set it to white. Below is the CSS:
#KeyValues{
-fx-background-color:black;
}
#ScienceLabel{
-fx-font-color:white;
}
#GoldLabel{
-fx-font-color:white;
}
Just to note KeyValues is an HBox and the labels are well...labels.
Try using:
-fx-text-fill:white;
Instead of:
-fx-font-color:white;
The default is for the selected row to be colored gray if the QTableWidget does not have focus, and orange if it does have focus. I would like to, instead, make the selected row be red whether or not the widget has focus. I tried adding this to the style sheet:
QTableWidget{ selection-background-color: red}
I also tried
QTableWidget:edit-focus{ selection-background-color: red}
and
QTableWidget:focus{ selection-background-color: red}
but none of them seem to turn anything red, it still seems to remain orange if focused and gray if not. What properties do I have to set to make the selected row always the same color, whether or not it has focus?
Thanks,
David
You almost had it. Technically speaking, you're adjusting the selection color of the items within your table widget, so:
QTableWidget::item{ selection-background-color: red}
should do the trick.
Alternatively:
QTableWidget::item{ background-color: blue }
QTableWidget::item:selected{ background-color: red }
background-color will set background color of the items in row and selection-color will set the text color because when the row is selected then if text are present in the row then it might become unreadable due to color so setting proper text color is important.
#d9fffb : light blue
#000000 : black
self.table.setStyleSheet(
"QTableView::item:selected"
"{"
"background-color : #d9fffb;"
"selection-color : #000000;"
"}"
)