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 37.50000% with 5 lines in your changes missing coverage. Please review.

Project coverage is 14.27%. Comparing base (bee4db8) to head (9deaa44).

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

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #13512       +/-   ##
============================================
- Coverage    41.58%   14.27%   -27.32%     
============================================
  Files         1617      779      -838     
  Lines       165038    71372    -93666     
  Branches      4072     1243     -2829     
============================================
- Hits         68631    10188    -58443     
+ Misses       95931    60761    -35170     
+ Partials       476      423       -53     

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

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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]

'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を解消

[Sayamame-beans]

コンフリクト解消