diff options
| -rw-r--r-- | ext/fg/css/client.css | 3 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 19 |
2 files changed, 10 insertions, 12 deletions
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index 84098653..4b824da3 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -29,7 +29,8 @@ iframe#yomichan-float { box-sizing: border-box; } -iframe#yomichan-float[data-yomichan-theme=dark] { +iframe#yomichan-float[data-yomichan-theme=dark], +iframe#yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] { background-color: #1e1e1e; border: 1px solid #666; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index ef4cdb67..880e3efe 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -271,19 +271,16 @@ class Popup { } updateTheme() { - this.container.dataset.yomichanTheme = this.getTheme(this.options.general.popupOuterTheme); + this.container.dataset.yomichanTheme = this.options.general.popupOuterTheme; + this.container.dataset.yomichanSiteColor = this.getSiteColor(); } - 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; + getSiteColor() { + 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); + return dark ? 'dark' : 'light'; } static addColor(target, color) { |