/ plugins / oled-theme-luna / src / Settings.tsx
Settings.tsx
 1  import { ReactiveStore } from "@luna/core";
 2  import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
 3  import React from "react";
 4  
 5  export const settings = await ReactiveStore.getPluginStorage("OLEDTheme", {
 6  	qualityColorMatchedSeekBar: true,
 7  	oledFriendlyButtons: true,
 8  	lightMode: false,
 9  });
10  
11  export const Settings = () => {
12  	const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] = React.useState(settings.qualityColorMatchedSeekBar);
13  	const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(settings.oledFriendlyButtons);
14  	const [lightMode, setLightMode] = React.useState(settings.lightMode);
15  	
16  	return (
17  		<LunaSettings>
18  			<LunaSwitchSetting
19  				title="Quality Color Matched Seek Bar"
20  				desc="Color the Seek/Progress Bar based on audio quality"
21  				checked={qualityColorMatchedSeekBar}
22  				onChange={(_, checked) => {
23  					console.log("Quality Color Matched Seek Bar:", checked ? "enabled" : "disabled");
24  					setQualityColorMatchedSeekBar((settings.qualityColorMatchedSeekBar = checked));
25  					// Update styles immediately when setting changes
26  					if ((window as any).updateOLEDThemeStyles) {
27  						(window as any).updateOLEDThemeStyles();
28  					}
29  				}}
30  			/>
31  			<LunaSwitchSetting
32  				title="OLED Friendly Buttons"
33  				desc="Remove button styling from OLED theme to keep buttons with original Tidal appearance"
34  				checked={oledFriendlyButtons}
35  				onChange={(_, checked) => {
36  					console.log("OLED Friendly Buttons:", checked ? "enabled" : "disabled");
37  					setOledFriendlyButtons((settings.oledFriendlyButtons = checked));
38  					// Update styles immediately when setting changes
39  					if ((window as any).updateOLEDThemeStyles) {
40  						(window as any).updateOLEDThemeStyles();
41  					}
42  				}}
43  			/>
44  			<LunaSwitchSetting
45  				title="Light Mode | Experimental"
46  				desc="Use the light theme instead of the dark theme. This is experimental and may not work as expected."
47  				checked={lightMode}
48  				onChange={(_, checked) => {
49  					console.log("Light Mode:", checked ? "enabled" : "disabled");
50  					setLightMode((settings.lightMode = checked));
51  					// Update styles immediately when setting changes
52  					if ((window as any).updateOLEDThemeStyles) {
53  						(window as any).updateOLEDThemeStyles();
54  					}
55  				}}
56  			/>
57  		</LunaSettings>
58  	);
59  };