Maps and themes - css

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.

Answer 1

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.

Answer 2

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">
Light Theme<br> Light Theme
</div>
<div class="dark-theme">
Light Theme<br> Light Theme
</div>