GPThemes not overriding ChatGPT theme mode after page refresh (#48)

src/js/app/floatingBtn.js

@@ -1,5 +1,5 @@
 // Use a cross-browser storage API:
-import browser from 'webextension-polyfill'
+// import browser from 'webextension-polyfill'
 import { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint } from './components/icons.js'
 import { handleChangeTheme } from './themeManager.js'
 import { createSettings } from './settingsManager.js'
@@ -20,7 +20,7 @@ async function init() {
 		createFloatingBtn()
 		createSettings()
 		decreaseFloatingBtnSize()
-		console.log(await browser.storage.sync.get('gptheme'))
+		// console.log(await browser.storage.sync.get('gptheme'))
 	} catch (error) {
 		console.error('Initialization error:', error)
 	}
@@ -77,9 +77,11 @@ function hideFloatingOptions(e) {
 	}
 }
 function closeFloatingOptions() {
+	console.log('closeFloatingOptions: ', { isOptionsShown })
 	isOptionsShown = false
 	elements.floatingOptions.classList.remove('gpth__options--shown')
 	document.body.removeEventListener('click', hideFloatingOptions)
+	console.log('closeFloatingOptions: ', { isOptionsShown })
 }
 function decreaseFloatingBtnSize() {
 	setTimeout(() => elements.floatingBtn.classList.add('gpth__floating--small'), 3000)

src/js/app/themeManager.js

@@ -1,68 +1,75 @@
-import browser from 'webextension-polyfill'
 import { closeFloatingOptions } from './floatingBtn.js'
 import { openSettings } from './settingsManager.js'
 
 const THEMES = {
 	LIGHT: 'light',
 	DARK: 'dark',
-	OLED: 'oled',
+	SYSTEM: 'system',
 }
 
-const STORAGE_KEYS = {
-	THEME: 'gptheme',
+function getSystemTheme() {
+	return window.matchMedia('(prefers-color-scheme: light)').matches ? THEMES.LIGHT : THEMES.DARK
 }
 
-let htmlTag = document.documentElement
+function initTheme() {
+	const storedTheme = localStorage.getItem('theme') || THEMES.SYSTEM
+	const isOLED = localStorage.getItem('isOLED') === 'true'
+	applyTheme(storedTheme, isOLED)
+}
 
-async function initTheme() {
-	try {
-		const { [STORAGE_KEYS.THEME]: storedTheme } = await browser.storage.sync.get(STORAGE_KEYS.THEME)
+function setTheme(theme, isOLED = false) {
+	localStorage.setItem('theme', theme)
+	localStorage.setItem('isOLED', isOLED)
+	applyTheme(theme, isOLED)
+	closeFloatingOptions()
+}
 
-		// console.log({ storedTheme })
+function applyTheme(theme, isOLED) {
+	console.log('Applying theme:', theme, 'OLED:', isOLED)
+	const htmlTag = document.documentElement
+	let appliedTheme = theme
 
-		const theme =
-			storedTheme || (window.matchMedia('(prefers-color-scheme: light)').matches ? THEMES.LIGHT : THEMES.DARK)
-		applyTheme(theme)
-	} catch (error) {
-		console.error('Error initializing theme:', error)
+	if (theme === THEMES.SYSTEM) {
+		appliedTheme = getSystemTheme()
 	}
-}
-async function setTheme(theme) {
-	try {
-		await browser.storage.sync.set({ [STORAGE_KEYS.THEME]: theme })
-		applyTheme(theme)
-		closeFloatingOptions()
-	} catch (error) {
-		console.error('Error setting theme:', error)
+
+	htmlTag.className = appliedTheme
+	htmlTag.style.colorScheme = appliedTheme
+
+	if (appliedTheme === THEMES.DARK && isOLED) {
+		htmlTag.setAttribute('data-gptheme', 'oled')
+		htmlTag.setAttribute('data-oled', '')
+	} else {
+		htmlTag.setAttribute('data-gptheme', appliedTheme)
+		htmlTag.removeAttribute('data-oled')
 	}
 }
-function applyTheme(theme) {
-	console.log('Applying theme:', theme)
 
-	htmlTag.dataset.gptheme = theme === THEMES.OLED ? theme : ''
-	htmlTag.style.colorScheme = theme === THEMES.OLED ? THEMES.DARK : theme
-	htmlTag.className = theme === THEMES.OLED ? THEMES.DARK : theme
-}
 function handleChangeTheme(e) {
 	const themeButton = e.target.closest('button')
 	if (!themeButton) return
 
-	const themeButtonID = themeButton.id // light | dark | oled | gpth-open-settings
-
-	console.log({ themeButtonID })
+	const themeButtonID = themeButton.id
 
-	if (themeButtonID === THEMES.LIGHT || themeButtonID === THEMES.DARK || themeButtonID === THEMES.OLED) {
-		setTheme(themeButtonID)
-		return
-	}
+	// console.log('Changing theme:', { themeButtonID })
 
-	/* If clicked on "⚙️ Open Settings" */
-	if (themeButtonID === 'gpth-open-settings') {
+	// if (themeButtonID === 'light' || themeButtonID === 'dark' || themeButtonID === 'system') {
+	if (Object.values(THEMES).includes(themeButtonID)) {
+		setTheme(themeButtonID, false)
+	} else if (themeButtonID === 'oled') {
+		setTheme(THEMES.DARK, true)
+	} else if (themeButtonID === 'gpth-open-settings') {
 		openSettings()
 	}
 }
-const init = () => {
+
+function init() {
 	initTheme()
+	window.matchMedia('(prefers-color-scheme: light)').addListener(() => {
+		if (localStorage.getItem('theme') === THEMES.SYSTEM) {
+			initTheme() // Re-init to apply correct system theme
+		}
+	})
 }
 
 export { init, handleChangeTheme }

src/js/background.js

@@ -7,6 +7,7 @@ browser.runtime.onInstalled.addListener((details) => {
 	// Listen for updates
 	if (details.reason === 'update') {
 		browser.action.setBadgeText({ text: 'NEW' })
+		browser.storage.sync.remove('gptheme')
 	} else {
 		browser.action.setBadgeText({ text: browser.runtime.getManifest().version })
 	}