電子ペーパー端末だけ違うテーマにする
テーマの切り替え Theme
目の健康のために、電子ペーパーでは Light Mode にしたいが他端末では Dark Mode にしたい。ランダムなテーマにするとかの応用が効くかもしれない。
Scrapbox で設定するテーマは "Minimal"( default-minimal ) 等にしておく。
scrapbox に
addEventListener イベントを差し込んでテーマを設定すると時間差で上書きされることがある。それを防ぐために、代わりに
MutationObserver を利用する。
下のコードのモジュール化は不十分なので、今のところは自分の
UserScript にコピーしておくと良いと思う。"show user agent" で調べると Google 検索が User-Agent を表示してくれるので、それを見て端末を識別する文字列（例えば
"NovaAir" ）を調べられる。
theme-switcher.js const NON_EPAPER_THEME = "default-dark"; // 使いたい Dark Theme にする。
const THEME_ATTRIBUTE_NAME = "data-project-theme";
const THEME_ELEMENT = document.documentElement;
const EPAPER_DEVICE_LIST = ["NovaAir"]; // 自分が使っている電子ペーパー端末に変える。
applyTheme();
let previousTheme = THEME_ELEMENT.getAttribute(THEME_ATTRIBUTE_NAME);
const themeObserver = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
if (mutation.type === "attributes" && mutation.attributeName === THEME_ATTRIBUTE_NAME) {
const currentTheme = mutation.target.getAttribute(THEME_ATTRIBUTE_NAME);
if (currentTheme !== previousTheme) {
applyTheme();
}
previousTheme = currentTheme;
}
}
});
themeObserver.observe(THEME_ELEMENT, { attributes: true });
scrapbox.addListener("project:changed", () => { themeObserver.disconnect(); });
/// 電子ペーパー以外では NON_EPAPER_THEME テーマにする
function applyTheme() {
if (!isEPaper()) {
THEME_ELEMENT.setAttribute(THEME_ATTRIBUTE_NAME, NON_EPAPER_THEME);
}
}
function isEPaper() {
return EPAPER_DEVICE_LIST.some(device => navigator.userAgent.includes(device));
}
こんな風な interface が良いのかな？
draft.jsimport { hoge } from "/scrapboxlab/電子ペーパー端末だけ違うテーマにする/script.js";
import { settings } from "/somewhere/theme-setting.js";
hoge(settings); // { nonEPaperTheme: 'aa', /* ... */ };