TidaLuna-Plugins/plugins/obsidian-theme-luna/src/Settings.tsx

import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
import React from "react";

export const settings = await ReactiveStore.getPluginStorage("Obsidian", {
	qualityColorMatchedSeekBar: true,
	oledFriendlyButtons: true,
	lightMode: false,
});

export const Settings = () => {
	const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] =
		React.useState(settings.qualityColorMatchedSeekBar);
	const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(
		settings.oledFriendlyButtons,
	);
	const [lightMode, setLightMode] = React.useState(settings.lightMode);

	return (
		<LunaSettings>
			<LunaSwitchSetting
				title="Quality Color Matched Seek Bar"
				desc="Color the Seek/Progress Bar based on audio quality"
				checked={qualityColorMatchedSeekBar}
				onChange={(_, checked) => {
					console.log(
						"Quality Color Matched Seek Bar:",
						checked ? "enabled" : "disabled",
					);
					setQualityColorMatchedSeekBar(
						(settings.qualityColorMatchedSeekBar = checked),
					);
					// Update styles immediately when setting changes
					if ((window as any).updateObsidianStyles) {
						(window as any).updateObsidianStyles();
					}
				}}
			/>
			<LunaSwitchSetting
				title="OLED Friendly Buttons"
				desc="Adjusts the buttons to be more OLED friendly"
				checked={oledFriendlyButtons}
				onChange={(_, checked) => {
					console.log(
						"OLED Friendly Buttons:",
						checked ? "enabled" : "disabled",
					);
					setOledFriendlyButtons((settings.oledFriendlyButtons = checked));
					// Update styles immediately when setting changes
					if ((window as any).updateObsidianStyles) {
						(window as any).updateObsidianStyles();
					}
				}}
			/>
			<LunaSwitchSetting
				title="Light Mode | Experimental"
				desc="Use the light theme instead of the dark theme. This is experimental and may not work as expected."
				checked={lightMode}
				onChange={(_, checked) => {
					console.log("Light Mode:", checked ? "enabled" : "disabled");
					setLightMode((settings.lightMode = checked));
					// Update styles immediately when setting changes
					if ((window as any).updateObsidianStyles) {
						(window as any).updateObsidianStyles();
					}
				}}
			/>
		</LunaSettings>
	);
};