Added Settings for Oled-Theme to Quality Color Match SeekBar

plugins/oled-theme-luna/src/Settings.tsx

@@ -0,0 +1,29 @@
+import { ReactiveStore } from "@luna/core";
+import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
+import React from "react";
+
+export const settings = await ReactiveStore.getPluginStorage("OLEDTheme", {
+	qualityColorMatchedSeekBar: true,
+});
+
+export const Settings = () => {
+	const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] = React.useState(settings.qualityColorMatchedSeekBar);
+	
+	return (
+		<LunaSettings>
+			<LunaSwitchSetting
+				title="Quality Color Matched Seek Bar"
+				desc="Apply Tidals Default color styling for the seek bar for color mathcing with song 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).updateOLEDThemeStyles) {
+						(window as any).updateOLEDThemeStyles();
+					}
+				}}
+			/>
+		</LunaSettings>
+	);
+}; 

plugins/oled-theme-luna/src/index.ts

@@ -1,6 +1,8 @@
 import { LunaUnload, Tracer, ftch } from "@luna/core";
+import { settings, Settings } from "./Settings";
 
 export const { trace } = Tracer("[OLED Theme]");
+export { Settings };
 
 const themeUrl = "https://raw.githubusercontent.com/ItzzExcel/neptune-projects/refs/heads/main/themes/black-neptune-theme.css";
 
@@ -8,23 +10,51 @@ const themeUrl = "https://raw.githubusercontent.com/ItzzExcel/neptune-projects/r
 // clean up resources
 export const unloads = new Set<LunaUnload>();
 
+let originalStyle: string | null = null;
+let appliedStyleElement: HTMLStyleElement | null = null;
+
+// Function to apply theme styles based on current settings
+const applyThemeStyles = function(): void {
+    if (!originalStyle) return;
+    
+    // Remove existing style element if it exists
+    if (appliedStyleElement && appliedStyleElement.parentNode) {
+        appliedStyleElement.parentNode.removeChild(appliedStyleElement);
+    }
+    
+    let modifiedStyle = originalStyle;
+    
+    // Remove SeekBar coloring if Quality Color Matched Seek Bar is enabled
+    if (settings.qualityColorMatchedSeekBar) {
+        modifiedStyle = originalStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, '');
+        trace.msg.log("OLED theme applied with SeekBar coloring removed");
+    } else {
+        trace.msg.log("OLED theme applied with original SeekBar coloring");
+    }
+    
+    appliedStyleElement = document.createElement("style");
+    appliedStyleElement.type = "text/css";
+    appliedStyleElement.textContent = modifiedStyle;
+    document.head.appendChild(appliedStyleElement);
+};
+
+// Make this function available globally so Settings can call it
+(window as any).updateOLEDThemeStyles = applyThemeStyles;
+
 // Added Top-level async since Luna plugins are modules <3
-const style = await ftch.text(themeUrl).catch((error: Error) => {
+originalStyle = await ftch.text(themeUrl).catch((error: Error) => {
     trace.msg.err(`Failed to fetch theme CSS: ${error.message}`);
     return null;
 });
 
 // Apply the OLED theme if CSS was fetched successfully
-if (style) {
+if (originalStyle) {
-    const styleElement = document.createElement("style");
+    applyThemeStyles();
-    styleElement.type = "text/css";
-    styleElement.textContent = style;
-    document.head.appendChild(styleElement);
     
     // Add cleanup to unloads
     unloads.add(() => {
-        if (styleElement.parentNode) {
+        if (appliedStyleElement && appliedStyleElement.parentNode) {
-            styleElement.parentNode.removeChild(styleElement);
+            appliedStyleElement.parentNode.removeChild(appliedStyleElement);
         }
     });
 }