Maps and themes

Question

I am new to using CSS pre-compilers and started using Less. I found Sass code to add themes to my web app and it works great.

https://codepen.io/dmitriy_borodiy/pen/RKzwJp

I am trying to convert it to Less and having difficulty rewriting it. I have gone through Less documentation but sorry to say that I am not even able to create a multilevel themes variable.

sass variable is as follows:

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd
  ),
);

Below conversion is totally wrong but this is what I have tried:

@set: {
  light: {
    backgroundColor: white,
    textColor: #408bbd
  },
  dark: {
    backgroundColor: #222,
    textColor: #ddd
  },
}

EDIT:

Example of what I am trying to achieve:

.theme(key) {  
    return all outcomes using @themes variable.  
}  

div {  
    background: .theme(divBackgroundColor)  
}   
  
it should return the following css :  
.light-theme div{  
    background: white  
}   
.dark-theme div{  
    background:grey  
}

Any help is appreciated.

For maps/objects see http://lesscss.org/features/#maps-feature. For the rest look various Q/A here by keywords "theme/theming" (they are a bit outdated as written for Less 2.x, but still enough to get the basic principles). — seven-phases-max, Mar 19 '19 at 15:57
Btw., I can write a ready-to-use solution answer. But honestly this will be against SO rules because your Q essentially is "help me to understand programming in one day" (it's just too many mistakes/wrong-assumptions in it) - there's no point in answering a complected thing before one learns the basics. So here's just a entry remark: Sass and Less are different programming languages (the *only* common thing is they are compiled into CSS) - there's no point in finding a Sass snippet if you need a Less solution (you have to have a good knowledge of *both* languages to perform a conversion). — seven-phases-max, Mar 20 '19 at 13:12
@seven-phases-max thanks for the inputs, the first link you gave helped me. Anyways, I have gone through less and sass docs but I guess it is too complex to figure out the conversion(as i said i am not much into css). I just decided to change to sass as i felt it was more developer friendly. But would love to know how it is written in less. — rohit reddy, Mar 21 '19 at 01:59
I think I'll provide an answer just to not leave it answered (and to have another ref. up-to-date "theming" A). Though here's no point in knowing a C++ solution if you're going to use Fortran and vice-versa. — seven-phases-max, Mar 22 '19 at 12:58

seven-phases-max · Accepted Answer · 2019-03-22T19:05:07.660

A question like this ...

... ("I'm learning a language X and I found some program in language Y that looks like what I need. How to do the same thing using X?") is pretty much impossible to answer in (and too broad for) the SO format, as soon as the snippet goes beyond a single distinct minimalistic statement/feature.

Either way, to not leave the Q unanswered: To be able to write a similar code in Less you will need to get familiar with the following features:

Maps
Rulesets as values/parameters
plus all typical language basic facilities like variables, functions, scope etc. etc. and the last (but not the least) Mixins.

Answering how to make something like background: .theme(backgroundColor) to do what you need would require explaining all of this from scratch (i.e. turning the answer into a book or a very loooong tutorial). Technically, you should not really be able to miss that the code in the linked snippet is a waaaaaay more complex than just background: .theme(backgroundColor).

And here's a (minimalistic) Less equivalent of the snipped at CodePen you pointed to. (No comments there. They are pointless since nothing magic happens in it - to understand what it does you just need to get familiar with the languages features I listed above):

@theme: {
    @light: {
        backgroundColor: white;
        textColor: #408bbd;
    }
    @dark: {
        backgroundColor: #222;
        textColor: #ddd;
    }
}

// ....................................
// usage:

.themify({
    div {  
        background: .theme[backgroundColor]; 
    }

    span {  
        color: .theme[textColor]; 
    }

    // etc.
}); 

// ....................................
// impl.:

.themify(@style) {
    each(@theme, {
        @name: replace(@key, '@', '.');
        .theme() {@value()}
        @{name}-theme {@style()}      
    });
}

For other possible techniques and solutions related to similar "Theming" use-cases see also:

Variables based on ancestor class
How to thematize in ...
and other Q/As linked/referenced there.

score 0 · Answer 2 · answered Mar 19 '19 at 05:41

0

Try this code

@light: #f9f9f9;
@dark: #333333;
.theme(@theme: @color, @background: @background) {
  color: @theme;
  background: @background;
  a {
    color: @theme;
  }
}

.light-theme {
  .theme(@theme: @light, @background: @dark);
}

.dark-theme {
  .theme(@theme: @dark, @background: @light)
}

<div class="light-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>

<div class="dark-theme">
  <a href="">Light Theme</a><br> Light Theme
</div>

answered Mar 19 '19 at 05:41

manish

1

Thanks for the answer. Your code does not serve my usecase, I want a function which takes key as input parameter and returns css with different theme defined in an object eg. div { background: .theme(divBackgroundColor) } it should return the following css : .light-theme div{ background: white } .dark-theme div{ background:grey } – rohit reddy Mar 19 '19 at 07:38

Maps and themes

2 Answers2