{希哲17年1月30日}{希哲17年1月30日の副日記}{認識させたい}{非固定}{重たく見える}{変えたり}{ライトテーマ}{追従する}{機能公開}{色設定}...=}(93)

{希哲17年1月30日の開発 K#F85E/E74C-8429}

ダークテーマ実装その他軽微な装体調整など。

ダークテーマ実装ではテーマ切り替えボタン機能実装概ね完了し残す装体整理のみとなった。今後は色設定CSS 変数への置換中心に装体整理兼ダークテーマ実装」を少しずつでも進め機能公開目指す

テーマ切り替えボタン機能25日4歩検討通りで,初期状態では司組設定追従司組設定異なる切り替える固定同じ切り替えるとまた司組設定追従するただし実装としては初期化というよりライトテーマダークテーマ固定有無組み合わせ4種類状態持たせることにした後縁非固定設定認識させたいため)

外観については drop-shadow影を付けたり月アイコン方向変えたり調整することを考えていたが,結局現状維持とした。限りなく薄く付けても不必要重たく見える月アイコンも,欠けている部分左向き沿うので調和的見える

状態クッキー保存するため後縁での最適化出来単純なトグルボタンのみで4種類状態直感的に切り替えることも出来見触れ良好,と理想的なテーマ切り替えボタン出来上がった

舞覧開発者通類テーマ司組設定簡単に切り替えられることを知り手定め捗った

=}
{希哲17年1月14日の開発}{希哲17年1月14日の進捗}{希哲17年1月14日}{省けてしまった}{アイコン作成}{よく考えたら}{形状的}{実験中}{作るつもり}{面白い発見}...=}(135)

{希哲17年1月14日6歩 K#F85E/E74C-ED7A}

進捗時限記録中略

課題だったテーマ切り替えボタンイメージ急速に固まったため,ダークテーマ実装におけるテーマ切り替え用合いについてまとめ終了

従来の上部メニュー様子使ってきた歯車アイコンそのまま太陽見立てトグルボタン風装飾することにした。CSS のみで表現し,ラベルには「」「」を使う開発者通類試しに装体作ってみた録落ち中のメニュー案

未録入り場合メニュー設定輪結部分に,録入り中場合設定ページ <main>右上置く。この領当て既に固まっていたが,テーマ切り替えボタン細部なかなか決まらなかった昨日までは,緑色太陽アイコン月アイコン右隣に「明るい」「暗い」のラベル付ける程度簡素なボタンイメージしていた。しかし,これでは冗長な上に直感的とも言い難い

ふとトグルボタン風にしてみたらどうかと開発者通類実験してみたら,想像以上に良かった簡潔ながら邪魔にならない程度に目立ち,ぱっと見て役割察しやすいデライトテーマ切り替えボタンとしてこれ以上出ない判断採用決めた

歯車アイコンそのまま太陽アイコンとして使えるというのは面白い発見だった。形状的にも設定という意味的にも似ていることに気付いて,設定輪結入れ替えることを思いついたのはだいぶ前で,デザイン的遊び出来そうだとは思っていたが,アイコン別に作るつもりだった。とりあえず実験中代替として使ってみた思いのほかしっくり来た

月アイコンも,よく考えたら画像用意するまでもなく CSS十分なことに気付いた結局アイコン作成手間省けてしまった


もう一つ課題として,応司ダークモードをどう扱うかという問題があったが,デライトでは明示的に切り替えた場合はその設定固定し,出放りとしては応司設定従うことにした。


残る課題装体整理のみとなったが,先日装体整理兼ダークテーマ実装という思いつきでこれも好機変わった

{希哲17年1月12日の開発}{希哲17年1月12日の進捗}{希哲17年1月12日}{装体整理兼ダークテーマ実装}{効率的な作業}{画像素材調整}{何でもない}{ここまでは}{付け外し}{設定輪結}...=}(83)

{希哲17年1月12日17歩 K#F85E/E74C-66E2}

{ダークテーマ実装}

{}