Theme Plugin

The Floro Theme Plugin is easiest to demonstrate & learn with video (see the demo video below). If you already know how the plugin works, please feel free to continue to the integration instructions.

Integrating Themes

We currently have integration documentation and instructions for React and React Native projects. While our React documentation uses Remix and Next for the example apps, most of the logic can be easily ported to any other React or React SSR project. Remix has far better (optimized) SSR support than Next, if you are looking to add support to an Express/React, we would strongly recommend using the Remix Demo for reference.

Despite only having Javascript integration instructions, Floro & the Theme Plugin are programming language & runtime agnostic. For custom integrations, you can use the Theme Generator we use in both demos or write your own custom generator.

Please use the Demo Repositories to find references to the platform specific APIs.

Features & Benefits

  • Standardize & centralize colors from your Palette Plugin.
  • Get Type-Safe themes
  • Supports variants - Create variants of your theme to apply to different states (e.g. "hovered", "selected", "focused")
  • Allow designers to try out different color schemes on your live app or website
  • Universal API makes theme easily portable to DAM systems.
  • Make rebrands a breeze - When you centralize your palette & themes, updating your theme takes minutes rather than months.

Demo Video

The majority of the documentation can be found in the Github demo repositories shown above. This video is meant to show the general development flow of working with the Theme Plugin. However, the API details depends on the specific platform Floro is being used in.