nano-theme

A light and opinionated distribution of nano-css. It ships all necessary dynamic tooling for most CSS-in-JS use cases, while in very lightweight packaging. nano-theme also ships predefined light and dark themes. As well as colorful color palette, predefined breakpoints and global CSS reset.

Installation

1npm i nano-theme

Usage

First you might want to reset the global CSS.

1import 'nano-theme/lib/global-reset';

Now use the rule utility to create CSS classes.

1import {rule} from 'nano-theme';
2
3const className = rule({
4  color: 'red',
5  fontSize: 16,
6  '@media screen and (min-width: 768px)': {
7    color: 'blue',
8  },
9});

You can use shorthand "atoms":

1import {rule} from 'nano-theme';
2
3const className = rule({
4  col: 'red',
5  fz: 16,
6  '@media screen and (min-width: 768px)': {
7    col: 'blue',
8  },
9});

Create CSS animations.

1import {keyframes} from 'nano-theme';
2
3const animationName = keyframes({
4  from: {
5    opacity: 0,
6  },
7  to: {
8    opacity: 1,
9  },
10});

Import various theming helpers.

1import {theme, font, colors, b1, b2, b3, b4} from 'nano-theme';

React Usage

React integration is also provided:

1import {Provider, GlobalCss, useTheme, useRule, makeRule} from 'nano-theme';

The Provider components sets the theme for the entire application. And GlobalCss component applies some global CSS, based on the current theme.

1<Provider theme={'light'}>
2  <GlobalCss />
3  <MyApp />
4<Provider/>

The useTheme hook returns the current theme.

1const theme = useTheme();

The useRule hook and makeRule function are used to dynamically create CSS classes at render-time.

useRule example:

1const MyComponent = () => {
2  const className = useRule({
3    col: 'red',
4    fz: 16,
5    '@media screen and (min-width: 768px)': {
6      col: 'blue',
7    },
8  });
9
10  return <div className={className}>Hello</div>;
11};

makeRule example:

1const useClassName = makeRule({
2  color: 'red',
3  fontSize: 16,
4  '@media screen and (min-width: 768px)': {
5    color: 'blue',
6  },
7});
8
9const MyComponent = () => {
10  const className = useClassName();
11  
12  return <div className={className}>Hello</div>;
13};