react-toggle-component/srcdocs/theming.mdx

A React UI Component to display an awesome Toggle Button control

---
name: Theming
route: /theming
---
import { Playground, Props } from 'docz'
import Toggle from '../src/components/Toggle'
import ReactToggleThemeProvider from '../src/theme/'

# 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

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

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

Now you can also change others appearance properties

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

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

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

<Playground>
  <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"/>
</Playground>

You can also change the size and the border

<Playground>
  <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"/>
</Playground>

Of course, you can set the knob gap

<Playground>
  <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"/>
</Playground>

## Theme Provider

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

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

The current default theme is the following

```jsx
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",
};
```

<Playground>
  <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>
</Playground>

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.