Scrapboxで自分だけテーマを変更する方法

はじめに

Scrapboxでは、画面のテーマはProjectごとに設定する方式であるため、各々好きなテーマを選択することはできません。そのため、視力や眼精疲労などの理由で自分だけライト/ダークテーマにしたい人もいると考えられます。本稿では、そのような人を含め、ScrapboxのProjectにおいて自分に表示される画面だけ、テーマをカスタマイズする方法について備忘録がてら記載しておきます。

やり方

ScrapboxではUserScriptという機能があります。本稿ではこれを利用してテーマの変更を行います。

以下のスクリプトをScrapboxのProject内の自分のユーザ名のページにcode:script.jsとして記述し、保存後に表示される「Load new UserScript」というボタンをクリックするだけです。

document.documentElement.dataset.projectTheme = "default"
const observer = new MutationObserver(() => {
  	document.documentElement.dataset.projectTheme = "default"
});
observer.observe(document.documentElement, {attribute: true, subtree: true, childList: true})

document.documentElement.dataset.projectThemeには"default"を代入しています。"default"は初期設定のライトテーマです。"default-dark"に置き換えるとデフォルトのダークテーマになります。他にもScrapbox上で利用可能なテーマなら、それを設定した際のdocument.documentElement.dataset.projectThemeを開発者ツールから確認することで、自由にScrapboxが提供するテーマに切り替えられると思います。

実装小話

ここでなぜこのような実装になっているかについて書きます。どうでもいい方は読み飛ばしてください。
私はライトモードが好きなので、Project SettingsでダークモードになっているProjectをどうにかライトモードにしたいと考え、色々と検索したところ、どうやらdocument.documentElement.dataset.projectThemeを書き換えれば良いらしいということを知りました。(https://scrapbox.io/villagepump/Scrapboxのライトテーマとダークテーマをワンタッチで切り替え)

しかし、どの画面でもライトモードを継続してもらうにはこの方法では不足していました。リロードや他のページに遷移するとライトモードではなくなってしまうためです。また、ページを表示する画面上でしか操作できないという問題も抱えています。色々試したところ、document.documentElement.dataset.projectThemeはページ遷移ごとに、Projectの設定に従ってページ内のJavaScriptによって書き換えられてしまうことや、リロードしない限りUserScriptが発火しないことが発覚しました。(恐らくSPAの類いの仕組みで、これらの挙動が発生していると思われます。)

従って、document.documentElementの変更を監視し、変更されるごとにprojectThemeを再代入するように実装を行うことでこれらを回避できました。また、初期状態ではこのイベントは発火しないので、初期状態のために最初に普通の代入も行っています。

まとめ

UserScriptでScrapboxの自分に表示されるテーマだけを書き換えるスクリプトを書いたので供養しました。他にもUserCSSで自分のテーマをカスタムすることも可能だと思います。(UserCSSで他の方のCSSをimportすれば楽に実現できそう。)みなさんが自分の眼にとってより良いテーマ選択ができることを祈っています。