Customising Styles

The widget provides props to apply a custom accent color and also a custom font family.

Colors

For consistency sake, Flexy provides just one prop for customising the accent color. If you wish to change the accent color from Flexy's default primary color to your app's theme color, for example #FC72FF all you have to do is demonstrated below:

export const YourApp = () => {
  return (
    <Flexy
      /* other props */
      accentColor="#FC72FF"
    />
  )
};

However, If you wish to further customise the theme colors, here's a list of all css color variables used by the widget, you can overwrite them in your global css file or a custom css file using the :root selector.

--flexy-primary
--flexy-white
--flexy-black
--flexy-danger
--flexy-warning
--flexy-success
--flexy-gray-75
--flexy-gray-90
--flexy-gray-100
--flexy-gray-200
--flexy-gray-300
--flexy-gray-400
--flexy-gray-500

Font Family

You can pass in a custom css font using the fontFamily prop as shown below.

export const YourApp = () => {
  return (
    <Flexy
      ...other props
      fontFamily="monospace"
    />
  )
};

Dark/Light Mode

By default, the widget follows system settings for light/dark modes. You can enforce a single mode (light only or dark only) by using the theme prop as shown below.

export const YourApp = () => {
  return (
    <Flexy
      ...other props
      theme="dark"
    />
  )
};