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.
Related
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.
In my angular 5 application I develop for multiple countries say, India(Hindi), default(english) and Malaysia.
Now when the user change the language, I require to add the appropriate font-family as default to page.
In the page, there is some font-family added by element level. say ( p tag with font thinner and small size ).
As a information how this kind of scenario handled by UI development?
Is there any regular practice which i need to follow?
Thanks in advance.
Depending on your framework, many allow for inbuilt localization functionality that makes it super easy to change content as well as things like font. For Angular look into:
https://thebhwgroup.com/blog/2015/01/translation-localization-angularjs
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 would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.
I would like to offer my users the ability to customize the look and feel of the website.
I am giving them a color picker to choose a color scheme. I would like to dynamically generate few matching colors and apply them.
My questions are:
1.) How can i generate a color scheme based on the choosen color ? (some matching colors and contrasting colors for the background)
2.) What are the best practices for achieving a themable interface ?
I am writing an AngularJS SPA app with pure HTML with REST API as backend.
Right now for my 2nd question, I am retrieving the color setting and applying them for body.
<body style="background:color:{{bgcolor}}; color:{{fgcolor}}">
I am looking for something more elegant.
You can do this with ngStyle as you have above... but as you noted, it's not very elegant.
The simple truth is that nothing in AngularJS itself is really designed to address this problem other than the ngStyle directive itself. However, while I haven't exactly seen a "best practice" for this, you might take some ideas from Drupal's "Color" module, which is one of its base/core modules. You can do the same thing in Angular very easily.
What this does is go back to stylesheets, which I'm assuming you skipped over because it didn't seem like an obvious solution for something dynamic. But they have a clever answer. In a piece of code, after the user picks a color, they write out a stylesheet with a unique ID for its filename. They put these in a directory where other user-uploaded assets are kept, so they don't mix with core site code (minimize the potential attack vector). Then they only need a simple rule in the page to include the stylesheet itself.
You can easily emulate all of this with Angular, although you'll need your server's help, of course. But the nice thing about it is it's much easier for you to maintain. Instead of having to "sprinkle" ngStyle directives all over the place (one on everything you want styled) and potentially having conflicts with other things you want to do on some of those elements, the stylesheet can work exactly the way it's supposed to: using classes to target specific elements. You can make a template stylesheet that's easy to maintain, so that's a natural fit... and the best part is, it's easy to hook everything up.