Skip to main content

CSS Variables

Simple Toggle uses CSS variables to allow you to customize the look and feel of the component. The following variables are available:

--simple-toggle-border-color​

The border color of the toggle.

Default:

#9a9a9a

:root {
--simple-toggle-border-color: #9a9a9a;
}

--simple-toggle-border-color-checked​

The border color of the toggle when it is checked.

Default:

#9a9a9a

:root {
--simple-toggle-border-color-checked: #9a9a9a;
}

--simple-toggle-bg-color​

The background color of the toggle.

Default:

#fff

:root {
--simple-toggle-bg-color: #fff;
}

--simple-toggle-bg-color-checked​

The background color of the toggle when it is checked.

Default:

#fff

:root {
--simple-toggle-bg-color-checked: #fff;
}

--simple-toggle-marker-color​

The color of the toggle marker when it is unchecked.

Default:

rgba(0, 0, 0, 0.5)

:root {
--simple-toggle-marker-color: rgba(0, 0, 0, 0.5);
}

--simple-toggle-marker-color-checked​

The color of the toggle marker when it is checked.

Default:

rgb(0 108 219 / 52%)

:root {
--simple-toggle-marker-color-checked: rgb(0 108 219 / 52%);
}