This question already has answers here:
Get default selection color?
(2 answers)
Closed 3 years ago.
I'm working on an HTML page for a client, this page contains a table with multiple line like this:
<div id="content">
<div class="line">toto</div>
<div class="line">titi</div>
...
</div>
and my client wants on a click in a line to select this line, well quite simple but he wants a specific color depending on system.
On Windows, it is simple because you only have one color for selecting text (that i'm aware of) but on Mac, you can modify this color in your settings, you can make it green, red or yellow instead of the usual blue.
So with CSS or Javascript (i use JQuery), can i get this color ?
Bonus Question :
if the user change this color in his settings, can something tell me this so that i can update my CSS ?
Unfortunately you can't get the specific color value of the highlight selection when it's the OS's default in CSS, but you are totally free to change it as you wants.
A workaround could be highlighting programmatically the text on the desired div, which would be, by default, the color defined by the system.
If you think this would be a satisfactory solution, take a look here to see some code sample.
I imagine that is imposible because the Operational System allow the user change the color pallet under your preferences.
The browser may not access this kind of information.
I hope i am wrong, but for now, i understand that is imposible.
OR
You could configure an specific CSS file for each operational system and it will be prefixed, so you can get the Operational System iformation and select the css file.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I intend to recolor a website with a new palette of colors. I plan to first extract the colors from the webpage and determine its color palette and then perform a one-to-one mapping with the palette. I) Would you recommend a better approach? Regarding this approach, I have the following questions:
II) How do I extract the colors from the web page?. My guess is scraping the stylesheets of the page. However, there might be unused styles or colors corresponding to hidden elements. III) Would it be a better idea to find the visible DOM elements and see their computed colors?
IV) How do I determine what the primary colors are in the color palette of the webpage? Counting the frequency of colors or the size of the colored elements might be an option and I was wondering what would be a robust solution.
In the case, the stylesheets do not exhaustively specify the colors of the web page, the browser might use defaults. V) How do I consider the default colors as well?
Finally, VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets?
I) Would you recommend a better approach? II) How do I extract the colors from the web page? You can use Site Palette for this. It's an amazing Chrome / Safari / FireFox extension that analyzes a site's colors and presents them in a very organized way in just a matter of seconds.
III) Would it be a better idea to find the visible DOM elements and see their computed colors? I'm pretty sure the tool only determines the visible elements' colors.
IV) How do I determine what the primary colors are in the color palette of the webpage? This is very subjective. Some people mix all colors of a rainbow in a single webpage. It's hard to tell what the primary color is, assuming it exists.
VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets? The best way to override the colors largely depends on the framework you're using the level of control you have. I don't see why it can't be achieved through User Style Sheets if you're able to identify the elements you're trying to override.
I would download the images and create a palette from those using a good graphics program (like PhotoShop, Fireworks, or Gimp). Another option (also using one of those programs) would be to use the "eye dropper tool" to sample any color on the webpage that you were curious about (and give you the related rgb# so you can duplicate it).
My previous question:
How to make color patterns in css?
I want to generate color patterns as in above image. This image has red as background and green on top of it in a pattern. I want to use the same pattern for the upper color. This image should be generated based on user input of color codes or color names.
In my previous questions some users said it's impossible to do in css. Below is link to example website which has implemented this in css.
https://www.sleekwristbands.com/customize/
Goto this webpage and on step 3 choose checkbox named swirl and a preferred color combination like Red-Green in above image.
Scroll to next step and it displays the same preview.
This is implemented on css.
Some sites have implemented on SVG too. Any solutions will work for me, if its difficult to achieve in css what is more efficient way to do this? on which direction should I proceed ?
Some sites have implemented using PHP GD library.
Example : https://www.wristbandtoday.com/debossed-custom-silicone-wristbands
Are there any libraries for GD for these stuffs(color patterns, color masks) ?
One user generated SVG code for the pattern
https://gist.github.com/momin-ctg/2bed538838c49978081fa622654657f4
But is this way suitable for generating dynamic content as there can be numerous combination of color codes.
I want to be able to give my users the possibility to change the color scheme of my website (skins), however I already have 3 different CSS files that deal with the responsive design. I wanted to be able to add the possibility of changing the color scheme without having to create 3 different CSS files for each color scheme, thus optimizing the amount of CSS files I have to maintain and remember to alter every time I make a change to the main CSS color scheme files.
So my question is, is there a way to say: whenever the color is #BC37ED change it to #3748ed, for instance? Maybe using JavaScript or even in the CSS file itself?
Any help is highly appreciated. Thanks!
You could create a class or classes for each scheme and then substitute based on user selection using jquery.
Is there any way to turn off Visual Studio token reference highlighting for JavaScript (even through a hack?)
I am aware of how to turn it off for C# following this guide (http://msdn.microsoft.com/en-us/library/vstudio/ee349251(v=vs.100).aspx), looks like there is no option available similar in the JavaScript tab, seems like a big oversight.
It's pretty annoying, and too much flickering occurs for my liking, especially when trying to duplicate lines then renaming, particularly working with a lot of attribute names in JSON notation or when you're moving your arrow keys across a shared object which is shown on many lines.
Eg.
I don't think this is available for all the languages. JS is one of them. As a workaround, and if you don't mind disabling for the other languages as well, why not change the Highlighing color to match your Editor's background color. Unfortunately this not available for a specific language, but common for the editor.
By doing this, it would be the same effect as if you were to turn off the Highlight references. Below is from the same MSDN post you mentioned in your question.
To change the reference highlighting color
On the Tools menu, click Options.
In the Options dialog box, expand Environment, and then click Fonts
and Colors.
In the Show settings for box, click Text Editor.
In the Display items list, click Highlighted Reference.
In the Item background box, click the appropriate color.
The Evernote Web Clipper extension for Chrome has a "lozenge" style button that is created for each Tag (Tag = word or phrase entry) you choose from an auto-complete drop-down list box. The lozenges are similar to the stack overflow Tag in that they look like small colored buttons with the Tag text in the center, and a little "x" in the upper right corner to delete the Tag. The difference is that Evernote uses a drop-down list box with auto-complete that rolls down from directly beneath where you are typing into the edit box that is accumulating your Tag choices. Therefore, as you select each tag you end up with a line of lozenges behind the entry your are currently entering. Clicking on a lozenge's deletion mini-box removes the lozenge from the edit box.
It's a pretty complex series of operations and to try duplicating it with one of the standard JQuery elements or a similar item would be a significant amount of work (especially the lozenge drawing and event handling for the delete mini-box). Is there a Javascript library that has this same function? If so, please tell me the name of the library (link if you have it) and what module or element is the one I need to study.
If you are referring to the image in the url (my reputation dont allow me to upload. :(), I believe there are some similar question with answers that points to the correct plugin.
Screenshot of Evernote Web Clipper: http://i.imgur.com/oQT6H.png
If so, answers are available here: plugin to separate tags (like the stackoverflow's input tags interface)