Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Theming

Add styles to your site using Theme UI and Style props.

Theme UI

Reflex uses Theme UI for styling. Theme UI is a CSS-in-JS library for creating constraint-based designs.

What this means is you create a shared set of values such as colors, font sizes, and spacing and then reference these values to build your site.

Here's a simple theme:

src/gatsby-theme-base/theme.js
export default {
colors: {
text: "#000",
background: "#fff"
primary: "#82aaff",
},
fontSizes: [14, 16, 18, 20, 22, 36, 56, 72],
}

You can then use values from this theme in your components.

<Button bg="primary" color="text" fontSize="2">
Styled button
</Button>

This will create a button with the following CSS styles:

{
background-color: "#82aaff", // --> colors.primary
color: "#000", // --> colors.text
font-size: "18px" // --> fontSizes[2]
}
CustomizationTheming

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github