React Toggle
Edit page
Code of conduct
Components
Get StartedThemingHow change the toggle appearanceNew appearance propsTheme ProviderUpgrade Guide

Theming

This new version allow to change the whole toggle appearance. Now you'll be able to change every single color and size, for each single toggle component of for the whole user interface.

How change the toggle appearance

You may change the toggle appearance in two way: by using the new props for each single instance of your toggle component, or by using a theme provider.

New appearance props

You may use the new props to change the appearance for a single instance of component

Change the background

Change the background when on

Now you can also change others appearance properties

Change the shape

Change the width size

Change the height size

Change the knob size

You can also change the size and the border

Change the border size

Of course, you can set the knob gap

Change the border size

Theme Provider

Instead of change every single props, you might use the ReactToggleThemeProvider

import {ReactToggleThemeProvider} from "react-toggle-component";

The current default theme is the following

export default {
  version: "1.0.0",
  width: "48px",
  height: "24px",
  borderWidth: "2px",
  borderColor: "#aaa",
  leftBorderColor: "#aaa",
  rightBorderColor: "#3887b7",
  leftBackgroundColor : "#fff",
  rightBackgroundColor : "#fff",
  backgroundColorDisabled : "#eee",
  radius : "256px",
  radiusBackground : "256px",
  knobRadius : "100%",
  knobWidth : "16px",
  knobHeight : "16px",
  knobGap: "4px",
  knobColor: "#aaa",
  leftKnobColor: "#aaa",
  rightKnobColor: "#3887b7",
};

All toggle children will use the same theme

As you can see from the above example, you don't need to write your own custome theme with all properties, you may override one or more properties.