WorkFlowyのスタイルを「matFlow.dark」に変更

WorkFlowyのメインのスタイル（※）を変更しました。新しく使い始めたのは「matFlow.dark」です。
※stylishのテーマのことです。

こんな感じになります。

ちなみに、テーマを外すとこう。

まったく別ツールですね。

特徴

このテーマの面白いところは、どこかのトピックにZoom inすると、

このように見出しがヘッダーっぽくスタイルされているところです。なんかちょっとかっこいいですよね。

あと、トピックを閉じたものと比較してもらうとわかりますが、開いているとダッシュ線のボーダーが出てきて、閉じているとそれが消えます。なかなか興味深い仕様です。

もう一つ、見出しにあたるトピックのノートは、背景色が変わります。

そのノートがどこに従属しているのかが、視覚的にずいぶんわかりやすくなりますね。なんとなくですが、ちょっとカードをイメージしました。

カスタマイズ

ちなみに、使う上で、少しばかりスタイルに手を入れています。

一つは、Zoom inしていない状態のノートも背景色を変えるようにしたこと。少しだけ薄めの灰色になっています。ノートをあまり使わない人は気にならないでしょうが、案外「これはノートなのかどうか」というのが通常のスタイルだとわかりにくかったりするんですよね。背景色を変えておけばばっちりです。

あと、「matFlow.dark」のノーマル状態では、ノートの改行が改行として表示されず常に詰められてしまうので、それを改行表示アリに変えておきました。

.noted > .notes > .content {
height: auto !important;
min-height: 20px !important;
overflow: visible !important;
line-height: 20px !important;
display: block !important;
-webkit-box-orient: inherit !important;
-webkit-line-clamp: inherit !important;
white-space: pre !important;
}


の、「white-space: pre !important;」がその指定です。元に戻したければ、preを「inherit」にすればOK。

さいごに

これまで私は「エディタの背景色と言えばベージュでしょ」と、黒系の背景色は使ったことがなかったんですが、なかなか良い感じです。目に優しいとかではなく、心のモードが切り替わる効果があり……そうな気がします。それは言うならば、俺は今アウトライナーを使っているんだぞ、というような気持ちのスイッチが入るといった感じです。

というわけで、しばらくこのスタイルでいくことにしました。細かいカスタマイズがあれば、また書いてみます。

▼その他リンク：
R-style » 『Stylish』でWorkflowyの見た目をカスタマイズした
WorkFlowyでハイライトを使えるようにカスタマイズする方法 | シゴタノ！