React Color Set

Simple and useful tools for react.

//..
import { createGlobalStyle } from 'styled-components';
import { dark, light, accent, Reset, reset } from 'react-colorset';

const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${dark.backgroundDefault};
  }
`;

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle />
    <Reset />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Installation

Installation is done using the npm install command:

$ npm install react-colorset

Features

• Reset style
• Light color set
• Dark color set
• Accent color set

Reset style

All of reset css source are referenced the below. (Reference -> CSS Tools: Reset CSS)

// component way
import App from './App';
import { Reset } from 'react-colorset';

ReactDOM.render(
  <React.StrictMode>
    <Reset />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// css way
import App from './App';
import { reset } from 'react-colorset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  
  /* other styles */
`;

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Light color set

import styled from 'styled-components';
import { light } from 'react-colorset';

const Wrapper = styled.div`
  background-color: ${light.backgroundRoot};

  /* other styles */
`;

Dark color set

import styled from 'styled-components';
import { dark } from 'react-colorset';

const Wrapper = styled.div`
  background-color: ${dark.backgroundHighest};

  /* other styles */
`;

Accent color set

License

MIT

Reference

CSS Tools: Reset CSS