WorkFlowyのアプリで選択中の背景色を変更する
option + command + i で開発者用コンソールを立ち上げる
以下のような画面
https://gyazo.com/46a9bd88c35a87c3970c0be99c2f80ed
上のほうのタブからConsoleタブを探してクリックする
以下のような画面に変わる
https://gyazo.com/94a030c1a402ac857d9eebc1c8293a7c
空いている部分をクリックすると文字が入力できるようになるので、以下のコードをコピペする（var から styleTag);の部分まで
code:old_script.js
var styleTag = document.createElement('style');styleTag.innerText = `
._a4lwbb.addedToSelection::before {
background: rgb(180 69 69);
}
body.windowBlurred ._a4lwbb.addedToSelection::before {
background: rgb(180 69 69);
}
body.windowBlurred ._uanex1::selection, body.windowBlurred ._uanex1 ::selection {
background-color: rgba(183, 69, 69,0.7);
}
._uanex1::selection, ._uanex1 ::selection {
background-color: rgba(180, 69, 69, 0.7);
}
`;document.getElementsByTagName('head')0.insertAdjacentElement('beforeend', styleTag); https://gyazo.com/64e862d57037e199150da4b41b15d1cb
コピペしたところ。
コピペが終わったらリターンキー。これでコードが実行される。
https://gyazo.com/e9956daa56b91e978168f24965c51810
新しいstyleが追加された、という結果が表示される。
しかるのちに、テキストを選択してみる。
https://gyazo.com/fc90261e7b96023963c896d74d57900f
https://gyazo.com/3c504439d9504b4642779378cad6d89c
無事色が変更された。
注意点
色は適当なものです。自分で好みの色指定をしてください
コード中のrgbやrgbaという部分が色指定です。
"#RRGGBBのような書き方でもOKです。
その他色の指定方法について
アプリを再起動すると設定がリセットされるので、上記の手順を再実行してください
WorkFlowyに使うコードを置いておくと手間が省けます
（倉下の例）
https://gyazo.com/aa704b7ac4237e5c76d02d6290b304c8
2023/8/31
HTMLの要素が変わった？
code:old2.js
var styleTag = document.createElement('style');styleTag.innerText = `
._a4lwbb.addedToSelection::before {
background: rgb(180 69 69);
}
body.windowBlurred ._a4lwbb.addedToSelection::before {
background: rgb(180 69 69);
}
body.windowBlurred ._1y7sl1y::selection, body.windowBlurred ._1y7sl1y ::selection {
background-color: rgba(183, 69, 69,0.7);
}
._1y7sl1y::selection, ._1y7sl1y ::selection {
background-color: rgba(183, 69, 69,0.7);
}
`;document.getElementsByTagName('head')0.insertAdjacentElement('beforeend', styleTag); 2024/3/6
CSSの設定が変わったもよう
要素の指定を簡素化して、HTMLやCSSの変化に耐えられるようにした
code:script.js
var styleTag = document.createElement('style');styleTag.innerText = `
body{
--wf-color-bg-select:rgba(183, 69, 69,0.7);
--wf-color-bg-secondary:rgba(183, 69, 69,0.7);
}
background:var(--wf-color-bg-select)
}
background:var(--wf-color-bg-select)
}
`;document.getElementsByTagName('head')0.insertAdjacentElement('beforeend', styleTag); ＊rgba(183, 69, 69,0.7)の部分を好みの色に置き換えてください
WorkFlowyで選択範囲のCSSを探す方法
Workflowyのハイライトは単語の選択、ブロックの選択でCSSに違いがある
ブロックの選択の場合
ブロックを選択するとそのブロックに、addedToSelectionというクラスが付与される
addedToSelection::beforeによって選択画面を表示している四角の色つき領域が生成されている
CSSでもそこで色が指定されているので上書きは簡単
実際に“before`を押してみれば、CSSも確認できる
https://gyazo.com/4f38c281086ec2759d7a716d7606fa2a
これをクリックすると↓
https://gyazo.com/b829fa200fcf5ef4a79c251f53303ac3
body.windowBlurredがついているものと、ついていないものがある
動作は不明だが、フォーカスを失ったときに変化するらしいので両方上書きしておくのが吉
よく見ると、色の指定が直接ではなくCSS変数が使われているので、そちらを上書きする手もある
そうすれば、._zyjps3のような不規則なクラス名が変化しても、CSS変数を使う構図が変わっていなければ変わらず使い続けられるのでオススメ
単語の選択の場合
通常の::sectionが当たっている
はずなのだが、指定が見えない
指定されていないのかもしれない
だとしたら、普通にCSSを上書きするだけで事足りる
#app ::selection と#app::selection が指定されているのはWebブラウザによって解釈が異なるから両方に対応するためだと思われる
別のアプローチ
Styleをselecで絞り込むと--wf-color-bg-selectというCSS変数が見つかった
これを書き換えてみると選択の背景色がかわる
よって、これも上書きすればいい。
:rootというグローバルな領域で設定されているので、それよりも詳細度が高いbodyにしておく
#appのようにさらに詳細度を上げてもいい
要素を具体的に特定した以前のバージョンの例（耐久性が低い）
code:test.js
var styleTag = document.createElement('style');styleTag.innerText = `
body.windowBlurred ._zyjps3.addedToSelection::before {
background: rgb(180 69 69);
}
._zyjps3.addedToSelection::before {
background: rgb(180 69 69);
}
body.windowBlurred ._mf9of9::selection, body.windowBlurred ._mf9of9 ::selection {
background-color: rgba(183, 69, 69,0.7);
}
._mf9of9::selection, ._mf9of9 ::selection {
background-color: rgba(183, 69, 69,0.7);
}
`;document.getElementsByTagName('head')0.insertAdjacentElement('beforeend', styleTag);