jan/web/screens/Settings/Appearance/ToggleTheme.tsx

import { useTheme } from 'next-themes'

import { motion as m } from 'framer-motion'
import { twMerge } from 'tailwind-merge'

const themeMenus = [{ name: 'light' }, { name: 'dark' }, { name: 'system' }]

export default function ToggleTheme() {
  const { theme: currentTheme, setTheme } = useTheme()

  const handeleNativeTheme = async (val: string) => {
    switch (val) {
      case 'light':
        return await window?.electronAPI.setNativeThemeLight()
      case 'dark':
        return await window?.electronAPI.setNativeThemeDark()
      default:
        return await window?.electronAPI.setNativeThemeSystem()
    }
  }

  return (
    <div className="flex items-center space-x-1">
      {themeMenus.map((theme, i) => {
        const isActive = currentTheme === theme.name
        return (
          <div className="relative" key={i}>
            <button
              className={twMerge(
                'px-2 py-1 font-semibold capitalize',
                !isActive && 'opacity-50'
              )}
              onClick={async () => {
                setTheme(theme.name)
                handeleNativeTheme(theme.name)
              }}
            >
              {theme.name}
            </button>
            {isActive ? (
              <m.div
                className="absolute inset-0 h-full w-full rounded-md border border-primary/50 bg-primary/20"
                layoutId="active-theme-menu"
              />
            ) : null}
          </div>
        )
      })}
    </div>
  )
}