Dark Editor CSS
style.css.page, .page a, .page video, .page iframe,
.code-block-start, .code-block-start span {
filter: invert(100%);
}
.line {
font-weight: 600;
}
しかし画像やビデオは元のままの色が保たれる
100%反転をもう一度かけて、元に戻している為
黒系テーマ
projectのテーマをHacker等の黒系にすると
ナビゲーションバー、関連ページリスト、エディタ外の背景色が黒っぽくなる
しかし、エディタの中は黒くならない
なぜか?
エディタの背景色を黒にすると、他にも色々な色を設定し直す必要がある
文字色・リンク色
青リンクは存在するページ、赤リンクは空ページへのリンクという意味がある
コードブロック記法のシンタックスハイライトの色
別のCSSファイルになっていて、切り替えがめんどくさい
エディタ内に現れるGUI部品の色が白背景を前提に作られている
たぶん他にもある
黒いエディタに合わせて、色を再設定する部分が予想以上に多かった
スタイル上書きするDOM要素が多い
今後の機能追加で知らない間に壊れてたりするようになる
ようするに、めんどくさい
黒背景にできるんだけど、画像も色が反転してしまう
人間の顔が青くなり、髪が白くなる
アイコン記法がすごい事になる
すごい事になるのだが、スクリーンキャプチャしても元の色で保存されるので様子を見せる事ができない
Macの システム環境設定 → アクセシビリティ → ディスプレイ → カラーを反転
で試してみてほしい
なかなか良い
要素を指定して、 filter: invert(100%);
で色を反転できる
全ての色が反転すれば、リンク記法の補完やコードブロック記法などを細かく色指定しなくても読める色になる
Scrapboxのリンクは青リンクが存在するページ、赤リンクが空ページ、という意味がある
色反転すると意味が逆になってしまう
<a>
タグにはさらにもう一度 filter: invert(100%);
をかけて元に戻す
画像
こちらも filter: invert(100%);
をもう一度かけて元に戻したいのだが
<img>
は今のところ全て <a>
で囲まれているので、元に戻っている。やらなくていい。
ビデオ
<iframe>
や <video>
には <a>
がついていないので、 filter: invert(100%);
で反転する
これでUIも色反転される
Hacker系以外のテーマの場合
関連ページ部分が白いカードに黒文字になっている
このセレクタも追加すると、関連ページ部分の色を反転できる
.related-page-list, .related-page-list img, .related-page-list .link
なお、今後Scrapbox本体のHacker系テーマが更新されて、エディタ内が黒くなる場合があるかもしれない
その場合は、このUserCSSによって逆にエディタが白くなってしまう
そうなったらUserCSSから削除してください