onedeuxtriseigo.nullpo.dev
Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
Add full dark mode support (#1079)
* Add full dark mode support
* Fix welcome, permissions, and quick start scrollbars
* Fix action popup dark mode on mobile
* Add theme to info page
* Reduce flashbang
* Move position of settingsDisplayController to not break things
* Fix dictionary import drag drop theming
* Make dark shadow color less bad
* Prepare themeController to avoid not being able to set browser theme
+44
-19
ext/css/action-popup.css
+44
-19
ext/css/action-popup.css
···
27
28
--warning-color: #96751c;
29
--warning-color-light: #edc75e;
30
}
31
32
body {
···
36
font-size: var(--font-size);
37
width: max-content;
38
height: max-content;
39
}
40
41
h3 {
···
44
font-weight: 500;
45
line-height: 1.1;
46
font-size: 24px;
47
-
color: inherit;
48
}
49
label {
50
font-weight: normal;
···
98
margin: 0 -10px;
99
padding: 0.5em 10px;
100
cursor: pointer;
101
-
color: #333;
102
text-decoration: none;
103
background-color: transparent;
104
transition: background-color 0.125s linear 0s;
···
109
}
110
.link-group:hover,
111
.link-group:active {
112
-
color: #333;
113
text-decoration: none;
114
}
115
.link-group:hover>.link-group-label,
···
136
margin: 0;
137
padding: 0;
138
}
139
-
.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); }
140
-
.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); }
141
-
.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); }
142
-
.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); }
143
-
.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); }
144
145
.link-group-label {
146
vertical-align: middle;
···
304
white-space: nowrap;
305
}
306
.nav-button {
307
-
background-image: linear-gradient(#f8f8f8, #e0e0e0);
308
-
border: 1px solid #cccccc;
309
margin: 0;
310
padding: 2px 3px;
311
cursor: pointer;
···
317
.nav-button:hover,
318
.nav-button:focus {
319
z-index: 1;
320
-
border-color: #aaaaaa;
321
-
background-image: linear-gradient(#e8e8e8, #d0d0d0);
322
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
323
outline: none;
324
}
325
.nav-button:focus:not(:focus-visible) {
326
-
background-image: linear-gradient(#f8f8f8, #e0e0e0);
327
-
border-color: #cccccc;
328
box-shadow: none;
329
}
330
.nav-button:focus-visible {
331
z-index: 1;
332
-
border-color: #aaaaaa;
333
-
background-image: linear-gradient(#e8e8e8, #d0d0d0);
334
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
335
}
336
.nav-button:active,
337
.nav-button:active:focus {
338
z-index: 1;
339
-
border-color: #808080;
340
-
background-image: linear-gradient(#c8c8c8, #e0e0e0);
341
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
342
}
343
.nav-button>.icon {
···
346
width: 16px;
347
height: 16px;
348
box-sizing: content-box;
349
-
background-color: #333333;
350
}
351
.nav-button:first-child,
352
.nav-button:first-child[hidden]+.nav-button {
···
27
28
--warning-color: #96751c;
29
--warning-color-light: #edc75e;
30
+
31
+
--nav-button-background-image: linear-gradient(#f8f8f8, #e0e0e0);
32
+
--nav-button-border-color: #cccccc;
33
+
--nav-button-background-image-focus: linear-gradient(#e8e8e8, #d0d0d0);
34
+
--nav-button-border-color-focus: #aaaaaa;
35
+
--nav-button-background-image-active-focus: linear-gradient(#c8c8c8, #e0e0e0);
36
+
--nav-button-border-color-active-focus: #808080;
37
+
--nav-button-icon-bg: #333333;
38
+
--background-color: #f8f9fa;
39
+
--text-color: #333333;
40
+
--svg-filter: 0;
41
+
}
42
+
43
+
:root[data-theme=dark] {
44
+
--nav-button-background-image: linear-gradient(#464646, #444444);
45
+
--nav-button-border-color: #333333;
46
+
--nav-button-background-image-focus: linear-gradient(#171717, #2f2f2f);
47
+
--nav-button-border-color-focus: #555555;
48
+
--nav-button-background-image-active-focus: linear-gradient(#373737, #1f1f1f);
49
+
--nav-button-border-color-active-focus: #7f7f7f;
50
+
--nav-button-icon-bg: #fbfbfb;
51
+
--background-color: #1e1e1e;
52
+
--text-color: #cccccc;
53
+
--svg-filter: invert(100%);
54
}
55
56
body {
···
60
font-size: var(--font-size);
61
width: max-content;
62
height: max-content;
63
+
background-color: var(--background-color);
64
}
65
66
h3 {
···
69
font-weight: 500;
70
line-height: 1.1;
71
font-size: 24px;
72
+
color: var(--text-color);
73
}
74
label {
75
font-weight: normal;
···
123
margin: 0 -10px;
124
padding: 0.5em 10px;
125
cursor: pointer;
126
+
color: var(--text-color);
127
text-decoration: none;
128
background-color: transparent;
129
transition: background-color 0.125s linear 0s;
···
134
}
135
.link-group:hover,
136
.link-group:active {
137
+
color: var(--text-color);
138
text-decoration: none;
139
}
140
.link-group:hover>.link-group-label,
···
161
margin: 0;
162
padding: 0;
163
}
164
+
.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); filter: var(--svg-filter); }
165
+
.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); filter: var(--svg-filter); }
166
+
.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); filter: var(--svg-filter); }
167
+
.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); filter: var(--svg-filter); }
168
+
.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); filter: var(--svg-filter); }
169
170
.link-group-label {
171
vertical-align: middle;
···
329
white-space: nowrap;
330
}
331
.nav-button {
332
+
background-image: var(--nav-button-background-image);
333
+
border: 1px solid var(--nav-button-border-color);
334
margin: 0;
335
padding: 2px 3px;
336
cursor: pointer;
···
342
.nav-button:hover,
343
.nav-button:focus {
344
z-index: 1;
345
+
border-color: var(--nav-button-border-color-focus);
346
+
background-image: var(--nav-button-background-image-focus);
347
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
348
outline: none;
349
}
350
.nav-button:focus:not(:focus-visible) {
351
+
background-image: var(--nav-button-background-image);
352
+
border-color: var(--nav-button-border-color);
353
box-shadow: none;
354
}
355
.nav-button:focus-visible {
356
z-index: 1;
357
+
border-color: var(--nav-button-border-color-focus);
358
+
background-image: var(--nav-button-background-image-focus);
359
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
360
}
361
.nav-button:active,
362
.nav-button:active:focus {
363
z-index: 1;
364
+
border-color: var(--nav-button-border-color-active-focus);
365
+
background-image: var(--nav-button-background-image-active-focus);
366
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
367
}
368
.nav-button>.icon {
···
371
width: 16px;
372
height: 16px;
373
box-sizing: content-box;
374
+
background-color: var(--nav-button-icon-bg);
375
}
376
.nav-button:first-child,
377
.nav-button:first-child[hidden]+.nav-button {
+1
-1
ext/css/material.css
+1
-1
ext/css/material.css
+8
-3
ext/css/popup-preview.css
+8
-3
ext/css/popup-preview.css
···
24
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
25
26
--animation-duration: 0s;
27
}
28
:root[data-loaded=true] {
29
--animation-duration: 0.25s;
30
}
31
32
html {
33
transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s;
34
background-color: rgba(255, 255, 255, 0);
35
-
color: #333333;
36
}
37
html.dark {
38
-
color: #d4d4d4;
39
background-color: #1e1e1e;
40
}
41
html,
···
92
margin: 0;
93
padding: 0;
94
outline: none;
95
-
color: inherit;
96
background-color: transparent;
97
white-space: pre;
98
transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s;
···
24
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
25
26
--animation-duration: 0s;
27
+
28
+
--example-text-color: #333333;
29
}
30
:root[data-loaded=true] {
31
--animation-duration: 0.25s;
32
}
33
34
+
:root[data-theme=dark] {
35
+
--example-text-color: #d4d4d4;
36
+
}
37
+
38
+
39
html {
40
transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s;
41
background-color: rgba(255, 255, 255, 0);
42
}
43
html.dark {
44
background-color: #1e1e1e;
45
}
46
html,
···
97
margin: 0;
98
padding: 0;
99
outline: none;
100
+
color: var(--example-text-color);
101
background-color: transparent;
102
white-space: pre;
103
transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s;
+44
-3
ext/css/settings.css
+44
-3
ext/css/settings.css
···
76
--modal-padding-vertical: 0.625em;
77
--modal-padding-vertical-half: calc(var(--modal-padding-vertical) * 0.5);
78
--modal-button-spacing: 0.625em;
79
}
80
:root:not([data-loaded=true]) {
81
--animation-duration: 0s;
···
83
:root[data-theme=dark] {
84
--separator-color1: #333333;
85
--separator-color2: #222222;
86
}
87
88
···
2377
2378
#dictionary-drop-file-zone {
2379
transition: background-color var(--animation-duration) ease-in-out, border var(--animation-duration) ease-in-out;
2380
-
border: 2px dashed rgb(204, 204, 204);
2381
border-radius: 5px;
2382
flex: auto;
2383
min-height: 20em;
···
2390
}
2391
2392
#dictionary-drop-file-zone:hover {
2393
-
background-color: rgba(28, 116, 233, 0.05);
2394
border: 2px dashed var(--accent-color);
2395
}
2396
2397
#dictionary-drop-file-zone.drag-over {
2398
border: 2px solid var(--accent-color);
2399
-
background-color: rgb(191, 209, 255);
2400
}
2401
2402
#dictionary-drag-drop-text {
···
76
--modal-padding-vertical: 0.625em;
77
--modal-padding-vertical-half: calc(var(--modal-padding-vertical) * 0.5);
78
--modal-button-spacing: 0.625em;
79
+
80
+
--scrollbar-thumb-color: #c1c1c1;
81
+
--scrollbar-track-color: #f1f1f1;
82
+
--scrollbar-inverse-thumb-color: #444444;
83
+
--scrollbar-inverse-track-color: #2f2f2f;
84
+
85
+
--dictionary-import-border-color: #cccccc;
86
+
--dictionary-import-border-color-hover: #bfd1ff;
87
+
--dictionary-import-hover-background-color: rgba(28, 116, 233, 0.05);
88
}
89
:root:not([data-loaded=true]) {
90
--animation-duration: 0s;
···
92
:root[data-theme=dark] {
93
--separator-color1: #333333;
94
--separator-color2: #222222;
95
+
96
+
--scrollbar-thumb-color: #444444;
97
+
--scrollbar-track-color: #2f2f2f;
98
+
--scrollbar-inverse-thumb-color: #c1c1c1;
99
+
--scrollbar-inverse-track-color: #f1f1f1;
100
+
101
+
--dictionary-import-border-color: #333333;
102
+
--dictionary-import-border-color-hover: #1c74e9;
103
+
--dictionary-import-hover-background-color: rgba(191, 209, 255, 0.05);
104
+
}
105
+
106
+
/* Scrollbars */
107
+
:root:not([data-theme=light]) .scrollbar {
108
+
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
109
+
}
110
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar {
111
+
width: auto;
112
+
}
113
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-button {
114
+
height: 0;
115
+
}
116
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-thumb {
117
+
background-color: var(--scrollbar-thumb-color);
118
+
}
119
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track {
120
+
background-color: var(--scrollbar-thumb-color);
121
+
}
122
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {
123
+
background-color: var(--scrollbar-track-color);
124
+
}
125
+
:root:not([data-theme=light]) .scrollbar::-webkit-scrollbar-corner {
126
+
background-color: var(--scrollbar-track-color);
127
}
128
129
···
2418
2419
#dictionary-drop-file-zone {
2420
transition: background-color var(--animation-duration) ease-in-out, border var(--animation-duration) ease-in-out;
2421
+
border: 2px dashed var(--dictionary-import-border-color);
2422
border-radius: 5px;
2423
flex: auto;
2424
min-height: 20em;
···
2431
}
2432
2433
#dictionary-drop-file-zone:hover {
2434
+
background-color: var(--dictionary-import-hover-background-color);
2435
border: 2px dashed var(--accent-color);
2436
}
2437
2438
#dictionary-drop-file-zone.drag-over {
2439
border: 2px solid var(--accent-color);
2440
+
background-color: var(--dictionary-import-border-color-hover);
2441
}
2442
2443
#dictionary-drag-drop-text {
+9
ext/js/pages/action-popup-main.js
+9
ext/js/pages/action-popup-main.js
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
import {Application} from '../application.js';
20
import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js';
21
import {querySelectorNotNull} from '../dom/query-selector.js';
···
30
this._api = api;
31
/** @type {?import('settings').Options} */
32
this._optionsFull = null;
33
}
34
35
/** */
36
async prepare() {
37
const manifest = chrome.runtime.getManifest();
38
39
this._showExtensionInfo(manifest);
···
201
}
202
void this._updateDictionariesEnabledWarnings(options);
203
void this._updatePermissionsWarnings(options);
204
}
205
206
/** */
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
+
import {ThemeController} from '../app/theme-controller.js';
20
import {Application} from '../application.js';
21
import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js';
22
import {querySelectorNotNull} from '../dom/query-selector.js';
···
31
this._api = api;
32
/** @type {?import('settings').Options} */
33
this._optionsFull = null;
34
+
/** @type {ThemeController} */
35
+
this._themeController = new ThemeController(document.documentElement);
36
}
37
38
/** */
39
async prepare() {
40
+
this._themeController.siteTheme = 'light';
41
+
this._themeController.prepare();
42
+
43
const manifest = chrome.runtime.getManifest();
44
45
this._showExtensionInfo(manifest);
···
207
}
208
void this._updateDictionariesEnabledWarnings(options);
209
void this._updatePermissionsWarnings(options);
210
+
211
+
this._themeController.theme = options.general.popupTheme;
212
+
this._themeController.updateTheme();
213
}
214
215
/** */
+12
ext/js/pages/info-main.js
+12
ext/js/pages/info-main.js
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
import {Application} from '../application.js';
20
import {promiseTimeout} from '../core/utilities.js';
21
import {DocumentFocusController} from '../dom/document-focus-controller.js';
···
153
154
const settingsController = new SettingsController(application);
155
await settingsController.prepare();
156
157
const backupController = new BackupController(settingsController, null);
158
await backupController.prepare();
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
+
import {ThemeController} from '../app/theme-controller.js';
20
import {Application} from '../application.js';
21
import {promiseTimeout} from '../core/utilities.js';
22
import {DocumentFocusController} from '../dom/document-focus-controller.js';
···
154
155
const settingsController = new SettingsController(application);
156
await settingsController.prepare();
157
+
158
+
/** @type {ThemeController} */
159
+
const themeController = new ThemeController(document.documentElement);
160
+
themeController.prepare();
161
+
const optionsFull = await application.api.optionsGetFull();
162
+
const {profiles, profileCurrent} = optionsFull;
163
+
const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
164
+
if (primaryProfile !== null) {
165
+
themeController.theme = primaryProfile.options.general.popupTheme;
166
+
themeController.updateTheme();
167
+
}
168
169
const backupController = new BackupController(settingsController, null);
170
await backupController.prepare();
+3
-3
ext/js/pages/permissions-main.js
+3
-3
ext/js/pages/permissions-main.js
···
130
const persistentStorageController = new PersistentStorageController(application);
131
void persistentStorageController.prepare();
132
133
await promiseTimeout(100);
134
135
document.documentElement.dataset.loaded = 'true';
136
-
137
-
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
138
-
settingsDisplayController.prepare();
139
});
···
130
const persistentStorageController = new PersistentStorageController(application);
131
void persistentStorageController.prepare();
132
133
+
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
134
+
settingsDisplayController.prepare();
135
+
136
await promiseTimeout(100);
137
138
document.documentElement.dataset.loaded = 'true';
139
});
+35
ext/js/pages/quick-start-guide-main.js
+35
ext/js/pages/quick-start-guide-main.js
···
···
1
+
/*
2
+
* Copyright (C) 2024 Yomitan Authors
3
+
*
4
+
* This program is free software: you can redistribute it and/or modify
5
+
* it under the terms of the GNU General Public License as published by
6
+
* the Free Software Foundation, either version 3 of the License, or
7
+
* (at your option) any later version.
8
+
*
9
+
* This program is distributed in the hope that it will be useful,
10
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
11
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12
+
* GNU General Public License for more details.
13
+
*
14
+
* You should have received a copy of the GNU General Public License
15
+
* along with this program. If not, see <https://www.gnu.org/licenses/>.
16
+
*/
17
+
18
+
import {ThemeController} from '../app/theme-controller.js';
19
+
import {Application} from '../application.js';
20
+
import {SettingsController} from './settings/settings-controller.js';
21
+
22
+
await Application.main(true, async (application) => {
23
+
const settingsController = new SettingsController(application);
24
+
await settingsController.prepare();
25
+
/** @type {ThemeController} */
26
+
const themeController = new ThemeController(document.documentElement);
27
+
themeController.prepare();
28
+
const optionsFull = await application.api.optionsGetFull();
29
+
const {profiles, profileCurrent} = optionsFull;
30
+
const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
31
+
if (primaryProfile !== null) {
32
+
themeController.theme = primaryProfile.options.general.popupTheme;
33
+
themeController.updateTheme();
34
+
}
35
+
});
+8
-20
ext/js/pages/settings/popup-preview-frame.js
+8
-20
ext/js/pages/settings/popup-preview-frame.js
···
18
19
import * as wanakana from '../../../lib/wanakana.js';
20
import {Frontend} from '../../app/frontend.js';
21
import {createApiMap, invokeApiMapHandler} from '../../core/api-map.js';
22
import {querySelectorNotNull} from '../../dom/query-selector.js';
23
import {TextSourceRange} from '../../dom/text-source-range.js';
···
57
this._languageSummaries = [];
58
/** @type {boolean} */
59
this._wanakanaBound = false;
60
61
/* eslint-disable @stylistic/no-multi-spaces */
62
/** @type {import('popup-preview-frame').ApiMap} */
···
74
async prepare() {
75
window.addEventListener('message', this._onMessage.bind(this), false);
76
77
// Setup events
78
-
/** @type {HTMLInputElement} */
79
-
const darkThemeCheckbox = querySelectorNotNull(document, '#theme-dark-checkbox');
80
-
darkThemeCheckbox.addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false);
81
this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false);
82
this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false);
83
this._exampleTextInput.addEventListener('input', this._onExampleTextInputInput.bind(this), false);
···
137
options.general.popupHorizontalTextPosition = 'below';
138
options.general.popupVerticalTextPosition = 'before';
139
options.scanning.selectText = false;
140
return options;
141
}
142
···
163
const {action, params} = event.data;
164
const callback = () => {}; // NOP
165
invokeApiMapHandler(this._windowMessageHandlers, action, params, [], callback);
166
-
}
167
-
168
-
/**
169
-
* @param {Event} e
170
-
*/
171
-
_onThemeDarkCheckboxChanged(e) {
172
-
const element = /** @type {HTMLInputElement} */ (e.currentTarget);
173
-
document.documentElement.classList.toggle('dark', element.checked);
174
-
if (this._themeChangeTimeout !== null) {
175
-
clearTimeout(this._themeChangeTimeout);
176
-
}
177
-
this._themeChangeTimeout = setTimeout(() => {
178
-
this._themeChangeTimeout = null;
179
-
const popup = /** @type {Frontend} */ (this._frontend).popup;
180
-
if (popup === null) { return; }
181
-
void popup.updateTheme();
182
-
}, 300);
183
}
184
185
/** */
···
18
19
import * as wanakana from '../../../lib/wanakana.js';
20
import {Frontend} from '../../app/frontend.js';
21
+
import {ThemeController} from '../../app/theme-controller.js';
22
import {createApiMap, invokeApiMapHandler} from '../../core/api-map.js';
23
import {querySelectorNotNull} from '../../dom/query-selector.js';
24
import {TextSourceRange} from '../../dom/text-source-range.js';
···
58
this._languageSummaries = [];
59
/** @type {boolean} */
60
this._wanakanaBound = false;
61
+
/** @type {ThemeController} */
62
+
this._themeController = new ThemeController(document.documentElement);
63
64
/* eslint-disable @stylistic/no-multi-spaces */
65
/** @type {import('popup-preview-frame').ApiMap} */
···
77
async prepare() {
78
window.addEventListener('message', this._onMessage.bind(this), false);
79
80
+
this._themeController.siteTheme = 'light';
81
+
this._themeController.prepare();
82
+
83
// Setup events
84
this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false);
85
this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false);
86
this._exampleTextInput.addEventListener('input', this._onExampleTextInputInput.bind(this), false);
···
140
options.general.popupHorizontalTextPosition = 'below';
141
options.general.popupVerticalTextPosition = 'before';
142
options.scanning.selectText = false;
143
+
this._themeController.theme = options.general.popupTheme;
144
+
this._themeController.updateTheme();
145
return options;
146
}
147
···
168
const {action, params} = event.data;
169
const callback = () => {}; // NOP
170
invokeApiMapHandler(this._windowMessageHandlers, action, params, [], callback);
171
}
172
173
/** */
+19
ext/js/pages/settings/settings-display-controller.js
+19
ext/js/pages/settings/settings-display-controller.js
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
import {isInputElementFocused} from '../../dom/document-util.js';
20
import {PopupMenu} from '../../dom/popup-menu.js';
21
import {querySelectorNotNull} from '../../dom/query-selector.js';
···
39
this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
40
/** @type {(event: MouseEvent) => void} */
41
this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
42
}
43
44
/** */
45
prepare() {
46
const onFabButtonClick = this._onFabButtonClick.bind(this);
47
for (const fabButton of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.fab-button'))) {
48
fabButton.addEventListener('click', onFabButtonClick, false);
···
84
window.addEventListener('keydown', this._onKeyDown.bind(this), false);
85
window.addEventListener('popstate', this._onPopState.bind(this), false);
86
this._updateScrollTarget();
87
}
88
89
// Private
···
16
* along with this program. If not, see <https://www.gnu.org/licenses/>.
17
*/
18
19
+
import {ThemeController} from '../../app/theme-controller.js';
20
import {isInputElementFocused} from '../../dom/document-util.js';
21
import {PopupMenu} from '../../dom/popup-menu.js';
22
import {querySelectorNotNull} from '../../dom/query-selector.js';
···
40
this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
41
/** @type {(event: MouseEvent) => void} */
42
this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
43
+
/** @type {ThemeController} */
44
+
this._themeController = new ThemeController(document.documentElement);
45
}
46
47
/** */
48
prepare() {
49
+
this._themeController.siteTheme = 'light';
50
+
this._themeController.prepare();
51
+
void this._updateTheme();
52
+
53
const onFabButtonClick = this._onFabButtonClick.bind(this);
54
for (const fabButton of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.fab-button'))) {
55
fabButton.addEventListener('click', onFabButtonClick, false);
···
91
window.addEventListener('keydown', this._onKeyDown.bind(this), false);
92
window.addEventListener('popstate', this._onPopState.bind(this), false);
93
this._updateScrollTarget();
94
+
95
+
const themeDropdown = document.querySelector('[data-setting="general.popupTheme"]');
96
+
if (themeDropdown) {
97
+
themeDropdown.addEventListener('change', this._updateTheme.bind(this), false);
98
+
}
99
+
}
100
+
101
+
/** */
102
+
async _updateTheme() {
103
+
const options = await this._settingsController.getOptions();
104
+
this._themeController.theme = options.general.popupTheme;
105
+
this._themeController.updateTheme();
106
}
107
108
// Private
+3
-3
ext/js/pages/settings/settings-main.js
+3
-3
ext/js/pages/settings/settings-main.js
···
169
const sortFrequencyDictionaryController = new SortFrequencyDictionaryController(settingsController);
170
preparePromises.push(sortFrequencyDictionaryController.prepare());
171
172
await Promise.all(preparePromises);
173
174
document.documentElement.dataset.loaded = 'true';
175
-
176
-
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
177
-
settingsDisplayController.prepare();
178
});
···
169
const sortFrequencyDictionaryController = new SortFrequencyDictionaryController(settingsController);
170
preparePromises.push(sortFrequencyDictionaryController.prepare());
171
172
+
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
173
+
settingsDisplayController.prepare();
174
+
175
await Promise.all(preparePromises);
176
177
document.documentElement.dataset.loaded = 'true';
178
});
+3
-3
ext/js/pages/welcome-main.js
+3
-3
ext/js/pages/welcome-main.js
···
92
const languagesController = new LanguagesController(settingsController);
93
preparePromises.push(languagesController.prepare());
94
95
await Promise.all(preparePromises);
96
97
document.documentElement.dataset.loaded = 'true';
98
-
99
-
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
100
-
settingsDisplayController.prepare();
101
});
···
92
const languagesController = new LanguagesController(settingsController);
93
preparePromises.push(languagesController.prepare());
94
95
+
const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
96
+
settingsDisplayController.prepare();
97
+
98
await Promise.all(preparePromises);
99
100
document.documentElement.dataset.loaded = 'true';
101
});
+1
-1
ext/permissions.html
+1
-1
ext/permissions.html
-3
ext/popup-preview.html
-3
ext/popup-preview.html
···
25
<span class="example-text" id="example-text"></span>
26
</div>
27
</div>
28
-
<div class="top-options-right">
29
-
<label class="theme-button"><input type="checkbox" id="theme-dark-checkbox"><span>dark</span></label>
30
-
</div>
31
</div>
32
<div class="popup-placeholder"><div class="placeholder-info">
33
This page uses the dictionaries you have installed in order to show a preview.
+2
-1
ext/quick-start-guide.html
+2
-1
ext/quick-start-guide.html
···
13
<link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
14
<link rel="stylesheet" type="text/css" href="/css/material.css">
15
<link rel="stylesheet" type="text/css" href="/css/settings.css">
16
</head>
17
<body>
18
19
<!-- Main content -->
20
-
<div class="content-outer"><div class="content">
21
<div class="content-left"></div>
22
<div class="content-center">
23
···
13
<link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
14
<link rel="stylesheet" type="text/css" href="/css/material.css">
15
<link rel="stylesheet" type="text/css" href="/css/settings.css">
16
+
<script src="/js/pages/quick-start-guide-main.js" type="module"></script>
17
</head>
18
<body>
19
20
<!-- Main content -->
21
+
<div class="content-outer"><div class="content scrollbar">
22
<div class="content-left"></div>
23
<div class="content-center">
24
+3
-3
ext/settings.html
+3
-3
ext/settings.html
···
19
<body>
20
21
<!-- Main content -->
22
-
<div class="content-outer"><div class="content">
23
<div class="content-left">
24
-
<div class="sidebar"><div class="sidebar-inner">
25
<div class="sidebar-body">
26
<a href="#!profile" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
27
<a href="#!dictionaries" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
···
673
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
674
<div class="settings-item-left">
675
<div class="settings-item-label">Theme</div>
676
-
<div class="settings-item-description">Adjust the style of the popup.</div>
677
</div>
678
<div class="settings-item-right">
679
<div class="settings-item-group">
···
19
<body>
20
21
<!-- Main content -->
22
+
<div class="content-outer"><div class="content scrollbar">
23
<div class="content-left">
24
+
<div class="sidebar"><div class="sidebar-inner scrollbar">
25
<div class="sidebar-body">
26
<a href="#!profile" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
27
<a href="#!dictionaries" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
···
673
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
674
<div class="settings-item-left">
675
<div class="settings-item-label">Theme</div>
676
+
<div class="settings-item-description">Adjust the style of Yomitan.</div>
677
</div>
678
<div class="settings-item-right">
679
<div class="settings-item-group">
+2
-2
ext/welcome.html
+2
-2
ext/welcome.html
···
18
<body>
19
20
<!-- Main content -->
21
-
<div class="content-outer"><div class="content">
22
<div class="content-left"></div>
23
<div class="content-center">
24
···
128
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
129
<div class="settings-item-left">
130
<div class="settings-item-label">Theme</div>
131
-
<div class="settings-item-description">Adjust the style of the popup.</div>
132
</div>
133
<div class="settings-item-right">
134
<select data-setting="general.popupTheme" class="short-width">
···
18
<body>
19
20
<!-- Main content -->
21
+
<div class="content-outer"><div class="content scrollbar">
22
<div class="content-left"></div>
23
<div class="content-center">
24
···
128
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
129
<div class="settings-item-left">
130
<div class="settings-item-label">Theme</div>
131
+
<div class="settings-item-description">Adjust the style of Yomitan.</div>
132
</div>
133
<div class="settings-item-right">
134
<select data-setting="general.popupTheme" class="short-width">