${preset.emoji}

${preset.name}

${preset.desc}

`; card.addEventListener('click', () => applyPreset(preset)); grid.appendChild(card); }); } function applyPreset(preset) { currentSettings = { ...preset.settings, activePreset: preset.id }; renderUI(); buildPresets(); pushToTabs(); persistSettings(); } function renderSavedThemes() { savedThemesList.innerHTML = ''; if (savedThemes.length === 0) { savedThemesList.innerHTML = '

No saved themes yet.

'; return; } savedThemes.forEach((theme, idx) => { const item = document.createElement('div'); item.className = 'saved-item'; item.innerHTML = ` ${theme.name}

`; item.querySelector('[data-load]').addEventListener('click', () => loadSavedTheme(idx)); item.querySelector('[data-del]').addEventListener('click', () => deleteSavedTheme(idx)); savedThemesList.appendChild(item); }); } function loadSavedTheme(idx) { currentSettings = { ...DEFAULT_SETTINGS, ...savedThemes[idx].settings, activePreset: null }; renderUI(); buildPresets(); persistSettings(); } function deleteSavedTheme(idx) { savedThemes.splice(idx, 1); chrome.storage.local.set({ savedThemes }); renderSavedThemes(); } async function persistSettings() { await chrome.storage.local.set({ settings: currentSettings }); } async function pushToTabs() { const tabs = await chrome.tabs.query({}); tabs.forEach(tab => { if (tab.id && tab.url && !tab.url.startsWith('chrome://') && !tab.url.startsWith('chrome-extension://')) { chrome.tabs.sendMessage(tab.id, { type: 'APPLY_THEME', settings: currentSettings }).catch(() => {}); } }); } function attachListeners() { document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); tab.classList.add('active'); document.getElementById('tab-' + tab.dataset.tab).classList.add('active'); }); }); masterToggle.addEventListener('change', () => { currentSettings.enabled = masterToggle.checked; persistSettings(); pushToTabs(); }); function syncColor(picker, hex, key) { picker.addEventListener('input', () => { currentSettings[key] = picker.value; hex.value = picker.value; currentSettings.activePreset = null; }); hex.addEventListener('input', () => { if (/^#[0-9a-fA-F]{6}$/.test(hex.value)) { currentSettings[key] = hex.value; picker.value = hex.value; currentSettings.activePreset = null; } }); } syncColor(bgColorPicker, bgColorHex, 'bgColor'); syncColor(textColorPicker, textColorHex, 'textColor'); syncColor(linkColorPicker, linkColorHex, 'linkColor'); syncColor(accentColorPicker, accentColorHex, 'accentColor'); bgOpacitySlider.addEventListener('input', () => { currentSettings.bgOpacity = parseInt(bgOpacitySlider.value); bgOpacityVal.textContent = currentSettings.bgOpacity + '%'; currentSettings.activePreset = null; }); fontFamilySelect.addEventListener('change', () => { currentSettings.fontFamily = fontFamilySelect.value; currentSettings.activePreset = null; }); fontSizeSlider.addEventListener('input', () => { currentSettings.fontSize = parseInt(fontSizeSlider.value); fontSizeVal.textContent = currentSettings.fontSize + '%'; currentSettings.activePreset = null; }); lineHeightSlider.addEventListener('input', () => { currentSettings.lineHeight = parseInt(lineHeightSlider.value); lineHeightVal.textContent = (currentSettings.lineHeight / 10).toFixed(1); currentSettings.activePreset = null; }); letterSpacingSlider.addEventListener('input', () => { currentSettings.letterSpacing = parseInt(letterSpacingSlider.value); letterSpacingVal.textContent = currentSettings.letterSpacing + 'px'; currentSettings.activePreset = null; }); fontWeightSelect.addEventListener('change', () => { currentSettings.fontWeight = fontWeightSelect.value; currentSettings.activePreset = null; }); maxWidthSlider.addEventListener('input', () => { currentSettings.maxWidth = parseInt(maxWidthSlider.value); maxWidthVal.textContent = currentSettings.maxWidth === 0 ? 'None' : currentSettings.maxWidth + 'px'; currentSettings.activePreset = null; }); pagePaddingSlider.addEventListener('input', () => { currentSettings.pagePadding = parseInt(pagePaddingSlider.value); pagePaddingVal.textContent = currentSettings.pagePadding + 'px'; currentSettings.activePreset = null; }); blurSlider.addEventListener('input', () => { currentSettings.blur = parseInt(blurSlider.value); blurVal.textContent = currentSettings.blur + 'px'; currentSettings.activePreset = null; }); brightnessSlider.addEventListener('input', () => { currentSettings.brightness = parseInt(brightnessSlider.value); brightnessVal.textContent = currentSettings.brightness + '%'; currentSettings.activePreset = null; }); contrastSlider.addEventListener('input', () => { currentSettings.contrast = parseInt(contrastSlider.value); contrastVal.textContent = currentSettings.contrast + '%'; currentSettings.activePreset = null; }); invertColorsCheck.addEventListener('change', () => { currentSettings.invertColors = invertColorsCheck.checked; currentSettings.activePreset = null; }); grayscaleCheck.addEventListener('change', () => { currentSettings.grayscale = grayscaleCheck.checked; currentSettings.activePreset = null; }); saveThemeBtn.addEventListener('click', () => { const name = themeNameInput.value.trim(); if (!name) return; savedThemes.push({ name, settings: { ...currentSettings } }); chrome.storage.local.set({ savedThemes }); themeNameInput.value = ''; renderSavedThemes(); }); exportBtn.addEventListener('click', () => { const payload = JSON.stringify({ settings: currentSettings, savedThemes }, null, 2); const blob = new Blob([payload], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'chrome-theme.json'; a.click(); URL.revokeObjectURL(url); }); importFile.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { try { const data = JSON.parse(ev.target.result); if (data.settings) { currentSettings = { ...DEFAULT_SETTINGS, ...data.settings }; renderUI(); buildPresets(); } if (data.savedThemes) { savedThemes = data.savedThemes; chrome.storage.local.set({ savedThemes }); renderSavedThemes(); } persistSettings(); } catch (err) { console.error('Failed to import theme JSON:', err); alert('Invalid theme file.'); } }; reader.readAsText(file); importFile.value = ''; }); resetBtn.addEventListener('click', () => { currentSettings = { ...DEFAULT_SETTINGS }; renderUI(); buildPresets(); persistSettings(); pushToTabs(); }); applyBtn.addEventListener('click', () => { persistSettings(); pushToTabs(); applyBtn.textContent = 'Applied!'; setTimeout(() => { applyBtn.textContent = 'Apply Theme'; }, 1500); }); } init();