2022-06-28 (LogseqのCardyを自分流にアレンジとプチ改良)

Logseqのアウトライン表示にて、第一階層どうしの境界がもう少しわかりやすいと良いのになと思っていた。

WineRoses氏が先週投稿された「Logseqをcustom.cssでCardyスタイルにしてみた」がこの点の解決に良さそうなので、いまさらながら入れてみた。

ダークモードはも少し暗めが良かったか。人によってそれぞれだから、ご自由にカスタマイズしてください。

ブロックのバックグラウンドカラーを左サイドバーのバックグラウンドカラーに合わせてみた。

.dark-theme .ls-block {
  background: darkslategray;
}

を、

.ls-block {
  background: var(--ls-secondary-background-color);
}

.dark-theme {
  --ls-block-highlight-color: var(--ls-tertiary-background-color);
}

にアレンジ。
ダークテーマ時、ブロックのバックグラウンドカラーがCardy未適用時と比べて少し明るくなるので、ダークテーマ時の対象ブロック(選択ブロック)のハイライトのカラーも左サイドバーのハイライトカラーに合わせて明るくした。

問題点
　
ブロックメニューを出したとき。本来なら対象のブロックが青くなるのですが、変わらないときがあります。custom.cssが勝つ様子。

ダークテーマでそうなる感じ。
これで改善されるかも。
以下をなるべく後ろの方に入れる。(少なくとも、上のブロックのバックグラウンドカラー変更よりも後に)

.ls-block.selected {
    transition: background-color .15s;
    background-color: var(--ls-block-highlight-color);  
}

.ls-block.selected .ls-block {
    transition: background-color .15s;
    background-color: var(--ls-block-highlight-color);  
}

デフォルトのダークテーマ時

デフォルトのライトテーマ時

数値や色の名称ではなく、他のパーツの色を参照して色指定しているので、別のテーマをインストールしても違和感はあまり発生しないだろう。(インストールしたテーマがデフォルトテーマと全くかけ離れた色の指定方法をしていたら無理だが)