Reaction Generic Theme


#1

After talking about theming this morning in the CC, I determined I would not wait around on someone else to make a generic theme. And while I was at it I’d make a very basic theme that did not have hundreds of places for you to hunt down colors in order to change the basics like background, foreground, and a handful of other colors. And supported dark themes. I’d love some feedback on what sorts of things should be included in a ‘generic’ theme.

Right now, I am just abstracting the color space, but I’m open to more. Send issues, requests, PRs etc there at the github repo


#2

excuse my less noobishness, I know what less is, I’ve seen it in the past, but I chose sass at one point (I gave sass a try in reaction but the path of least resistance seems the better choice atm). Anyhow, I found the spin command last night and had to do more derivation. So now it works by defining a @primary and then it derives some colors from there, and then I have a few contexts:

// All other colors will be derived from this one
@primary: lightyellow;
//derived
@complementary: spin(@primary, 180);
@triadic-secondary: spin(@primary, 120);
@triadic-tertiary: spin(@primary, 240);
@right: spin(@primary, 60);
@left: spin(@primary, 300);


// context
@warning: @triadic-secondary;
@danger: @triadic-tertiary;
@disabled: #555;

@info: lighten(@left, 11%);
@success: lighten(@right, 11%);
@hover: @right;
@active: @left;

I’m kind of waffling at this point on the ‘where’ of everything. But for the most part it works, and I now have few colors I can show people to get their creative wheels turning. I’ve seen a few posts in the chat lately, on how to add a footer, and maybe marketplace changing that a bit. Does anyone have any input on that? And how I might give a best practices example here in this generic theme?


#3

Hey @thoth,

Not sure if I understand correctly your first comment, but there shouldn’t be hundreds of places to hunt down colors. All our colors are in a single file, variables.less, which can be found here: https://github.com/reactioncommerce/reaction/blob/master/imports/plugins/included/default-theme/client/styles/variables.less

Hope that points you in the right direction while theming.


#4

Sorry I did not mean to imply that Reaction Commerce was as bad as gitlab or some of the other egregious offenders of senseless, meaningless, and useless use of color variants. However, there are still 71 colors defined within that variables.less

grep '#' variables.less |grep -v '##'|wc -l
71

In mine there is one single place to define the primary color! All other colors are derived from that single color, not that I recommend someone end up theming their site in such a fashion. But it does make it much easier to try on a bunch of different themes and get people to assert their preferences through choice.

If you look on this page you can see most of my files are derived or relate to the variables.less that you mention. I give my reasons for making each file there in the readme. Notice there is a Makefile there that generates the dark.less file from variables.less file among other things. I welcome discussion, PRs, issues, requests, etc there.

Thanks for looking and giving me some feedback!