marshallmurphy

//...
return (
    <div className={`${styles.App} + ' ' + ${darkMode ? styles.darkBg : styles.lightBg}`}> // here
      <div onClick={() => animate()}>
        <Lottie 
          options={defaultOptions}
          height={400}
          width={400}
          isClickToPauseDisabled={true}
          playSegments={sequence}

marshallmurphy

//...

if (stop === 1 || stop === 90) {
  start = 0;
  stop = 60;
  setDarkMode(true) // here
} else {
  start = 60;
  stop = 90;
  setDarkMode(false) // and here

marshallmurphy

//...

import styles from './App.module.css';
function App() {
  const [darkMode, setDarkMode] = useState(false) // here
  const [sequence, setSequence] = useState({
    segments: [0, 1],
    forceFlag: true
  })
  

marshallmurphy

import React, { useState } from 'react';
import Lottie from 'react-lottie-segments';
import animationData from './lotties/toggle.json';
import styles from './App.module.css';  // here

//...

marshallmurphy

.App {
  text-align: center;
  min-height: 100vh;
  transition: background-color 1s;
}
.darkBg {
  background-color: #282c34;
}
.lightBg {
  background-color: #fff;

marshallmurphy

const animate = () => {
  let start = sequence.segments[0];
  let stop = sequence.segments[1];
   
  if (stop === 1 || stop === 90) {
    start = 0;
    stop = 60;
  } else {
    start = 60;
    stop = 90;

marshallmurphy

const animate = () => {
  let start = sequence.segments[0];
  let stop = sequence.segments[1];
   
  // here
  if (stop === 1 || stop === 90) {
    start = 0;
    stop = 45;
  } else {
    start = 45;

marshallmurphy

const animate = () => {
  let start = sequence.segments[0];
  let stop = sequence.segments[1];
  
  
  // do stuff here
  
  
  setSequence({ 
    segments: [start, stop],

marshallmurphy

//...

const options = {
  loop: false,
  autoplay: false,
  animationData: animationData,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice"  
  }
};

marshallmurphy

//...

const options = {
  loop: false,
  autoplay: false,
  animationData: animationData,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice"  
  }
};