@pengoose/theme

@pengoose/theme is a module that provides a theme (color palette) that can be used in React and Next.js projects. This module can be used in conjunction with CSS-in-JS libraries like styled-components and emotion.

Installation

npm install @pengoose/theme

yarn add @pengoose/theme

darkTheme

Color

| name | color | | ----------- | ------------------------------------------------------------------------------------------------------------- | | primary | #30B198 | | secondary | #FFC857 | | accentColor | #EF476F | | default | #E2E2E2 | | light | #A4A5B2 | | transparent | #F5F6F7 (RGBA: rgba(245, 246, 247, 0.65)) | | border | #2C2D3C |

Background

| name | color | | ----------- | ------------------------------------------------------------------------- | | default | #191A23 | | primary | #14141C | | secondary | #181821 | | tertiary | #393A49 | | quaternary | #82838F | | quinary | #4F5060 | | transparent | #21232E | | hover | #1C1D2A |

lightTheme

Color

| name | color | | ----------- | ---------------------------------------------------------------------------------------------------------- | | primary | #30B198 | | secondary | #FFC857 | | accentColor | #EF476F | | default | #191A23 | | light | #E0E0E0 | | transparent | #191A23 (RGBA: rgba(25, 26, 35, 0.65)) | | border | #C9D5DB |

Background

| name | color | | ----------- | ------------------------------------------------------------------------------------------------------------- | | default | #F8FAFB | | primary | #F0F1F5 | | secondary | #E2E2E2 | | tertiary | #C9D5DB | | quaternary | #B0BEC5 | | quinary | #90A4AE | | transparent | #F5F6F7 (RGBA: rgba(245, 246, 247, 0.65)) | | hover | #F0F1F5 |

Usage

import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from '@pengoose/theme';
import { Components } from './yourComponents';

function App() {
  const [isDark, setIsDark] = useState(true);

  const toggleTheme = () => {
    setIsDark((prev) => !prev);
  };

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <button onClick={toggleTheme}>Toggle theme</button>
      <Components />
    </ThemeProvider>
  );
}

export default App;

You can use the theme by passing the theme object to the theme props of the ThemeProvider provided by styled-components or emotion. :)

import styled from 'styled-components';

const Component = styled.div`
  background: ${({ theme }) => theme.background.default};
`;