From 1fe6c1830eac77ae72a0f3a3877391141c6ab6ae Mon Sep 17 00:00:00 2001 From: Daniel Dada Date: Mon, 16 Jun 2025 19:09:49 +0300 Subject: [PATCH] feat: dark mode --- _locales/en/messages.json | 2 +- _locales/ru/messages.json | 2 +- popup/popup.css | 119 ++++++++++++++++++++++++++++++-------- popup/popup.html | 29 +++++++--- popup/popup.js | 50 ++++++++++------ 5 files changed, 150 insertions(+), 52 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 82fbe69..9cf17c5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -6,7 +6,7 @@ "message": "Select List:" }, "new_list": { - "message": "+ New List" + "message": "New List" }, "delete_list": { "message": "Delete List" diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 1524286..5dd5c48 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -6,7 +6,7 @@ "message": "Выберите список:" }, "new_list": { - "message": "+ Новый список" + "message": "Новый список" }, "delete_list": { "message": "Удалить список" diff --git a/popup/popup.css b/popup/popup.css index 6a1d2d7..a3c8ccb 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,23 +1,48 @@ +:root { + --bg-color: #ffffff; + --text-color: #1a1a1a; + --input-bg: #f0f0f0; + --input-border: #ccc; + --button-bg: #007bff; + --button-hover: #0056b3; + --wordlist-bg: #f9f9f9; + --checkbox-accent: #007bff; +} + +.dark { + --bg-color: #171717; + --text-color: #e0e0e0; + --input-bg: #1f1f1f; + --input-border: #333; + --button-bg: #2e7d32; + --button-hover: #388e3c; + --wordlist-bg: #1f1f1f; + --checkbox-accent: #4caf50; +} + body { - font-family: Arial, sans-serif; + font-family: 'Segoe UI', sans-serif; width: 360px; margin: 0; padding: 0; - background: #f9f9f9; - color: #333; + background: var(--bg-color); + color: var(--text-color); + transition: background 0.3s ease, color 0.3s ease; } .container { - padding: 10px; + padding: 16px; } h1 { - font-size: 1.4em; - margin-bottom: 10px; + font-size: 1.5em; + margin-bottom: 16px; + color: var(--text-color); + text-align: center; } .section { - margin-bottom: 12px; + margin-bottom: 16px; } input[type="text"], @@ -25,38 +50,78 @@ textarea, select { width: 100%; box-sizing: border-box; - margin-top: 4px; - margin-bottom: 8px; - padding: 6px; - border-radius: 4px; - border: 1px solid #ccc; + margin-top: 6px; + margin-bottom: 10px; + padding: 8px; + border-radius: 6px; + border: 1px solid var(--input-border); + background-color: var(--input-bg); + color: var(--text-color); + transition: background 0.3s, color 0.3s, border-color 0.3s; } textarea { - height: 60px; + height: 70px; resize: vertical; } +input[type="color"] { + background-color: transparent; + border: none; + cursor: pointer; + width: 36px; + height: 36px; +} + +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + accent-color: var(--checkbox-accent); + background-color: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 4px; + width: 16px; + height: 16px; + transform: scale(1.2); + cursor: pointer; +} + +input[type="checkbox"]:checked::after { + content: ""; + position: absolute; + top: 2px; + left: 5px; + width: 4px; + height: 9px; + border: solid var(--checkbox-accent); + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + button { margin: 4px 2px; - padding: 6px 10px; + padding: 8px 12px; font-size: 0.9em; border: none; - border-radius: 4px; - background-color: #007bff; + border-radius: 6px; + background-color: var(--button-bg); color: white; cursor: pointer; + transition: background-color 0.2s ease; } button:hover { - background-color: #0056b3; + background-color: var(--button-hover); } -#wordList > div { +#wordList>div { display: flex; align-items: center; margin-bottom: 6px; - gap: 4px; + gap: 6px; + background: var(--wordlist-bg); + padding: 6px; + border-radius: 6px; } #wordList input[type="text"] { @@ -64,14 +129,20 @@ button:hover { } #wordList input[type="color"] { - width: 30px; - height: 30px; + width: 28px; + height: 28px; padding: 0; - border: none; + border-radius: 4px; } label { - display: inline-flex; + display: flex; align-items: center; - gap: 6px; + gap: 8px; + margin-bottom: 6px; + font-size: 0.95em; +} + +input[type="file"] { + display: none; } \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index 377cf75..fa7dc95 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -1,15 +1,24 @@ + - - - <span data-i18n="extension_name"></span> - + + + Goose Highlighter + +

Goose Highlighter

+
+ +
+
@@ -18,10 +27,11 @@
- - - - + + + +
@@ -40,7 +50,7 @@
- +
@@ -48,4 +58,5 @@ + \ No newline at end of file diff --git a/popup/popup.js b/popup/popup.js index 9c520bc..e5be9ad 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -20,13 +20,13 @@ async function load() { const res = await chrome.storage.local.get("lists"); lists = res.lists || []; if (!lists.length) { - lists.push({ - id: Date.now(), - name: chrome.i18n.getMessage("default_list_name"), - background: "#ffff00", - foreground: "#000000", - active: true, - words: [] + lists.push({ + id: Date.now(), + name: chrome.i18n.getMessage("default_list_name"), + background: "#ffff00", + foreground: "#000000", + active: true, + words: [] }); } renderLists(); @@ -67,13 +67,13 @@ listSelect.onchange = () => { }; document.getElementById("newListBtn").onclick = () => { - lists.push({ - id: Date.now(), - name: chrome.i18n.getMessage("new_list_name"), - background: "#ffff00", - foreground: "#000000", - active: true, - words: [] + lists.push({ + id: Date.now(), + name: chrome.i18n.getMessage("new_list_name"), + background: "#ffff00", + foreground: "#000000", + active: true, + words: [] }); currentListIndex = lists.length - 1; save(); @@ -174,9 +174,7 @@ importInput.onchange = e => { reader.readAsText(file); }; -// Localize the page function localizePage() { - // Localize all elements with a data-i18n attribute const elements = document.querySelectorAll('[data-i18n]'); elements.forEach(element => { const message = element.dataset.i18n; @@ -191,7 +189,25 @@ function localizePage() { }); } -// Call this function when the page loads document.addEventListener('DOMContentLoaded', localizePage); +const toggle = document.getElementById('themeToggle'); +const body = document.body; + +const savedTheme = localStorage.getItem('theme'); +if (savedTheme === 'dark') { + body.classList.add('dark'); + toggle.checked = true; +} + +toggle.addEventListener('change', () => { + if (toggle.checked) { + body.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } else { + body.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } +}); + load(); \ No newline at end of file