@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
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};
`;
