lm-tauri/src/App.tsx

import { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/tauri";
import { Event } from "@tauri-apps/api/event";

import useTauriEvent from "./hooks/useTauriEvent";
import "./App.css";

function App() {
  const [currentTheme, setCurrentTheme] = useState('')

  // Tell rust to change the theme (async)
  const changeTheme = (theme: string) => 
    invoke('plugin:config|set_application_theme', {theme})

  // On first render, query the current theme (async)
  useEffect(() => {
    invoke('plugin:config|get_application_theme')
      .then((theme : unknown) => {
        if (typeof theme === 'string')
          setCurrentTheme(theme)
      })
  }, [])

  // On theme update events, update the React UI state
  useTauriEvent('theme-change', ({payload: theme} : Event<string>) => {
    setCurrentTheme(theme)
  }, [])

  return (
    <div className="container">
      <h1>Welcome to Tauri!</h1>

      <div className="row">
        Quick and dirty example of manipulating state in the Rust layer,
        and getting events back
      </div>

      <div className="row">
        <p>Application theme: {currentTheme}</p>
      </div>
      <div className="row">
        <p>
          <button onClick={() => changeTheme('dark')}>dark</button>
          <button onClick={() => changeTheme('light')}>light</button>
        </p>
      </div>
    </div>
  );
}

export default App;