diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index 100478aa..09d60b26 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -148,6 +148,15 @@ input[type=checkbox]#storage-persist-button-checkbox { padding: 0; } +#settings-popup-preview-frame { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + width: 100%; + height: 320px; +} + [data-show-for-browser] { display: none; } diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 1021e18d..cadc4443 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -276,6 +276,8 @@ function profileOptionsCreateDefaults() { compactTags: false, compactGlossaries: false, mainDictionary: '', + popupTheme: 'default', + popupOuterTheme: 'default', customPopupCss: '' }, diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 1d780d70..68afe47e 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -118,6 +118,10 @@ class DisplaySearch extends Display { return this.optionsContext; } + setCustomCss() { + // No custom CSS + } + setIntroVisible(visible, animate) { if (this.introVisible === visible) { return; diff --git a/ext/bg/js/settings-popup-preview.js b/ext/bg/js/settings-popup-preview.js new file mode 100644 index 00000000..53a5f1d0 --- /dev/null +++ b/ext/bg/js/settings-popup-preview.js @@ -0,0 +1,161 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +class SettingsPopupPreview { + constructor() { + this.frontend = null; + this.apiOptionsGetOld = apiOptionsGet; + this.popupShown = false; + this.themeChangeTimeout = null; + } + + static create() { + const instance = new SettingsPopupPreview(); + instance.prepare(); + return instance; + } + + async prepare() { + // Setup events + window.addEventListener('resize', (e) => this.onWindowResize(e), false); + window.addEventListener('message', (e) => this.onMessage(e), false); + + const themeDarkCheckbox = document.querySelector('#theme-dark-checkbox'); + if (themeDarkCheckbox !== null) { + themeDarkCheckbox.addEventListener('change', () => this.onThemeDarkCheckboxChanged(themeDarkCheckbox), false); + } + + // Overwrite API functions + window.apiOptionsGet = (...args) => this.apiOptionsGet(...args); + + // Overwrite frontend + this.frontend = Frontend.create(); + window.yomichan_frontend = this.frontend; + + this.frontend.setEnabled = function () {}; + this.frontend.searchClear = function () {}; + + this.frontend.popup.childrenSupported = false; + this.frontend.popup.interactive = false; + + await this.frontend.isPrepared(); + + // Update search + this.updateSearch(); + } + + async apiOptionsGet(...args) { + const options = await this.apiOptionsGetOld(...args); + options.general.enable = true; + options.general.debugInfo = false; + options.general.popupWidth = 400; + options.general.popupHeight = 250; + options.general.popupHorizontalOffset = 0; + options.general.popupVerticalOffset = 10; + options.general.popupHorizontalOffset2 = 10; + options.general.popupVerticalOffset2 = 0; + options.general.popupHorizontalTextPosition = 'below'; + options.general.popupVerticalTextPosition = 'before'; + options.scanning.selectText = false; + return options; + } + + onWindowResize() { + if (this.frontend === null) { return; } + const textSource = this.frontend.textSourceLast; + if (textSource === null) { return; } + + const elementRect = textSource.getRect(); + const writingMode = textSource.getWritingMode(); + const options = this.frontend.options; + this.frontend.popup.show(elementRect, writingMode, options); + } + + onMessage(e) { + const {action, params} = e.data; + const handlers = SettingsPopupPreview.messageHandlers; + if (handlers.hasOwnProperty(action)) { + const handler = handlers[action]; + handler(this, params); + } + } + + onThemeDarkCheckboxChanged(node) { + document.documentElement.classList.toggle('dark', node.checked); + if (this.themeChangeTimeout !== null) { + clearTimeout(this.themeChangeTimeout); + } + this.themeChangeTimeout = setTimeout(() => { + this.themeChangeTimeout = null; + this.frontend.popup.updateTheme(); + }, 300); + } + + setText(text) { + const exampleText = document.querySelector('#example-text'); + if (exampleText === null) { return; } + + exampleText.textContent = text; + this.updateSearch(); + } + + setInfoVisible(visible) { + const node = document.querySelector('.placeholder-info'); + if (node === null) { return; } + + node.classList.toggle('placeholder-info-visible', visible); + } + + setCustomCss(css) { + if (this.frontend === null) { return; } + this.frontend.popup.setCustomCss(css); + } + + async updateSearch() { + const exampleText = document.querySelector('#example-text'); + if (exampleText === null) { return; } + + const textNode = exampleText.firstChild; + if (textNode === null) { return; } + + const range = document.createRange(); + range.selectNode(textNode); + const source = new TextSourceRange(range, range.toString(), null); + + this.frontend.textSourceLast = null; + await this.frontend.searchSource(source, 'script'); + await this.frontend.lastShowPromise; + + if (this.frontend.popup.isVisible()) { + this.popupShown = true; + } + + this.setInfoVisible(!this.popupShown); + } +} + +SettingsPopupPreview.messageHandlers = { + setText: (self, {text}) => self.setText(text), + setCustomCss: (self, {css}) => self.setCustomCss(css) +}; + +SettingsPopupPreview.instance = SettingsPopupPreview.create(); + + + diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index bd15f5d0..900b89bb 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -39,6 +39,8 @@ async function formRead(options) { options.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10); options.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0); options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10); + options.general.popupTheme = $('#popup-theme').val(); + options.general.popupOuterTheme = $('#popup-outer-theme').val(); options.general.customPopupCss = $('#custom-popup-css').val(); options.audio.enabled = $('#audio-playback-enabled').prop('checked'); @@ -107,6 +109,8 @@ async function formWrite(options) { $('#popup-vertical-offset').val(options.general.popupVerticalOffset); $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2); $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2); + $('#popup-theme').val(options.general.popupTheme); + $('#popup-outer-theme').val(options.general.popupOuterTheme); $('#custom-popup-css').val(options.general.customPopupCss); $('#audio-playback-enabled').prop('checked', options.audio.enabled); @@ -248,6 +252,7 @@ async function onReady() { showExtensionInformation(); formSetupEventListeners(); + appearanceInitialize(); await audioSettingsInitialize(); await profileOptionsSetup(); @@ -259,6 +264,49 @@ async function onReady() { $(document).ready(utilAsync(onReady)); +/* + * Appearance + */ + +function appearanceInitialize() { + let previewVisible = false; + $('#settings-popup-preview-button').on('click', () => { + if (previewVisible) { return; } + showAppearancePreview(); + previewVisible = true; + }); +} + +function showAppearancePreview() { + const container = $('#settings-popup-preview-container'); + const buttonContainer = $('#settings-popup-preview-button-container'); + const settings = $('#settings-popup-preview-settings'); + const text = $('#settings-popup-preview-text'); + const customCss = $('#custom-popup-css'); + + const frame = document.createElement('iframe'); + frame.src = '/bg/settings-popup-preview.html'; + frame.id = 'settings-popup-preview-frame'; + + window.wanakana.bind(text[0]); + + text.on('input', () => { + const action = 'setText'; + const params = {text: text.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + customCss.on('input', () => { + const action = 'setCustomCss'; + const params = {css: customCss.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + + container.append(frame); + buttonContainer.remove(); + settings.css('display', ''); +} + + /* * Audio */ diff --git a/ext/bg/search.html b/ext/bg/search.html index 3284ed43..6930830a 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -1,5 +1,5 @@ - + @@ -7,6 +7,8 @@ + +
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html new file mode 100644 index 00000000..3d426f7a --- /dev/null +++ b/ext/bg/settings-popup-preview.html @@ -0,0 +1,125 @@ + + + + + + Yomichan Popup Preview + + + + +
+
+
+ 読め +
+
+
+ This page uses the dictionaries you have installed in order to show a preview. + If you see this message, make sure you have a dictionary installed. +
+
+
+ + + + + + + + + + + + + diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 76955b2c..08e56a09 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -231,10 +231,42 @@
+
+
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+
+
@@ -603,6 +635,7 @@ + diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index a2b06d0f..84098653 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -21,7 +21,7 @@ iframe#yomichan-float { all: initial; background-color: #fff; border: 1px solid #999; - box-shadow: 0 0 10px rgba(0, 0, 0, .5); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); position: fixed; resize: both; visibility: hidden; @@ -29,6 +29,12 @@ iframe#yomichan-float { box-sizing: border-box; } +iframe#yomichan-float[data-yomichan-theme=dark] { + background-color: #1e1e1e; + border: 1px solid #666; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} + iframe#yomichan-float.yomichan-float-full-width { border-left: none; border-right: none; diff --git a/ext/fg/float.html b/ext/fg/float.html index fe1aee8f..2504f448 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -1,18 +1,12 @@ - + - - - + +
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 5164cd8f..4b3cd848 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -21,7 +21,6 @@ class DisplayFloat extends Display { constructor() { super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; - this.styleNode = null; this.optionsContext = { depth: 0, @@ -101,11 +100,6 @@ class DisplayFloat extends Display { async initialize(options, popupInfo, url, childrenSupported) { await super.initialize(options); - const css = options.general.customPopupCss; - if (css) { - this.setStyle(css); - } - const {id, depth, parentFrameId} = popupInfo; this.optionsContext.depth = depth; this.optionsContext.url = url; @@ -114,20 +108,6 @@ class DisplayFloat extends Display { popupNestedInitialize(id, depth, parentFrameId, url); } } - - setStyle(css) { - const parent = document.head; - - if (this.styleNode === null) { - this.styleNode = document.createElement('style'); - } - - this.styleNode.textContent = css; - - if (this.styleNode.parentNode !== parent) { - parent.appendChild(this.styleNode); - } - } } DisplayFloat.onKeyDownHandlers = { @@ -145,6 +125,7 @@ DisplayFloat.messageHandlers = { kanjiShow: (self, {definitions, context}) => self.kanjiShow(definitions, context), clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(), orphaned: (self) => self.onOrphaned(), + setCustomCss: (self, {css}) => self.setCustomCss(css), initialize: (self, {options, popupInfo, url, childrenSupported}) => self.initialize(options, popupInfo, url, childrenSupported) }; diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 52a23889..3ddeae78 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -44,6 +44,8 @@ class Frontend { this.isPreparedPromiseResolve = null; this.isPreparedPromise = new Promise((resolve) => { this.isPreparedPromiseResolve = resolve; }); + + this.lastShowPromise = Promise.resolve(); } static create() { @@ -331,7 +333,7 @@ class Frontend { } catch (e) { if (window.yomichan_orphaned) { if (textSource && this.options.scanning.modifier !== 'none') { - this.popup.showOrphaned( + this.lastShowPromise = this.popup.showOrphaned( textSource.getRect(), textSource.getWritingMode() ); @@ -369,7 +371,7 @@ class Frontend { const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const url = window.location.href; - this.popup.termsShow( + this.lastShowPromise = this.popup.termsShow( textSource.getRect(), textSource.getWritingMode(), definitions, @@ -399,7 +401,7 @@ class Frontend { const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt); const url = window.location.href; - this.popup.kanjiShow( + this.lastShowPromise = this.popup.kanjiShow( textSource.getRect(), textSource.getWritingMode(), definitions, diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js index 74a5153a..bb323f64 100644 --- a/ext/fg/js/popup-proxy-host.js +++ b/ext/fg/js/popup-proxy-host.js @@ -45,6 +45,7 @@ class PopupProxyHost { containsPoint: ({id, x, y}) => this.containsPoint(id, x, y), termsShow: ({id, elementRect, writingMode, definitions, context}) => this.termsShow(id, elementRect, writingMode, definitions, context), kanjiShow: ({id, elementRect, writingMode, definitions, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, context), + setCustomCss: ({id, css}) => this.setCustomCss(id, css), clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id) }); } @@ -126,6 +127,11 @@ class PopupProxyHost { return await popup.kanjiShow(elementRect, writingMode, definitions, context); } + async setCustomCss(id, css) { + const popup = this.getPopup(id); + return popup.setCustomCss(css); + } + async clearAutoPlayTimer(id) { const popup = this.getPopup(id); return popup.clearAutoPlayTimer(); diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js index e8d6bc98..6ea94b6a 100644 --- a/ext/fg/js/popup-proxy.js +++ b/ext/fg/js/popup-proxy.js @@ -88,6 +88,11 @@ class PopupProxy { return await this.invokeHostApi('kanjiShow', {id, elementRect, writingMode, definitions, context}); } + async setCustomCss(css) { + const id = await this.getPopupId(); + return await this.invokeHostApi('setCustomCss', {id, css}); + } + async clearAutoPlayTimer() { if (this.id === null) { return; diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index f36bb436..ef4cdb67 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -85,6 +85,7 @@ class Popup { async setOptions(options) { this.options = options; + this.updateTheme(); } async show(elementRect, writingMode) { @@ -269,6 +270,47 @@ class Popup { } } + updateTheme() { + this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme); + } + + getTheme(themeName) { + if (themeName === 'auto') { + const color = [255, 255, 255]; + Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor)); + Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor)); + const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128); + themeName = dark ? 'dark' : 'default'; + } + + return themeName; + } + + static addColor(target, color) { + if (color === null) { return; } + + const a = color[3]; + if (a <= 0.0) { return; } + + const aInv = 1.0 - a; + for (let i = 0; i < 3; ++i) { + target[i] = target[i] * aInv + color[i] * a; + } + } + + static getColorInfo(cssColor) { + const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+)\s*)?\)\s*$/.exec(cssColor); + if (m === null) { return null; } + + const m4 = m[4]; + return [ + Number.parseInt(m[1], 10), + Number.parseInt(m[2], 10), + Number.parseInt(m[3], 10), + m4 ? Math.max(0.0, Math.min(1.0, Number.parseFloat(m4))) : 1.0 + ]; + } + async containsPoint(x, y) { for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) { const rect = popup.container.getBoundingClientRect(); @@ -291,6 +333,10 @@ class Popup { this.invokeApi('kanjiShow', {definitions, context}); } + async setCustomCss(css) { + this.invokeApi('setCustomCss', {css}); + } + clearAutoPlayTimer() { if (this.isInjected) { this.invokeApi('clearAutoPlayTimer'); diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css new file mode 100644 index 00000000..34a0ccd1 --- /dev/null +++ b/ext/mixed/css/display-dark.css @@ -0,0 +1,50 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the entrys of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +body { background-color: #1e1e1e; color: #d4d4d4; } + +hr { border-top-color: #2f2f2f; } + +.tag-default { background-color: #69696e; } +.tag-name { background-color: #489148; } +.tag-expression { background-color: #b07f39; } +.tag-popular { background-color: #025caa; } +.tag-frequent { background-color: #4490a7; } +.tag-archaism { background-color: #b04340; } +.tag-dictionary { background-color: #9057ad; } +.tag-frequency { background-color: #489148; } +.tag-partOfSpeech { background-color: #565656; } + +.reasons { color: #888888; } +.glossary li { color: #888888; } +.glossary-item { color: #d4d4d4; } +.label { color: #e1e1e1; } + +.expression .kanji-link { + border-bottom-color: #888888; + color: #CCCCCC; +} + +.expression-popular, .expression-popular .kanji-link { + color: #0275d8; +} + +.expression-rare, .expression-rare .kanji-link { + color: #666666; +} diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css new file mode 100644 index 00000000..176c5387 --- /dev/null +++ b/ext/mixed/css/display-default.css @@ -0,0 +1,50 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the entrys of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +body { background-color: #ffffff; color: #333333; } + +hr { border-top-color: #eeeeee; } + +.tag-default { background-color: #8a8a91; } +.tag-name { background-color: #5cb85c; } +.tag-expression { background-color: #f0ad4e; } +.tag-popular { background-color: #0275d8; } +.tag-frequent { background-color: #5bc0de; } +.tag-archaism { background-color: #d9534f; } +.tag-dictionary { background-color: #aa66cc; } +.tag-frequency { background-color: #5cb85c; } +.tag-partOfSpeech { background-color: #565656; } + +.reasons { color: #777777; } +.glossary li { color: #777777; } +.glossary-item { color: #000000; } +.label { color: #ffffff; } + +.expression .kanji-link { + border-bottom-color: #777777; + color: #333333; +} + +.expression-popular, .expression-popular .kanji-link { + color: #0275d8; +} + +.expression-rare, .expression-rare .kanji-link { + color: #999999; +} diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 8a4cf4a7..7ebad090 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -30,9 +30,31 @@ * General */ +html.yomichan-float:not([data-yomichan-theme]), +html.yomichan-float:not([data-yomichan-theme]) body { + background-color: transparent; +} + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + margin: 0; + border: 0; + padding: 0; +} + hr { padding: 0px; margin: 0px; + border: 0; + border-top-width: 1px; + border-top-style: solid; +} + +ol, ul { + margin-top: 0; + margin-bottom: 10px; } #spinner { @@ -60,40 +82,10 @@ hr { padding-bottom: 10px; } -.tag-default { - background-color: #8a8a91; -} - -.tag-name { - background-color: #5cb85c; -} - -.tag-expression { - background-color: #f0ad4e; -} - -.tag-popular { - background-color: #0275d8; -} - -.tag-frequent { - background-color: #5bc0de; -} - -.tag-archaism { - background-color: #d9534f; -} - -.tag-dictionary { - background-color: #aa66cc; -} - -.tag-frequency { - background-color: #5cb85c; -} - -.tag-partOfSpeech { - background-color: #565656; +html:root.yomichan-float .entry, +html:root.yomichan-float .note { + padding-left: 10px; + padding-right: 10px; } .actions .disabled { @@ -103,6 +95,7 @@ hr { .actions .disabled img { -webkit-filter: grayscale(100%); + filter: grayscale(100%); opacity: 0.25; } @@ -111,7 +104,7 @@ hr { } .actions { - display: inline-block; + display: block; float: right; } @@ -127,19 +120,11 @@ hr { } .expression .kanji-link { - border-bottom: 1px #777 dashed; - color: #333; + border-bottom-width: 1px; + border-bottom-style: dashed; text-decoration: none; } -.expression-popular, .expression-popular .kanji-link { - color: #0275d8; -} - -.expression-rare, .expression-rare .kanji-link { - color: #999; -} - .expression .peek-wrapper { font-size: 14px; white-space: nowrap; @@ -173,7 +158,6 @@ hr { } .reasons { - color: #777; display: inline-block; } @@ -199,14 +183,6 @@ hr { content: " | "; } -.glossary li { - color: #777; -} - -.glossary-item { - color: #000; -} - div.glossary-item.compact-glossary { display: inline; } @@ -234,3 +210,15 @@ div.glossary-item.compact-glossary { .entry:not(.entry-current) .current { display: none; } + +.label { + display: inline; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; +} diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index cd9f41bd..51a3dc22 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -29,6 +29,7 @@ class Display { this.audioPlaying = null; this.audioFallback = null; this.audioCache = {}; + this.styleNode = null; this.eventListeners = []; this.persistentEventListeners = []; @@ -194,6 +195,32 @@ class Display { async updateOptions(options) { this.options = options ? options : await apiOptionsGet(this.getOptionsContext()); + this.updateTheme(this.options.general.popupTheme); + this.setCustomCss(this.options.general.customPopupCss); + } + + updateTheme(themeName) { + document.documentElement.dataset.yomichanTheme = themeName; + + const stylesheets = document.querySelectorAll('link[data-yomichan-theme-name]'); + for (const stylesheet of stylesheets) { + const match = (stylesheet.dataset.yomichanThemeName === themeName); + stylesheet.rel = (match ? 'stylesheet' : 'stylesheet alternate'); + } + } + + setCustomCss(css) { + if (this.styleNode === null) { + if (css.length === 0) { return; } + this.styleNode = document.createElement('style'); + } + + this.styleNode.textContent = css; + + const parent = document.head; + if (this.styleNode.parentNode !== parent) { + parent.appendChild(this.styleNode); + } } setInteractive(interactive) {