VSCode テーマ ジェネレーターを oklch に移行する

TLDR: VSCode テーマ コミュニティは、色をランダム化して操作するために、マッチング カラー生成アルゴリズムで OKLCH カラースペースを使用するようになりました。また、oklch カラーピッカー 生成されたテーマの色を調整するときに使用されます。

VSCODE テーマ コミュニティをこっそり覗いたり、GitHub リポジトリのコードに直接飛び込んだりすることができます。

---

遅れての発見

oklch カラースペースはそれほど新しいものではありませんが、VSCode テーマ コミュニティの開発を始めたときは、その存在をまったく知りませんでした。私がこのことを知り、それに関する多くの記事を読み始めたのは、ほんの数週間前のことであり、アルゴリズムとアプリ自体の両方で色空間の移行によってもたらされるすべての利点に気づきました。

oklch 色空間では、色は

で表されます。

• L は 知覚の明るさ を表します。
• C は彩度の強度を表す彩度で、値は 0 (無彩色) から始まり、上限はありませんが、実際には 0.5 を超えることはありません。 CSS は 0.4 を 100% として扱います。
• H はカラー ホイールの色相角を表し、通常は 10 進数で表されます。

知覚的明度により、さまざまな色相に対して均一な明度で色を簡単に選択できるだけでなく、色相パラメータを変更せずに色の明度と彩度を操作することもできるため、色生成アルゴリズムで使用するのに最適です。

選択された基本色相と配色/神聖幾何学パターンを使用してアルゴリズムが一連の色相を生成した後、テーマの色はこれらの色相に基づいて明度と彩度を変化させてランダ​​ムに生成されます。

oklch 色空間を採用することで、背景色と前景として使用される色のコントラストを最小限に抑えるために必要な明度と彩度のすべての操作を行った後でも、選択した配色から派生したすべての色相をそのまま維持することが可能になります。

その後でも、色を変更する必要がある場合、または変更する意思がある場合は、新しい oklch カラーピッカーを使用すると、色相を変更せずに彩度や明度を調整できるだけでなく、色相を維持したまま色相を変更することもできます。選択した色の知覚的な明るさは変更されません。

結局のところ、選択肢は 1 つだけあり、アプリを移行することになります。

コードの移行

CSS 色空間仕様に関するいくつかの記事を読んで、oklch 色空間を実装する TypeScript 用の非常に完全かつ正確な色操作ライブラリである Culori について知りました。

古い色操作ライブラリを使用していたすべての関数とメソッドを変更するのは難しくありませんでした。アルゴリズムの一部はよりクリーンになり、保守と理解が容易になりました。

コードの移行後、カラー ピッカー コンポーネントを探し始めましたが、アプリの要件を満たすものが見つかりませんでした。Svelte 5 を使用し、oklch カラー スペースを使用し、現在のコンポーネントと適切に統合するオプションが必要でした。 shadcn-svelte コンポーネントに基づく ui。

イライラの最中に、oklch.com で EvilMartians による素晴らしい作品に出会いました。これはオープンソースであり、少なくとも私にとっては非常に複雑です。
GitHub リポジトリで数時間過ごし、Web ページのカラー ピッカーを確認した後、Svelte 5 と shadcn-svelte コンポーネントを使用して独自の実装を開発して、試してみることにしました。

私は再利用可能なコンポーネントの開発に全力を尽くしたわけではありませんが、今はそれから Svelte 5 パッケージを作成することを考えています。話はそれましたが、冒険の話に戻ります。L、C、H、および Alpha オプションの変更に応じて動的に更新されるように、いくつかのスライダーの背景をカスタマイズしました。

各スライダーの動的 2D マップのピクセル カラーを計算する Web ワーカーを実装しました。Culori の助けを借りて、複雑な oklch 色空間を正確に表現するためのグラデーションを生成するのは難しくありませんでした。

そして、それは…私の現在のスタックのニーズを満たすことができる機能的なoklchカラーピッカーでした。

すでに手が汚れていたので、貴重な友人のクロード 3.5 に相談に行き、すでに長いリストに追加する配色として使用できる神聖幾何学模様がもう少しあるかどうか尋ねました。パターン/スキーム。今回、クロードは労力を測ることなく、アルゴリズムにパターン/配色として統合できる 100 を超える新しい神聖幾何学、現代の量子物理学、およびその他の数学方程式を「吐き出し」ました。

結果

これは VSCode Themes Community で公開されており、Github リポジトリでコードをチェックアウトできます。

いつものように、コメント欄にフィードバックや提案を提供するか、リポジトリに問題を提出してください。ぜひご意見をお聞かせください。

読んでいただきありがとうございました。また次回でお会いできることを願っています!

以上がVSCode テーマ ジェネレーターを oklch に移行するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。