useTheme.ts

import { useState} from "react";
import photoshop from "photoshop";

type ThemeBrightness = "darkest"|"dark"|"light"|"lightest";

type UIColorKey = "kPanelBrightnessDarkGray"|
	"kPanelBrightnessMediumGray"|
	"kPanelBrightnessLightGray"|
	"kPanelBrightnessOriginal";

	/**
	 * batchPlay detects brightness change and
	 * returns theme brightness.
	 * @returns {UIColorKey}
	 */
export const getTheme = async () => {
	const result = await photoshop.action.batchPlay(
		[
			{
				"_obj": "get",
				"_target": [
					{"_property": "kuiBrightnessLevel"},
					{"_ref": "application", "_enum": "ordinal", "_value": "targetEnum"}
				],
				"_options": {"dialogOptions": "dontDisplay"}
			}
		],
		{"synchronousExecution": true});
  
	const pinned = result[0].kuiBrightnessLevel._value;
  
	return pinned;
};

/**
 * register event 
 * @param setTheme 
 */
export const photoshopUiEvent = async (setTheme) => {
	photoshop.action.addNotificationListener(["modalStateChanged"], async (event, descriptor) => {
		setTheme(await getTheme());
	});
};

/**
 * switch from UIColorKey to ThemeBrightness
 * @param {UIColorKey} key 
 * @returns {ThemeBrightness}
 */
const setThemeColor = (key:UIColorKey):ThemeBrightness => {
	switch (key) {
		case "kPanelBrightnessDarkGray":
			return "darkest";

		case "kPanelBrightnessMediumGray":
			return "dark";

		case "kPanelBrightnessLightGray":
			return "light";

		case "kPanelBrightnessOriginal":
			return "lightest";
	}
}

/**
 * custom hook
 * @returns {theme, setTheme}
 */
export const useTheme = () => {
	const [theme, setTheme] = useState<ThemeBrightness>("light");
	const setColor = (key:UIColorKey) => {
		setTheme(setThemeColor(key));
	};
	return {
		theme,
		setColor
	};
};

wrapper.tsx

import React, { useEffect } from "react";

import '@spectrum-web-components/theme/src/themes.js';

import '@spectrum-web-components/theme/src/express/themes.js';

import "@spectrum-web-components/theme/scale-medium.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import { Theme } from "@swc-react/theme";

import { useTheme, getTheme, photoshopUiEvent } from "../useTheme/useTheme";
import { App } from "./basicPanel";

const WrapperApp = () => {
	// custom hook
	const {
		theme,//"darkest"|"dark"|"light"|"lightest" SWC theme brightness
		setColor
	} = useTheme();
	useEffect(() => {
		(async () => {
			setColor(await getTheme());
		})();
		photoshopUiEvent(setColor);//register event and panel detects brightness change on UI
	},[]);
	// APP is something component
	return (
	    <Theme theme="spectrum" scale="medium" color={theme}>
	      <App />
	    </Theme>
	)
}