So I'm creating a theme plugin for a forum where users often enter text with custom coloring. This is implemented as an inline style on a span.
The forum by default has a dark color scheme so most of the text is light. If I create a theme with a light color scheme this text would be hard to see.
I thought of using a CSS5 color filter that targets text with inline colors:
.Comment span[style^=color] {
filter: hue-rotate(180deg) invert(100%);
-webkit-filter: hue-rotate(180deg) invert(100%);
}
By inverting and rotating the color spectrum this turns a light blue color into a dark blue and light red into dark red, preserving the hue but making it darker. This actually works but it has the side effect of also inverting the colors of images and other elements embedded in the text.
I thought of doing another color inversion on child elements but this leaves images looking like junk since apparently hue-rotate is not very accurate at all.
A solution would be to have the CSS only target the text node of the span and not any child elements but that does not seem possible? Unless I'm missing something I don't see any selectors for text nodes.
Is there something I can do in jQuery to perform this color inversion? I'd rather not have to destroy all the coloring on the page as that would upset the users.
this Solution only goes lighter does not solve the problem:
I mis-read the question... I tried to delete this because it did not solve the problem for light backgrounds but it still appeared.
This can be accomplished by making use of rgba
Tested and works:
$(window).load(function() {
var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba');
$('.Comment').css('color', col);
});
var col converts rgb to rgba allowing for color percentage
Here's a solution that uses the javascript library tinycolor. A pure CSS solution would be much preferred but it doesn't seem possible.
$.getScript('https://rawgit.com/bgrins/TinyColor/master/tinycolor.js').done( function() {
$('.Comment span[style^=color]').each(function() {
var color = tinycolor($(this).css('color')).toHsl();
color.l = 1 - color.l;
$(this).css({'color': tinycolor(color).toRgbString()});
});
});
Related
I'm working on a design for my webapp, and I'd like a dark theme similar to that seen here.
Sadly I've found the Angular Material Theming Docs very hard to get my head around; no mention of where each colour will be used, how to set a background color or a text color etc.
I'm currently using:
.config(function($mdThemingProvider) {
$mdThemingProvider.definePalette('coolpal', {"50":"#d9ddec","100":"#a6b1d2","200":"#8190bf","300":"#5468a5","400":"#495b90","500":"#252830","600":"#354168","700":"#2a3453","800":"#20283f","900":"#161b2b","A100":"#252830","A200":"#a6b1d2","A400":"#495b90","A700":"#2a3453"});
$mdThemingProvider.definePalette('accentpal', {"50":"#ffffff","100":"#bfe7f7","200":"#8dd5f1","300":"#4ebee9","400":"#32b4e5","500":"#1ca8dd","600":"#1993c2","700":"#157fa7","800":"#126a8c","900":"#0e5570","A100":"#ffffff","A200":"#bfe7f7","A400":"#32b4e5","A700":"#157fa7"});
$mdThemingProvider.definePalette('warnpal', {"50":"#f0fdf9","100":"#adf4dc","200":"#7bedc7","300":"#3ce5ac","400":"#21e1a0","500":"#1bc98e","600":"#17ae7b","700":"#149368","800":"#107855","900":"#0d5d42","A100":"#f0fdf9","A200":"#adf4dc","A400":"#21e1a0","A700":"#149368"});
$mdThemingProvider.theme('default')
.primaryPalette('coolpal').dark()
.accentPalette('accentpal')
.warnPalette('warnpal')
.backgroundPalette('coolpal')
})
With a bit of hacking of colours this works ok, but if I look at the colors in an md-toolbar, the text is set to rgba(0,0,0,0.87); and I have no idea how to change it; I assumed it would come from somewhere in my coolpal theme, but it's not. Here's how my text elements are being styled:
How can I alter $mdThemingProvider to ensure the text is a light color rather than opaque black?
I would suggest extending an existing palette, much easier.. such as;
var myPalette = $mdThemingProvider.extendPalette('indigo', {
'500': '183863'
});
$mdThemingProvider.definePalette('mine', myPalette);
$mdThemingProvider.theme('default')
.primaryPalette('mine').dark();
I have a container with a light blue background on my page and I would like for the background to get sequentially darker with each click. At this point, I'm happily setting my array of colors manually (we'll leave that question for another day) but I'm unable to get the background color to change or iterate over the array like I would like.
Currently, I'm getting alerts that there was an error in parsing my background color. I've tried setting background-color for .content in the css document and removing it, but neither way works (except if I remove it, then there's no background color at all)
Here's a rough sense of the code I have so far. I built it based on this jsfiddle from another thread, though it does not match entirely: http://jsfiddle.net/arunpjohny/3eGM5/
$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#the text in this div also changes on click, so here's my animation for that.
#This is working fine, but I figured I'd include it just to be safe
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Is there an obvious solution to this that I'm missing? I'm still pretty new to jQuery and putting everything together, so any advice or any direction you can point me in would be greatly appreciated!
Your color isn't being animated because you need to use the jQuery Color plugin to animate colors.
So you'd need to include the jquery color plugin in your markup and then change your animate code to look similar to this.
$("#block").animate({
backgroundColor: $.Color(blues[counter++])
}, 1500 );
I am a javascript beginner. I am working in indesign CS6. I have assigned paragraph and character styles to all the fonts being used throughout my document. Using character styles I have changed the color of some type to be purple. The purple text is being used to call specific attention to that text. However I want to be able to toggle on and off the purple text. When I toggle off the purple I want the text to change to gray. I do need to be able to change it back to purple as well. Is there anyway to do this using script?
Thank you!
You can create a dedicated swatch and change its color components to fit your taste.
All references e.g. from within styles will follow.
// assuming the swatch is already created
var swatch = app.activeDocument.swatches.itemByName("purple");
swatch.properties = {model:1886548851, space:1129142603, colorValue:[0, 0, 0, 30]};
The following script changes the internal color setting of the specified character style, from a 'purple'-named swatch to a 'grey'-names swatch, and vice-versa.
var myDoc = app.activeDocument;
var charStyle = myDoc.characterStyles.item('My Character Style');
var purple = myDoc.colors.item('purple');
var grey = myDoc.colors.item('grey');
if (charStyle.fillColor == purple)
charStyle.fillColor = grey;
else charStyle.fillColor = purple;
If it's set to Purple then it changes to Grey, and if it's set to Grey it changes to Purple.
(change the swatch names and character style to suit your needs)
you can try this :
http://forum.jquery.com/topic/toggle-change-row-color
try to create a class for your "purple text" , and add/remove the class to change the colors.
there is a similar question at this link :
How do you toggle links to stay a certain color until clicked again
I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)
I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');
The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)
I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');
I'm surprised that there is no "text-decoration: reverse" in CSS as it seems very awkward to achieve using JavaScript. I.E. set the element's foreground and background color to the background and foreground of the parent respectively.
I noticed JavaScript techniques for that here
Surely it's not that complicated?
What are you calling reverted?
Do you mean to set the background as the foreground color and vice versa?
(Maybe it's a stupid comment, but if so it is not a decoration is it?)
Anyway you're about to have a fight between DRY and MVC here :
either you declare a new CSS class
each time you want to do that. That's
redundant and painful, but you indeed
separated the style from the code.
Typically:
.mydiv {
background-color: blue;
color: red;
font-family:...;
(...)
}
.mydiv:hover {
color: red;
background-color: blue;
}
another option is to do that through javascript. Proxify suggested using jQuery.
The result would probably look like that... (not tested)
$(".invert").map(function (el) {
var color = el.css("color");
var bgcolor = el.css("background-color");
el.css("color", bgcolor).css("background-color",color);
})
The concept of "reversing" background and foreground style of text is not that easy to implement to the browser. If one allow your "text-decoration: reverse" in the browser, should background image also reverse onto texts? This is not what a browser today can draw.
Now consider transparencies and those alpha value. There are many aspects that make your idea of "reverse" impractical to implement in general.
well you could try using jQuery, it's a simpler way to achieve the same as normal javascript.
How about something like:
var bgColor = "#123456";
var textColor = bgColor.match(/^#([0-8][0-9a-fA-F])+$/g) == null ? "#000000" : "#ffffff";
So it uses white colored text for dark bacground colors, and black text color for lighter background colors.
While there is no CSS available to reverse text, there does exist a html element called bdo (bi-directional override) and the selector dir="rtl" and with it you can reverse text.
You can reverse the text in your page
If you then give it a class, you can then add additional style elements, for example, and you'll need to view the source code for this page to "read" what I've done. (p.s. you don't need to include the element, that's there to differentiate the code from the rest of this blurb...)
You can reverse the text in your page
.reverso
{ color: #cc3300;
font-size: 200%; }
and so on.
I hope that helps (O:
Checkout this -
http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/