React Toggle
Edit page
Code of conduct
Components
Get Started Theming
How change the toggle appearance New appearance props Theme Provider Upgrade 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

<p>Change the background</p> <Toggle name="t-1" backgroundColor="rgba(0,0,0,1)" />

    <p>Change the background</p><Toggle name="t-1" backgroundColor="rgba(0,0,0,1)" />

Change the background when on

<p>Change the background when on</p> <Toggle name="t-2" rightBackgroundColor="tomato" />

    <p>Change the background when on</p><Toggle name="t-2" rightBackgroundColor="tomato" />

Now you can also change others appearance properties

Change the shape

<p>Change the shape</p> <Toggle name="t-3" radius="3px" radiusBackground="2px" knobRadius="2px" />

    <p>Change the shape</p><Toggle name="t-3" radius="3px" radiusBackground="2px" knobRadius="2px" />

Change the width size

<p>Change the width size</p> <Toggle name="t-4" width="128px" />

    <p>Change the width size</p><Toggle name="t-4" width="128px" />

Change the height size

<p>Change the height size</p> <Toggle name="t-4h" height="48px" />

    <p>Change the height size</p><Toggle name="t-4h" height="48px" />

Change the knob size

<p>Change the knob size</p> <Toggle name="t-5" knobWidth="8px" knobHeight="8px" /> <Toggle name="t-6" radius="3px" radiusBackground="2px" knobRadius="2px" width="128px" knobWidth="50px" />

    <p>Change the knob size</p><Toggle name="t-5" knobWidth="8px" knobHeight="8px" /><Toggle  name="t-6"  radius="3px"  radiusBackground="2px"  knobRadius="2px"  width="128px"  knobWidth="50px"/>

You can also change the size and the border

Change the border size

<p>Change the border size</p> <Toggle name="t-7" borderWidth="1px" /> <Toggle name="t-8" borderWidth="3px" /> <Toggle name="t-9" borderWidth="5px" /> <Toggle name="t-10" borderWidth="5px" knobWidth="8px" knobHeight="8px" />

    <p>Change the border size</p><Toggle name="t-7" borderWidth="1px" /><Toggle name="t-8" borderWidth="3px" /><Toggle name="t-9" borderWidth="5px" /><Toggle name="t-10" borderWidth="5px" knobWidth="8px" knobHeight="8px" />

Of course, you can set the knob gap

Change the border size

<p>Change the border size</p> <Toggle name="t-11" borderWidth="1px" knobGap="8px" /> <Toggle name="t-12" borderWidth="3px" knobGap="8px" /> <Toggle name="t-13" borderWidth="5px" knobGap="8px" /> <Toggle name="t-14" borderWidth="5px" knobWidth="8px" knobHeight="8px" knobGap="8px" />

    <p>Change the border size</p><Toggle name="t-11" borderWidth="1px" knobGap="8px" /><Toggle name="t-12" borderWidth="3px" knobGap="8px" /><Toggle name="t-13" borderWidth="5px" knobGap="8px" /><Toggle  name="t-14"  borderWidth="5px"  knobWidth="8px"  knobHeight="8px"  knobGap="8px"/>

## 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

<ReactToggleThemeProvider theme={{ leftBackgroundColor: 'tomato' }}> <div> <p>All toggle children will use the same theme</p> <Toggle name="t-p1" /> <Toggle name="t-p2" /> <Toggle name="t-p3" /> <Toggle name="t-p4" /> </div> </ReactToggleThemeProvider>

    <ReactToggleThemeProvider theme={{ leftBackgroundColor: 'tomato' }}>  <div>    <p>All toggle children will use the same theme</p>    <Toggle name="t-p1" />    <Toggle name="t-p2" />    <Toggle name="t-p3" />    <Toggle name="t-p4" />  </div></ReactToggleThemeProvider>

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.