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

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

遅れての発見

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

oklch 色空間では、色は

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

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

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

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

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

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

コードの移行

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

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

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

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

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

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

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

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

結(jié)果

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

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

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

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