MaterialUI's Dark Elevation Calculation
This package helps you calculate proper elevation within your dark theme.
Usage
// 1. Define your theme
import { generate } from "@alvincrespo/mui-dark-elevation";
const colors = generate();
const theme = {
dark: {
background: {
colors: {
...colors
}
}
}
};
// 2. Create the styles for your component
export const Styles = {
Container: styled.div`
background: ${props => props.theme.background.colors.dp_01};
padding: 2rem;
max-width: 520px;
width: 100%;
margin: 0 auto;
`
}
// 3. Implement styled component
import React from 'react';
export const Login = () => (
<Styles.Container>
{/* do stuff here */}
</Styles.Container>
);