enhance(frontend): カラーモードの設定画面を視覚的にわかりやすく

[kakkokari-gtyih]

What

• 「デバイスのダークモードと同期する」がオンのあいだはスイッチの切替ができないように

Why

Fix #13161

Additional info (optional)

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

Attention: Patch coverage is 28.00000% with 18 lines in your changes missing coverage. Please review.

Project coverage is 20.07%. Comparing base (8b163cd) to head (a2b39a5).
Report is 2 commits behind head on develop.

Files	Patch %	Lines
packages/frontend/src/pages/settings/theme.vue	0.00%	17 Missing ⚠️
packages/frontend/src/os.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #13512       +/-   ##
============================================
- Coverage    39.81%   20.07%   -19.75%     
============================================
  Files         1544      722      -822     
  Lines       190344   100228    -90116     
  Branches      2693     1050     -1643     
============================================
- Hits         75791    20121    -55670     
+ Misses      113990    79565    -34425     
+ Partials       563      542       -21     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kakkokari-gtyih]

c解消

[syuilo]

同期設定に気付かずに設定が元に戻ると訴える人は、同期設定有効時に切り替えできなくしても「なぜか切り替わらない」という訴えに変わるだけな気もするわね
そこまでケアするのであれば同期設定有効時に切り替えようとした場合「同期設定がオンのため切り替えられません」とか「同期設定がオンのため次回起動時には戻ります」的な警告を出す方が良さそう

[syuilo]

とりあえずマージ

[syuilo]

あーでもacrylicPanelは用途が違う可能性がある

[kakkokari-gtyih]

あーでもacrylicPanelは用途が違う可能性がある

なにかにオーバーレイするときに使う色な気がする（acrylicBgなど）ので使用用途としては間違ってない気はするけど

[kakkokari-gtyih]

あーでもacrylicPanelは用途が違う可能性がある

これ使わないようにした

[kakkokari-gtyih]

同期設定に気付かずに設定が元に戻ると訴える人は、同期設定有効時に切り替えできなくしても「なぜか切り替わらない」という訴えに変わるだけな気もするわね

あとdキーを押したときにデバイスカラーモードの追従も一緒に切るようにした
（カラーモード追従をONにしたときには即時的にカラーモードが追従されるので、その逆）

[fruitriin]

ややオフトピですが、dキーのショートカットを意図せず押してしまって、何を押してどの設定が変わったのかわからない人がたくさん見受けられるので、ダイアログか通知だしてあげるなどしてあげるとより良い可能性があるなと思いました

[kakkokari-gtyih]

ややオフトピですが、dキーのショートカットを意図せず押してしまって、何を押してどの設定が変わったのかわからない人がたくさん見受けられるので、ダイアログか通知だしてあげるなどしてあげるとより良い可能性があるなと思いました

「次回以降表示しない」を実装するべきだが、それをここでやるとあれかもしれないので別PRか何かでまとめてやったほうが良い気がした

[Sayamame-beans]

「リノートしました。」と同じ形の表示でどうでしょう?

[kakkokari-gtyih]

「リノートしました。」と同じ形の表示でどうでしょう?

「""何を押して""どの設定が変わったのかわからない」を解消しようと思うとメッセージが長くなりそう

[kakkokari-gtyih]

「何を押して」を諦めて「カラーモードを〇〇に変更しました」だけでも良いかもしれない

[kakkokari-gtyih]

カラーモード追従をONにしたときにはそのタイミングでカラーモードが追従されるので、その逆の動作をしたほうが自然な気はした（意図してカラーモードを変更した際に次回の読み込みでカラーモードが元に戻るのもそれはそれで不自然）

あと間違って押した場合に意図せず同期が解除されることになりそう

これはos.confirmを初回のみ表示で解決できそう

[anatawa12]

そもそもなのですが'd'でダークモードとライトモードの切り替えっていりますかね。ライトモードとダークモードの切り替えがショートカットがいるような頻出するものではないと思うのですが

[syuilo]

てかUI上では同期オンのときは切り替えられないのにショートカットキー経由だと切り替えられるのは整合性が無いわね

[syuilo]

そもそもなのですが'd'でダークモードとライトモードの切り替えっていりますかね。ライトモードとダークモードの切り替えがショートカットがいるような頻出するものではないと思うのですが

個人的にはよく使う

[kakkokari-gtyih]

'd'でダークモードとライトモードの切り替えっていりますかね

postformやemojiPickerの入力欄からフォーカス外れているときにdを押して誤爆することがままあるので要らないならいっそ消しても良いかも

[anatawa12]

デバッグ用途では使うのは私も(ほかソフトウェアなど作ってるものでは)頻出するのですが、日常使用で使いますかね

[syuilo]

朝はライトにして夜はダークにしてる

[kakkokari-gtyih]

朝はライトにして夜はダークにしてる

(off-topic) デバイス同期でできないもんなのかしら

[syuilo]

なので1日2回は押すことになる

[syuilo]

朝はライトにして夜はダークにしてる

(off-topic) デバイス同期でできないもんなのかしら

Windowsにはそのような機能が無い

[anatawa12]

朝はライトにして夜はダークにしてる

これOSに機能なかったっけ(macOSにはあったと思うけどwindowsとかiosとかandroidだとないっけ)

[anatawa12]

であれば適当な自動変更機能のほうが需要に近そう...?

[Sayamame-beans]

ダーク/ライトモードを時間指定で切り替えられるような機能追加を別PRですると良さそう

[syuilo]

Misskeyがそこまでケアするのは大げさじゃないかしら

[Sayamame-beans]

朝はライトにして夜はダークにしてる

これOSに機能なかったっけ(macOSにはあったと思うけどwindowsとかiosとかandroidだとないっけ)

ナイトモード概念はあった気がしますが、ダーク/ライト切り替えはないかも。

[anatawa12]

とりあえずdひとおしで切り替えに関する賛否は一旦このPRのout of scopeになりそうなのでとりあえず discussion を立てますね

[anatawa12]

とりあえずdひとおしで切り替えに関する賛否は一旦このPRのout of scopeになりそうなのでとりあえず discussion を立てますね

=> #14067

[kakkokari-gtyih]

@syuilo ショートカットキー周りの変更は一旦全部もとに戻した

[kakkokari-gtyih]

コンフリクト解消

[kakkokari-gtyih]

コンフリクト解消

[Sayamame-beans]

conflictを解消