Files
TidaLuna-Plugins/plugins/oled-theme-luna/src/index.ts
T
2025-06-02 11:26:43 +10:00

99 lines
4.3 KiB
TypeScript

import { LunaUnload, Tracer } from "@luna/core";
import { settings, Settings } from "./Settings";
// Import CSS directly using Luna's file:// syntax.. Took me a while to figure out this existed
import originalStyle from "file://theme.css?minify";
export const { trace } = Tracer("[OLED Theme]");
export { Settings };
// called when plugin is unloaded.
// clean up resources
export const unloads = new Set<LunaUnload>();
let appliedStyleElement: HTMLStyleElement | null = null;
// Function to apply theme styles based on current settings
const applyThemeStyles = function(): void {
// 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 = modifiedStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, '');
}
// Remove button styling if OLED Friendly Buttons is enabled
if (settings.oledFriendlyButtons) {
const originalRuleCount = (modifiedStyle.match(/\{[^}]*\}/g) || []).length;
// Split CSS into individual rules and filter out button-related ones
const cssRules = modifiedStyle.split('}').filter(rule => rule.trim());
const filteredRules = cssRules.filter(rule => {
const lowerRule = rule.toLowerCase();
// Check if this rule might affect buttons
const isButtonRule =
// Direct button selectors
lowerRule.includes('button') ||
lowerRule.includes('[role="button"]') ||
lowerRule.includes('[type="button"]') ||
lowerRule.includes('[type="submit"]') ||
lowerRule.includes('[type="reset"]') ||
// Class-based button selectors
lowerRule.includes('btn') ||
lowerRule.includes('_button') ||
lowerRule.includes('-button') ||
lowerRule.includes('button-') ||
lowerRule.includes('button_') ||
// Common button-related classes
lowerRule.includes('clickable') ||
lowerRule.includes('action') ||
lowerRule.includes('control') ||
lowerRule.includes('icon') ||
// Data attributes that might be buttons
lowerRule.includes('data-test') && lowerRule.includes('button') ||
lowerRule.includes('aria-label') && lowerRule.includes('button') ||
// Button states
lowerRule.includes(':hover') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
lowerRule.includes(':focus') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
lowerRule.includes(':active') && (lowerRule.includes('button') || lowerRule.includes('btn')) ||
// Cursor pointer (often used on buttons)
lowerRule.includes('cursor') && lowerRule.includes('pointer') ||
// Any class containing button-like patterns
/\[class[^=]*=["'][^"']*button/i.test(rule) ||
/\[class[^=]*=["'][^"']*btn/i.test(rule) ||
/\[class[^=]*=["'][^"']*click/i.test(rule) ||
/\[class[^=]*=["'][^"']*action/i.test(rule) ||
/\[class[^=]*=["'][^"']*control/i.test(rule);
// Return true to keep the rule if it's NOT a button rule
return !isButtonRule;
});
modifiedStyle = filteredRules.join('} ') + (filteredRules.length > 0 ? '}' : '');
}
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;
// Apply the OLED theme
applyThemeStyles();
// Add cleanup to unloads
unloads.add(() => {
if (appliedStyleElement && appliedStyleElement.parentNode) {
appliedStyleElement.parentNode.removeChild(appliedStyleElement);
}
});