nano-theme

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

npm i nano-theme

Usage

First you might want to reset the global CSS.

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

Now use the rule utility to create CSS classes.

import {rule} from 'nano-theme';

const className = rule({
  color: 'red',
  fontSize: 16,
  '@media screen and (min-width: 768px)': {
    color: 'blue',
  },
});

You can use shorthand "atoms":

import {rule} from 'nano-theme';

const className = rule({
  col: 'red',
  fz: 16,
  '@media screen and (min-width: 768px)': {
    col: 'blue',
  },
});

Create CSS animations.

import {keyframes} from 'nano-theme';

const animationName = keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

Import various theming helpers.

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

React Usage

React integration is also provided:

import {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.

<Provider theme={'light'}>
  <GlobalCss />
  <MyApp />
<Provider/>

The useTheme hook returns the current theme.

const theme = useTheme();

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

useRule example:

const MyComponent = () => {
  const className = useRule({
    col: 'red',
    fz: 16,
    '@media screen and (min-width: 768px)': {
      col: 'blue',
    },
  });

  return <div className={className}>Hello</div>;
};

makeRule example:

const useClassName = makeRule({
  color: 'red',
  fontSize: 16,
  '@media screen and (min-width: 768px)': {
    color: 'blue',
  },
});

const MyComponent = () => {
  const className = useClassName();
  
  return <div className={className}>Hello</div>;
};