import React , { useEffect , useState } from 'react' ; import { Button , ButtonProps , Circle , YStack } from 'tamagui' ; const colors = [ 'blue' , 'pink' , 'green' , 'red' , 'orange' , 'violet' , 'purple' ] ; const tint = 0 ; const listeners = new Set < Function > ( ) ; export const useTint = ( ) => { const [ colorI , setColorI ] = useState ( tint ) ; const color = colors [ colorI ] ; useEffect ( ( ) => { const updateVal = ( next ) => setColorI ( next ) ; listeners . add ( updateVal ) ; return ( ) => { listeners . delete ( updateVal ) ; } ; } , [ ] ) ; return [ color , ( next ) => { const i = colors . indexOf ( next as any ) ; setColorI ( i ) ; listeners . forEach ( ( x ) => x ( i ) ) ; } , ] as const ; } ; export const ColorToggle = ( props ) => { const [ tint , setTint ] = useTint ( ) ; const nextIndex = ( colors . indexOf ( tint ) + 1 ) % colors . length ; const next = colors [ nextIndex ] ; return ( < Button chromeless onClick = { ( ) => setTint ( next ) } { ... props } aria - label = "toggle a light and dark color scheme" > < YStack m = { 2 } width = { 5 } height = { 5 } borderRadius = { 100 } backgroundColor = { tint } / > < /Button>); } ;