obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-09 04:29:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Daniel Dada
2025-06-16 19:09:49 +03:00
parent ec31bb6385
commit 1fe6c1830e
5 changed files with 150 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_locales/en/messages.json
View File

@@ -6,7 +6,7 @@
"message": "Select List:" "message": "Select List:"
}, },
"new_list": { "new_list": {
"message": "+ New List" "message": "New List"
}, },
"delete_list": { "delete_list": {
"message": "Delete List" "message": "Delete List"

2
_locales/ru/messages.json
View File

@@ -6,7 +6,7 @@
"message": "Выберите список:" "message": "Выберите список:"
}, },
"new_list": { "new_list": {
"message": "+ Новый список" "message": "Новый список"
}, },
"delete_list": { "delete_list": {
"message": "Удалить список" "message": "Удалить список"

119
popup/popup.css
View File

@@ -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 { body {
font-family: Arial, sans-serif; font-family: 'Segoe UI', sans-serif;
width: 360px; width: 360px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f9f9f9; background: var(--bg-color);
color: #333; color: var(--text-color);
transition: background 0.3s ease, color 0.3s ease;
} }
.container { .container {
padding: 10px; padding: 16px;
} }
h1 { h1 {
font-size: 1.4em; font-size: 1.5em;
margin-bottom: 10px; margin-bottom: 16px;
color: var(--text-color);
text-align: center;
} }
.section { .section {
margin-bottom: 12px; margin-bottom: 16px;
} }
input[type="text"], input[type="text"],
@@ -25,38 +50,78 @@ textarea,
select { select {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-top: 4px; margin-top: 6px;
margin-bottom: 8px; margin-bottom: 10px;
padding: 6px; padding: 8px;
border-radius: 4px; border-radius: 6px;
border: 1px solid #ccc; 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 { textarea {
height: 60px; height: 70px;
resize: vertical; 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 { button {
margin: 4px 2px; margin: 4px 2px;
padding: 6px 10px; padding: 8px 12px;
font-size: 0.9em; font-size: 0.9em;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
background-color: #007bff; background-color: var(--button-bg);
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: var(--button-hover);
} }
#wordList > div { #wordList>div {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 6px; margin-bottom: 6px;
gap: 4px; gap: 6px;
background: var(--wordlist-bg);
padding: 6px;
border-radius: 6px;
} }
#wordList input[type="text"] { #wordList input[type="text"] {
@@ -64,14 +129,20 @@ button:hover {
} }
#wordList input[type="color"] { #wordList input[type="color"] {
width: 30px; width: 28px;
height: 30px; height: 28px;
padding: 0; padding: 0;
border: none; border-radius: 4px;
} }
label { label {
display: inline-flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
margin-bottom: 6px;
font-size: 0.95em;
}
input[type="file"] {
display: none;
} }

29
popup/popup.html
View File

@@ -1,15 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><span data-i18n="extension_name"></span></title> <title data-i18n="extension_name">Goose Highlighter</title>
<link rel="stylesheet" href="popup.css"> <link rel="stylesheet" href="popup.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1 data-i18n="extension_name">Goose Highlighter</h1> <h1 data-i18n="extension_name">Goose Highlighter</h1>
<div class="section" style="text-align: right;">
<label>
<input type="checkbox" id="themeToggle" />
Dark Mode
</label>
</div>
<div class="section"> <div class="section">
<label for="listSelect" data-i18n="select_list">Select List:</label> <label for="listSelect" data-i18n="select_list">Select List:</label>
<select id="listSelect"></select> <select id="listSelect"></select>
@@ -18,10 +27,11 @@
</div> </div>
<div class="section"> <div class="section">
<label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName"></label> <label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName" /></label>
<label><span data-i18n="background">Background:</span> <input type="color" id="listBg"></label> <label><span data-i18n="background">Background:</span> <input type="color" id="listBg" /></label>
<label><span data-i18n="foreground">Foreground:</span> <input type="color" id="listFg"></label> <label><span data-i18n="foreground">Foreground:</span> <input type="color" id="listFg" /></label>
<label><input type="checkbox" id="listActive"> <span data-i18n="enable_highlight">Enable Highlight</span></label> <label><input type="checkbox" id="listActive" /> <span data-i18n="enable_highlight">Enable
Highlight</span></label>
</div> </div>
<div class="section"> <div class="section">
@@ -40,7 +50,7 @@
<div class="section"> <div class="section">
<button id="importBtn" data-i18n="import_list">Import JSON</button> <button id="importBtn" data-i18n="import_list">Import JSON</button>
<input type="file" id="importInput" accept="application/json" hidden> <input type="file" id="importInput" accept="application/json" hidden />
<button id="exportBtn" data-i18n="export_list">Export JSON</button> <button id="exportBtn" data-i18n="export_list">Export JSON</button>
</div> </div>
</div> </div>
@@ -48,4 +58,5 @@
<script src="../storage.js"></script> <script src="../storage.js"></script>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>

22
popup/popup.js
View File

@@ -174,9 +174,7 @@ importInput.onchange = e => {
reader.readAsText(file); reader.readAsText(file);
}; };
// Localize the page
function localizePage() { function localizePage() {
// Localize all elements with a data-i18n attribute
const elements = document.querySelectorAll('[data-i18n]'); const elements = document.querySelectorAll('[data-i18n]');
elements.forEach(element => { elements.forEach(element => {
const message = element.dataset.i18n; const message = element.dataset.i18n;
@@ -191,7 +189,25 @@ function localizePage() {
}); });
} }
// Call this function when the page loads
document.addEventListener('DOMContentLoaded', localizePage); 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(); load();