Jump to content

Dynamic colors using less


Recommended Posts

I am trying to get to grips with some of the more advanced .less functions but have hit a bit of a stumbling point.
I have read about using 'when' and am trying to change the text color based on the darkness level of the @brand color. What I have is very similar to an example I saw but that one was setting the background too, so that part has been removed.
@brand-beige: #F5F5DC;
@brand-gray: #808080;

.textcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) {
    color: #fff;
.textcolor(@txtcolor) when (lightness(@txtcolor) < 50%) {
    color: #000;

/** beige**/
@state-beige-text: textcolor(@brand-beige);
@state-beige-bg: @brand-beige; 
@state-beige-border: darken(spin(@brand-beige, 10%), 50%);

/** gray**/
@state-gray-text: textcolor(@brand-gray);
@state-gray-bg: @brand-gray; 
@state-gray-border: darken(spin(@brand-gray, 10%), 50%);
When I try to compile it I get the following error
SyntaxError: error evaluating function `darken`: Object #<Object> has no method 'toHSL' in W:\wamp\www\Bootstrap\less\test.less on line 12, column 2:
11 .alert-aliceblue {
12  .alert-variant(@alert-beige-bg; @alert-beige-border; @alert-beige-text);
13 }
if I change each of the '@state-xxx-text' variables to anything else, like the bootstrap defaults below, everything works fine.
/** beige**/
@state-beige-text: darken(@brand-beige, 5%);
@state-beige-bg: @brand-beige; 
@state-beige-border: darken(spin(@brand-beige, 10%), 50%);

/** gray**/
@state-gray-text: darken(@brand-gray, 5%);
@state-gray-bg: @brand-gray; 
@state-gray-border: darken(spin(@brand-gray, 10%), 50%);

I am sure I am doing something obviously wrong as I am just getting to grips with it. I thought it might be the syntax but have tried

@state-aliceblue-text: .textcolor(@brand-aliceblue);

@state-aliceblue-text: {textcolor(@brand-aliceblue)};

@state-aliceblue-text: {.textcolor(@brand-aliceblue)};


and all give the same result.


If anyone could ive any potential pointers, I would be grateful.







Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.