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)
Related
I have a template with multiples class using one color, can I dynamically change that color to another using javascript?
When the page loads, locate all the div, span, p, h, with color #512a69 and change it to #ef7e8e.
Is it possible?
Thanks.
Here is a solution which I'll explain step-by-step.
First, call colorReplace("#512a69", "#ef7e8e");. The first value is the target color, and the second is the replacement color.
Inside it, $('*').map(function(i, el) { will select all tags in the DOM tree. For each element, its getComputedStyle(el) styles array is returned. You can customize the selector for faster processing (e.g. $('div').map(function(i, el)) {).
All style attributes containing "color" (e.g. background-color, -moz-outline-color, etc.), it will be checked if the color value is equal to your target color. If so, it will be replaced with the target color.
Colors are returned like rgba(0,0,0,0) or rgb(0,0,0), not like #FFFFFF, so a quick conversion is done from rgb to hex for the comparison. That uses the internal rgb2hex() function.
I hope this is what you are looking for.
function colorReplace(findHexColor, replaceWith) {
// Convert rgb color strings to hex
// REF: https://stackoverflow.com/a/3627747/1938889
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
// Select and run a map function on every tag
$('*').map(function(i, el) {
// Get the computed styles of each tag
var styles = window.getComputedStyle(el);
// Go through each computed style and search for "color"
Object.keys(styles).reduce(function(acc, k) {
var name = styles[k];
var value = styles.getPropertyValue(name);
if (value !== null && name.indexOf("color") >= 0) {
// Convert the rgb color to hex and compare with the target color
if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
// Replace the color on this found color attribute
$(el).css(name, replaceWith);
}
}
});
});
}
// Call like this for each color attribute you want to replace
colorReplace("#512a69", "#ef7e8e");
Source: https://stackoverflow.com/a/30724171/1136132
I have component A and component B.
I want component A background color to be black.
I want component B background color to be yellow.
If I modify the bg color inside the main style.css then that color will be set globally in my app.
If I try to modify the bg color inside the component css file the body bg color will not be affected.
Is there a way to modify the bg color for each component individually when they load ?
#Component({... })
class MyComponent { constructor() {
this.bgColor = this.getRandomColor(); }
#HostBinding('style.background-color')
bgColor;
getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
}
Thanks for downvoting my answer because of the poor question title
Check instead other answers
- Style html,body from web component (Angular 2)
- Add class to body on Angular2
- Angular 2.x bind class on body tag
- ...
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)
};
I'd like an option with the TinyMCE color picker to choose transparent as the color so a character (a "bullet") will still be there and take up space but will not be visible if it's color is transparent.
There's an "X" box option that says "No color" but this seems to make the color black, not transparent.
Does anyone know how to add a transparent color option to this color picker, or even make the "X" box implement transparent instead of black?
Thanks for any ideas.
I believe I was able to do that, I did some quick tests and it appears to be working fine.
I got the latest version of TinyMCE (4.1.10_dev) to access the textcolor plugin's non minified javascript there's this instruction:
if (value == 'transparent') {
resetColor();
} else {
selectColor(value);
}
What happens here? When you choose a color it runs the selectColor, which wraps the selected text in a span with the selected color. However, when you select the no color it removes this color span (that's why it goes back to black which is the default color) instead of setting it to transparent.
So if you do this:
//if (value == 'transparent') {
// resetColor();
//} else {
selectColor(value);
//}
Instead of removing the span it will change it to 'transparent' instead.
One important thing is that tinyMCE gets the plugin scripts automatically, so it only works with the minified versions, so after you do these changes you'll have to minify the script to the plugin.min.js and put it on the textcolro plugin's folder overwriting the one there.
I hope it helps.
The × button in the colorpicker removes any custom colours, it does not add a zero-opacity colour.
As you can see when looking at the source code or trying the full example there is no support for rgba() or opacity in the included colorpicker plugin. Only rgb() and hex unfortunately.
You may need to create your own small plugin to add the ability. There are a number of alternatives, for example:
Create a CSS class which you can add to elements in the editor. Then do your colour magic in your own CSS file.
Create a new button in the toolbar which makes the element transparent.
I would personally go with option two, something like this:
tinymce.init({
selector: 'textarea',
plugins: 'nocolour',
toolbar: 'nocolour',
external_plugins: {
"nocolour": "url_to_your/nocolour.js"
}
});
And nocolour.js:
tinymce.PluginManager.add('nocolour', function(editor, url) {
// Add a button that opens a window
editor.addButton('nocolour', {
text: 'Remove Colour',
icon: false,
onclick: function() {
editor.undoManager.transact(function() {
editor.focus();
// Here is where you add code to remove the colour
editor.nodeChanged();
});
}
});
});
Rafael's solution worked for me. I just wanted to document it a bit more and show what it looks like for TinyMCE 4.1.7.
When you click the "X" in the textcolor grid the "value" variable gets "transparent," rather than a hex value from the colorMap.
The relevant code in the textcolor plugin is:
value = e.target.getAttribute('data-mce-color'); // the hex color from the colorMap square that was clicked. "transparent" if X was clicked
if (value) {
if (this.lastId) {
document.getElementById(this.lastId).setAttribute('aria-selected', false);
}
e.target.setAttribute('aria-selected', true);
this.lastId = e.target.id;
// if (value == 'transparent') { // occurs if you select the "X" square
// removeFormat(buttonCtrl.settings.format);
// buttonCtrl.hidePanel();
// return;
// }
selectColor(value);
The five lines I've commented out remove formatting for the selected text, leaving it black, which doesn't seem useful. If you wanted the text black you could select the black square in the colorMap. Falling through to selectColor(value) with value = "transparent" sets transparent as the color.
I'm working on an HTML page. This page allows the user to choose an image that will serve as the "background-image" attribute value for a DIV. The user may also choose a color that will kind of shade the image.
In an attempt to build this, I found this site: http://doodles.tev.net/texture2/. Its doing exactly what I want. However, the code in my app doesn't seem to apply the background-color appropriately. If the background-image value is set, the background-color has no impact. Here is what I have:
<div id="myDiv" style="height:200px; width:200px; border:1px solid black; display:inline-block;"> </div>
function updateMyDiv() {
var bg = getBG();
$("#myDiv").css("background-color", bg);
var fg = getFG();
$("#myDiv").css("color", fg);
var txt = getTxt();
if ((txt != null) && (txt.path != null) && (txt.path.length > 0)) {
$("#myDiv").css("background-image", 'url(' + txt.path + ')');
} else {
$("#myDiv").css("background-image", '');
}
}
Why does the site that linked to apply a tint to "60 Degree Gray" when I choose a color. However, in my app, a tint never gets applied.
Thank you
If you supply a background image, it will always appear on top of the background color. Background color is usually used as a fallback, in case the background image returns 404, or, the image doesn't cover all of the background.
If you look closer into the site you linked to, you'll see the images are semi-transparent; I think this could be your problem. are your images semi-transparent?