reaction-generic-theme

Generic Theme for Reaction Commerce

This is a very simple theme for you to get started with Reaction Commerce.

Usage

To get started fork this and create a new branch for your project.

Then choose whether or not you are using a dark background or a light background, by editing this line from main.less

@import "./dark.less";

If using a dark theme you leave it alone, if light, comment out the dark line (or delete it) like so:

//@import "./dark.less";

You can also delete the corresponding file. The only difference between this file and the original variables.less is that black/white, and lighten/darken are inversed in the dark.less file.

Now choose a color from the colors folder, and replace colors.less with it, and/or edit it to your hearts content.

In this file there is one main color you need to choose:

// All other colors will be derived from this one
@primary: green;

From there we can derive the complementary, triadic, and a few relatives, and 90 degress left and right:

//derived
@complementary: spin(@primary, 180);
@triadic-secondary: spin(@primary, 120);
@triadic-tertiary: spin(@primary, 240);
@brother: spin(@primary, 30);
@sister: spin(@primary, 330);
@father: spin(@primary, 60);
@mother: spin(@primary, 300);
@right: spin(@primary, 90);
@left: spin(@primary, 270);

// context
@warning: @left;
@danger: @right;
@disabled: #555;

@info: @father;
@success: @mother;
@hover: @brother;
@active: @sister;

That's it, all other colors should be derived from the those above.

Design

I have a very minimalist approach of, if a dark theme just copy in variables.less from the default-theme in reaction iteslf and do the inversions. See the Makefile if you want to see the sed statements.

Then I copied the colors section out and put it in overrides.less and replaced everything there with a derived color from colors.less

Ideally, eventually you will only edit colors.less for any color changes you might want to make. But we'll see how that works out

And I have added a custom.less in which you can add any customizations you like. And to show you how to add it to main.less

colors

This directory contains alternates for colors.less

fullcolors

This directory can be generated with the Makefile make fullcolors and like colors it contains many alternates for colors.less

color.sh

you can use this script to make a new color and add it to the colors directory like so ./color.sh $COLOR_NAME #COLOR e.g.

./color.sh fuscia "#ff00ff"

or:

./color.sh pink pink

bgcolor.sh

Would you rather choose by background color instead?

./bgcolor.sh fuscia "#ff00ff"

submit PRs with your favorites!