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

Let's start by creating a simple theme.

Create the following file in your site: src/@reflexjs/gatsby-theme-base/theme.js. This is where you are going to define your theme values.

Next, run gatsby clean && gatsby develop to clear caches and restart the development server.

We are going to start with the base preset and add custom some colors, fontSizes and lineHeights.

src/@reflex/gatsby-theme-base/theme.js
export default {
preset: base,
colors: {
text: "#000",
background: "#fff",
primary: "#2a9d8f",
secondary: "#e76f51",
},
fonts: {
body: '"Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: "Georgia, serif",
monospace: "Menlo, monospace",
},
}

Styling

Once you have created your theme, you can now use the theme values in any .mdx or React component.

<H1 fontFamily="heading" color="primary">
This is heading
</H1>
ThemingStyling

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github