Create sophisticated themes in React JS. Fast. Without even knowing CSS

Version #2 main changes:

1. Fully custom config. Not necessary to use 'md', 'sm', 'lg', 'faint', 'base' etc as variable names any more. You can add your own name in config file and use it.

2. Almost completely removed usage of css files. Now styles are being attached directly to header.

3. Get rid of CSS variables. Now we use variables directly from JS.

Documentation and demo

Documentation is in progress.

Sorry for the lack of documentation, it's in progress. But all the components are ready to use. Feel free to ask any questions dev@opium.pro

---

npm i themeor

Here you can find a description of color concept: Standardization of color schemes through the eyes of a programmer But this concept is not obligatory to use, you can set your own colors in config.customVariables

For fast start download the demo config file

And optionally the dark theme file

---

Here is how you can use it:

importReactfrom'react'importthemefrom'./theme-light.json'// here is your config fileimportdarkThemefrom'./theme-dark.json'// if you set 'darkConfig' prop, dark theme on user's computer will be detected automaticallyimport{Theme,Box,Font,Line,Fit,Align,Gap}from'themeor'exportdefaultfunctionApp(){return(<Themeconfig={theme}darkConfig={darkTheme}reset><Fontsize="xl"weight="700">Imagine that I am your app</Font><Gap/><Linefill="faint"/><Gap/><AlignrowgapHor="md"vert="center"><Boxfill="accent"strong><Gapvert="sm"hor="x2l"><Fontsize="sm"weight="700"uppercase>Text #1</Font></Gap></Box><Line.TryTaglessfill="critic"><Boxfill="critic"radius="max"><Gap><Fontfill="critic">Text #2</Font></Gap></Box></Line.TryTagless><Boxfill="base"strongradius="md"><Fitwidth="300px"><Gapsize="sm"><Fontunderlinealign="center">Text #3</Font></Gap></Fit></Box></Align></Theme>)}