@invisionag/iris-theme
v3.0.17
Published
## themes
Downloads
48
Maintainers
Keywords
Readme
@invisionag/iris-theme
themes
You need to wrap your application in a ThemeProvider
from styled-components
, like this:
import { ThemeProvider } from 'styled-components';
import themes from '@invisionag/iris-theme';
import { render } from 'react-dom';
render(
<ThemeProvider theme={themes.injixo}>
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
As of now, a theme consists of the following structure:
const theme = {
settings, // settings from iris-settings
colors, // colored mappings, like primary.text or danger.background.
baseColors, // raw colors like blue100, accent120, black80 etc, the same package as iris-colors
tools, // iris-tools
name: 'injixo',
};
withDefaultTheme
You can wrap your components with this function to set the injixo
default Theme.
import styled from 'styled-components';
import { withDefaultTheme } from '@invisionag/iris-theme';
const StyledDiv = withDefaultTheme(styled.div`
border-radius: ${({ theme }) => theme.settings.radiusTiny};
`);
Behind the scenes, this sets the theme in the defaultProps
of the component.