Styled-component has an elegant theme implementation that can contain our custom theme information in props. After a simple function wrapped, we can easily introduce the theme in each styles file. like:
Export const RespectText = styled.div`
Color: ${theme('editor.placeholder')};
Display: block;
`The key value of the theme can refer to utils/theme/skils/cyan.js
Const cyan = {
Name: 'cyan',
logoText: descText,
Cover: primaryColor,
coverIndex: '#F9FCFC',
contrastFg: '#eca014',
htmlBg: bannerBg,
Loading: {
Basic: bannerBg,
Animate: lighten(0.03, bannerBg),
},
Error: {
Title: primaryColor,
Desc: darken(0.1, primaryColor),
Bg: lighten(0.02, contentBoxBg),
},
....All the topics currently supported are under utils/theme/skins and will continue to expand in the future.
Skins/
├── cyan.js
├── github.js
├── green.js
├── index.js
├── iron_green.js
├── monokai.js
├── purple.js
├── solarized_dark.js
└── yellow.js
