diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index f36bb436..3556a52e 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.container.dataset.yomichanTheme = options.general.popupTheme; } async show(elementRect, writingMode) { diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css new file mode 100644 index 00000000..75e42565 --- /dev/null +++ b/ext/mixed/css/display-dark.css @@ -0,0 +1,51 @@ +/* + * 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, +html.yomichan-float 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..ce1008a8 --- /dev/null +++ b/ext/mixed/css/display-default.css @@ -0,0 +1,51 @@ +/* + * 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, +html.yomichan-float 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 e88372bb..d899e9fc 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -30,12 +30,15 @@ * General */ +html.yomichan-float, +html.yomichan-float body { + background-color: transparent; +} + body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; - color: #333; - background-color: #fff; margin: 0; border: 0; padding: 0; @@ -45,7 +48,8 @@ hr { padding: 0px; margin: 0px; border: 0; - border-top: 1px solid #eee; + border-top-width: 1px; + border-top-style: solid; } ol, ul { @@ -84,42 +88,6 @@ html:root.yomichan-float .note { padding-right: 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; -} - .actions .disabled { pointer-events: none; cursor: default; @@ -152,19 +120,11 @@ html:root.yomichan-float .note { } .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; @@ -198,7 +158,6 @@ html:root.yomichan-float .note { } .reasons { - color: #777; display: inline-block; } @@ -224,14 +183,6 @@ html:root.yomichan-float .note { content: " | "; } -.glossary li { - color: #777; -} - -.glossary-item { - color: #000; -} - div.glossary-item.compact-glossary { display: inline; } @@ -266,7 +217,6 @@ div.glossary-item.compact-glossary { font-size: 75%; font-weight: 700; line-height: 1; - color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index cd9f41bd..2bf917aa 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -194,6 +194,17 @@ class Display { async updateOptions(options) { this.options = options ? options : await apiOptionsGet(this.getOptionsContext()); + this.updateTheme(this.options.general.popupTheme); + } + + 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'); + } } setInteractive(interactive) { -- cgit v1.2.3