Sun and Moon Toggle

Use it on your site

import { useRive } from '@rive-app/react-canvas';

export function ToggleSunMoon() {
  const { rive, RiveComponent } = useRive({
    src: '/toggle-theme.riv',
    artboard: 'Toggle Sun Moon',
    stateMachines: 'State Machine',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.color('onColor').value = 0xFFFC800C;

  return <RiveComponent style={{ width: '100%', height: 400 }} />;
}

Inputs: on, onColor, offColor, outline. All on the ToggleTheme view model.

How it's built

Part of the Toggle Icon Set: ten juicy 3D icons, each with one switch. Bind on to your app's state and the icon plays its animation whenever it changes. Both colours come from data, and outline swaps the off state for a clean outline.

1. 1
   One switchon is a boolean on the view model. Set it from your app, or let a tap flip it.
2. 2
   The shading follows any colourEvery shaded tone is the bound colour with a light or dark layer on top, so any on or off colour keeps the 3D look.
3. 3
   The swap hides in the squashThe icon changes at the bottom of the squash, so you never see the two states on top of each other.
4. 4
   Outline when offoutline swaps the off state for a clean outline drawn from the same icon.