search

bootstrap-styled / v4

:rocket: twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities
https://bootstrap-styled.github.io/v4
MIT License
117 stars 22 forks source link

Theme Support #197

Closed StuartMorris0 closed 4 years ago

StuartMorris0 commented 4 years ago

v4

Description

Hello, I am struggling to find any documentation around themes, other than https://bootstrap-styled.github.io/bootstrap-styled/#/Themes?id=section-personalizing

Are themes only used for overriding the standard Bootstrap variables or can you add your own custom ones as well?

For example, we might have an additional colour block:

colors: {
   reds: {
     red1: '#000',
     red2: '#1111',
  }
}

Can these new colour variables be used in a BoostrapProvider Theme, or do you need to combine a styled-components theme? Little confused as haven't found any documentation. Thanks

kopax commented 4 years ago

You can pass them directly to the <BootstrapProvider />, then you will use it: 

styled.div`
  ${props => `color: ${props.colors.theme.reds.red1};`}
`

When passing to BootstrapProvider, it will call the makeTheme from bootstrap-styled package. This will calculate the them using your value and applying some color calculation if that's what bootstrap was doing. If you wish to understand what the makeTheme does, I suggest you to read the source code, it is pretty simple and we also explain how to create your own makeTheme in the documentation.

Now this is said, you don't have to worry about theme calculation (makeTheme) if you set all your theme variable one by one. We recommend to export a theme and a makeTheme from all project you do with bootstrap-styled, by convention and to easily override what people add.

You are very free, this can result in big theme variable, but with high compatibility across packages.