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