menu
Channels
# All channels
view-forward
# General
view-forward
# Help me
view-forward
# Requests
view-forward
Team

Evergreen Component Theming

March 26, 2019 at 8:01pm

Evergreen Component Theming

March 26, 2019 at 8:01pm
I'm wondering how to change the theming on certain components from Evergreen. For example, I'm looking to change the the background colors on components like Switch or active Tabs etc.
I know theming support will be available in v5 but not sure when that is slated to be released.

May 3, 2019 at 4:47am
I've passed the "background" prop which seems to work.
  • reply
  • like

May 9, 2019 at 7:25pm
You can pass almost every css property as a prop. Evergreen heavily uses ui-box so almost anything you can do with Box you can do with an Evergreen component. I'd recommend checking the docs on propTypes to get a clear understanding of which components extend Box allowing you to pass these css-in-js props through.
For more advanced cases you can use the ThemeProvider and pass it a theme, similar to the (exported) defaultTheme.
  • reply
  • like

July 25, 2019 at 11:43am
I'm still not sure how to change background color of a EverGreen component. For instance, I have a <Button> that I would like to change it background color to red. How can I pass this property to the Button component? If can you actually write the code it will be great :)
  • reply
  • like

August 1, 2019 at 12:09pm
add a backgroundColor prop to the button?
  • reply
  • like

October 18, 2019 at 7:09am
<Button appearance="primary" background="red"> Button </Button>
  • reply
  • like