import { useState, useEffect } from "react"; import { IonToggle, IonItem, IonLabel, IonIcon, IonButton } from "@ionic/react"; import { moon, sunny } from "ionicons/icons"; import { Storage } from "@ionic/storage"; interface ThemeToggleProps { iconOnly?: boolean; } const storage = new Storage(); const ThemeToggle: React.FC = ({ iconOnly = false }) => { const [paletteToggle, setPaletteToggle] = useState(false); // Toggle class on const toggleDarkPalette = async (shouldAdd: boolean) => { document.documentElement.classList.toggle("ion-palette-dark", shouldAdd); setPaletteToggle(shouldAdd); await storage.set("darkMode", shouldAdd); }; // Normal Toggle Change const toggleChange = (event: CustomEvent) => { toggleDarkPalette((event.target as HTMLIonToggleElement).checked); }; // Load saved preference useEffect(() => { const init = async () => { await storage.create(); const saved = await storage.get("darkMode"); if (saved !== null) { toggleDarkPalette(saved); } else { const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); toggleDarkPalette(prefersDark.matches); } }; init(); }, []); // ------------------------------------------------------------------- // ICON ONLY MODE // ------------------------------------------------------------------- if (iconOnly) { return ( toggleDarkPalette(!paletteToggle)} className="theme-icon-btn" slot="end" > ); } // ------------------------------------------------------------------- // NORMAL MODE (label + switch) // ------------------------------------------------------------------- return ( <> Dark Mode ); }; export default ThemeToggle;