VSCode テーマ コミュニティ - 神聖幾何学と色彩理論を組み合わせてテーマを発見、共有、作成します

TLDR

VSCode テーマを生成するツールを作成しました。テーマを保存、共有、ダウンロードして、すぐに VSCode にインストールしたり、マーケットプレイスに公開したりできます。

主な機能は次のとおりです:

• 神聖幾何学パターンと伝統的な色彩理論を組み合わせた革新的な方法を使用して調和のとれた色を生成します。
• 作成したテーマやその他の .vsix をダウンロードします。VSCode にインストールしたり、マーケットプレイスに公開したりする準備ができています。
• テーマのコレクションを保存、編集、共有します。

VSCode テーマ コミュニティ -
Github リポジトリ

これは Svelte 5 と Svelte-kit で作成されました。

---

いくつかの紹介

いわゆる神聖幾何学模様が、その知的で複雑なデザインによってどのように目と心を喜ばせることができるのか、私はいつも興味がありました。
また、1 週間以上 VSCode テーマに落ち着くことはできませんでした。私の場合、コーディング作業をより快適にするために、時々変更できるようにさまざまなテーマが必要です。私は、すでに膨大なコレクションの新しいテーマを常に探していました。

その後、独自のテーマの作成を開始しました。これにより、その時点で好みの色を選択できるだけでなく、VSCode がサポートするさまざまな言語にわたってコードを強調表示する粒度を制御することもできました。

しかし、それは決して簡単ではありませんでした。非常に多くの異なる構文トークンに一致する色をすべて探し、トークンとスコープ、UI の色などを調整する必要がありました...色の理論を使用すると、色を選択し、いくつかの配色を使用すると、1 つ、2 つ、3 つ以上の一致する色を取得できます (ただし、配色の種類はそれほど多くありません)。その後、彩度および明度のパラメータを調整して色を微調整する必要があります。のさまざまなトークンと UI 要素は、選択したすべての前景色の背景に対するコントラスト比が許容可能なレベルにあるかどうかを常に考慮しています...おそらく、これまでに、私がどこに向かっているのかがわかるでしょう。調和的でありながら機能的であり、最低限許容される基準に従うことは、非常に複雑なタスクになる可能性があります。

このほとんど病的な欲求を満たすためのさまざまなテーマの「必要性」は、前述した、神聖幾何学模様がどのように人の目と心を喜ばせることができるかという私の好奇心と連動して、作業するときに画面上の色を多様化し、変更する必要があるということです。私をこのプロジェクトに。

アイデアと実装

色彩理論とその配色が初期の色から一致する色のセットを導き出すのと同じように、伝統的な配色の計算を使用する代わりに、神聖幾何学パターンの方程式を適用する何らかの方法を考えられるとしたらどうなるでしょうか。カラーホイールの一番上?

多くの異なる神聖幾何学パターンを研究した結果、このマッドサイエンティストの実験に適した方程式を含む 30 以上のパターンのリストを思いつきました。そして、このプロジェクトの色生成アルゴリズムが誕生したのです。

アルゴリズム

リストから 1 つの神聖幾何学パターンを選択し、スライダーで基本色相を選択すると、アルゴリズムは、選択した神聖幾何学パターンの方程式によって導出された特定量の基本色相を従来のカラー ホイール上に生成します。その後、各要素に対して、生成された「配色」派生色相の 1 つを使用して、明度と彩度のパラメーターをランダムにわずかに変更することで、UI 内のすべての要素の色を生成します。次に、同じ手法を使用して、テーマで使用される必要な構文トークンごとに色を生成します。最後に、端末の ansi カラーを生成します。

モナコ エディターが提供する構文強調表示システムの代わりに、VSCode テーマでコードを強調表示するための Shiki プラグインを備えたモナコ エディターを使用して、テーマをリアルタイムでプレビューする方法を開発しました。生成されたテーマによって事前に定義されたトークンとスコープを可能な限り表示するために、さまざまな言語のいくつかのコード スニペットを含む VSCode エディターのインターフェイスを模倣するために、エディターの周囲にいくつかの要素を配置しました。ただし、モナコ エディター内のトークン スコープには依然としていくつかの制限があり、テーマが VSCode 自体にインストールされている場合よりもオンライン プレビューの粒度が少し低くなりますが、少なくとも、違いは構文とセマンティック ハイライトの粒度が増加していることです。 .

アルゴリズムがすべての色を生成した後、プレビュー コンポーネントでリアルタイムのフィードバックを使用して各色を個別に微調整することができます。

主な機能は次のとおりです:

• 神聖幾何学模様と伝統的な色彩理論を組み合わせた革新的な方法で調和のとれた色を生成します。
• 作成したテーマをダウンロードし、.vsix に既に含まれている他のテーマをVSCode にインストールする準備ができています。また、マーケットプレイスに公開することもできます。
• テーマのコレクションを保存、編集、共有します。

それをチェックしてください！

とにかく、私が言いたいのは、新しい VSCode テーマを発見、共有、作成できる場所に興味がある場合は、VSCode テーマ コミュニティにアクセスしてください。 Github リポジトリでソース コードをチェックアウトすることもできます。

使いやすさ、トークンのスコープ、生成された色など、あらゆるものについて、あらゆる種類のフィードバックを受け取りたいと思っています。そしてもちろん、問題を見つけた場合には、お気軽に問題を開いてください。

また、私はこのプロジェクトの開発がとても気に入っているので、テーマ生成アルゴリズムを VSCode を超えて拡張する計画があります。計画では、テーマを受け取ることができるあらゆるものに対してテーマを生成できるようにする予定です。野心的ですね？時間に余裕があり、プロジェクトとアイデアを気に入っていただけた場合は、貢献を大歓迎です。

その他の実験

同じアルゴリズムを使用して Shadcn UI 用のテーマ ジェネレーターも作成しましたが、UI やその他のすべての部分で多くの作業が必要であり、これは単なる概念実証にすぎませんでした。私のGithub個人ページで見つけることができます。

ここまで読んでくださった方、本当にありがとうございました!

以上がVSCode テーマ コミュニティ - 神聖幾何学と色彩理論を組み合わせてテーマを発見、共有、作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。