色置き換えの実験的アプローチ

[hiyakake]

各ページは、一定のデザインシステムで制作されているため
運営のもとのCSSにある色コード指定は数色に絞られる

であれば、JSで運営のstyle.cssを読み取り
文字列置き換え関数を使い、CSSテキスト内の関係するカラーコードを一括置き換えを行ったCSSファイルを動的に作成して<style>タグ内に入れてしまう。
（どのカラーコードをどう置き換えるかは、ページ毎に定義する）

こうすると以下のメリットが有るのではないか

1. カラーを基準にするのである程度、使用変更があっても問題ないのではないか
2. <style>タグ内に入れてしまえば、CSS詳細度が上がるので優先されるのでは

単純なカラーコード置き換えで解決できない部分については、従来どおり個別にCSSセレクタで書き換える

[hiyakake]

NアニメページはNuxt.jsで作成されていて、head内にstyleでCSSが入っているよう
であれば、JSでこのstyle要素の中身を抽出可能

[hiyakake]

/*
カラーパレットを一括置き換え
*/
function recolorPalette() {
    //styleタグの数だけ実行
    const originalStyleElements = document.querySelectorAll('head style');
    originalStyleElements.forEach(e => {
		//オリジナルのCSSを取得
		const orginalStyleContent = e.textContent;
		//カラーパレットの置き換え
        //置き換えしたものを再度置き換えないように、一時的に頭に@@をつけ、後ほど#に修正
		let recolor = orginalStyleContent;
        recolor = recolor.replaceAll('#000000', '@@FFFFFF');
        recolor = recolor.replaceAll('#FFFFFF', '@@000000');
        recolor = recolor.replaceAll('#252525', '@@FFFFFF');
        recolor = recolor.replaceAll('@@', '#');
		

		//置き換えたCSSを元のCSSに置き換え
		e.textContent = recolor;
	});
}

[hiyakake]

問題点

ページの読み込み後に処理するので最初は表示されないので目に悪い

解決策

• JS実行タイミングを早める（nuxtのレスポンスデータがきた時点で書き換えるように）
• 基礎背景色を画面いっぱいに表示するdivを最前面に置き、CSS置き換えが完了したタイミングでopacityを0、event判定なしにして徐々に表示されるようにする

いまは後者で対応が安牌か

[hiyakake]

解決済み

[hiyakake]

単純な色変えでは難しかった
置き換える際に、それがcolorなのかbackground-colorなのかborder-colorなのか判別した上で個別に置き換える必要あり

[hiyakake]

色の置き換えについては、JSON形式でbeforeとafterを定義するのはフォールバックとして

グレースケールの色については機械的に振り分けてみるのもいいのでは

//処理の流れ

1. 色データを、一律にhlsに変換
2. hls色空間のsが0であるか確認（無彩色かどうか）
3. 無彩色であるならlで明度を元に、適切な反対色に

//反対色を求める

l = 明度とする
(l-0.5)*-1+0.5

[hiyakake]

上記だと反転なので色のレベルがおかしくなる

無彩色のカラーパレットの明度を全体的にスライドさせるのはどうか
であれば階調が崩れない

0.5より大きい範囲、つまりは白側の最小値から
1.0引いた数を明度スライドの移動幅として
全体的に移動

値がマイナスになった物は
もとより黒側の色なので白側にする必要がある
なのでマイナス値については、上のコメントで考えた計算式を元に反転値にすればよい

[hiyakake]

上記は背景色を想定

文字色の場合はこの考えを反転して
黒側を白側にもっていくようにしたほうがいいかも

[hiyakake]

Hexをhlsに変換

まず２文字づつで区切って３つの塊に
#fefefe → Fe Fe fe

３つの塊が同じならそれは無彩色である

１つの塊を10進数に変換

変換した値を255で割る
そうすると0-1の範囲で255階調を表現できる

求めた値をhslのsに代入
hlは定数0

[hiyakake]

色が指定されているDOMの探査は

window.getComputedStyle()

ベースに作り直すと幸せになれそう

[hiyakake]

どの色の範囲を無彩色として扱うのかが課題

[hiyakake]

色相によって、明るく感じる範囲も違うため
大ざっぱに虹の7段階ごとに無彩色とする輝度、彩度を決めるべき

[hiyakake]

関連
#168 (reply in thread)