TLDR: VSCode Themes Community verwendet jetzt den OKLCH-Farbraum im Algorithmus zur Generierung passender Farben, um Farben zuf?llig zu sortieren und zu manipulieren, und verfügt au?erdem über ein oklch-Farbauswahlzur Verwendung beim Anpassen der generierten Designfarben.

Sie k?nnen einen Blick auf die VSCODE Themes Community werfen oder direkt in den Code im GitHub-Repository eintauchen.

Die sp?te Entdeckung

Ich wei?, der oklch-Farbraum ist nicht so neu, aber als ich mit der Entwicklung der VSCode Themes Community begann, war ich mir seiner Existenz überhaupt nicht bewusst. Erst vor ein paar Wochen erfuhr ich davon und begann, viele Artikel darüber zu lesen. Dabei wurden mir alle Vorteile bewusst, die eine Farbraummigration sowohl im Algorithmus als auch in der App selbst mit sich bringen k?nnte.

Im oklch-Farbraum wird die Farbe dargestellt durch

• L für Wahrnehmungsleichtigkeit.
• C für Chroma, das die chromatische Intensit?t darstellt, mit Werten ab 0 (achromatisch) ohne Obergrenze, in der Praxis jedoch nicht über 0,5; CSS behandelt 0,4 als 100 %.
• H für den Farbtonwinkel in einem Farbkreis, normalerweise in Dezimalgraden angegeben.

Die wahrnehmbare Helligkeit erm?glicht nicht nur die einfache Auswahl von Farben mit gleichm??iger Helligkeit für verschiedene Farbt?ne, sondern erm?glicht auch die Manipulation von Farbhelligkeit und Chroma ohne ?nderung des Farbtonparameters, was sich perfekt für die Verwendung mit dem Farbgenerierungsalgorithmus eignet.

Nachdem der Algorithmus mithilfe des ausgew?hlten Grundfarbtons und des Farbschemas bzw. des Musters der heiligen Geometrie eine Reihe von Farbt?nen generiert hat, werden die Farben für das Thema zuf?llig auf der Grundlage dieser Farbt?ne mit Variationen in Helligkeit und S?ttigung generiert.

Durch die übernahme des oklch-Farbraums w?re es m?glich, alle abgeleiteten Farbt?ne des ausgew?hlten Farbschemas intakt zu halten, selbst nach allen Manipulationen von Helligkeit und Chroma, die erforderlich sind, um einen minimalen Kontrast zwischen den Hintergrundfarben und denen, die als Vordergrund verwendet werden, sicherzustellen.

Selbst wenn die Notwendigkeit oder der Wille besteht, eine der Farben zu ?ndern, ist es mit dem neuen oklch-Farbw?hler nicht nur m?glich, die Farbs?ttigung und Helligkeit anzupassen, ohne den Farbton zu ?ndern, sondern man kann den Farbton auch ?ndern und dabei beibehalten Die Wahrnehmungshelligkeit der ausgew?hlten Farbe bleibt unver?ndert.

Nach all dem hatte ich nur eine Wahl: die App migrieren.

Die Codemigration

Als ich einige Artikel über die CSS-Farbraumspezifikation las, lernte ich Culori kennen, eine sehr vollst?ndige und pr?zise Farbmanipulationsbibliothek für Typoskript, die den oklch-Farbraum implementiert.

Es war nicht schwer, alle Funktionen und Methoden zu ?ndern, die eine alte Farbmanipulationsbibliothek verwendeten. Einige Teile des Algorithmus sind sogar sauberer und einfacher zu warten und zu verstehen.

Nach der Code-Migration suchte ich nach einer Farbauswahlkomponente, konnte aber keine finden, die den Anforderungen meiner App entsprach. Sie musste Svelte 5 verwenden, die Option haben, den oklch-Farbraum zu verwenden und sich gut in die aktuelle integrieren zu lassen ui, die auf shadcn-svelte-Komponenten basiert.

Mitten in der Frustration bin ich auf oklch.com auf dieses gro?artige Werk von EvilMartians gesto?en, das Open Source und, zumindest für mich, sehr komplex ist.
Nachdem ich einige Stunden in ihrem GitHub-Repository verbracht und mir den Farbw?hler auf ihrer Webseite angesehen hatte, beschloss ich, es auszuprobieren und meine eigene Implementierung mit Svelte 5 und shadcn-svelte-Komponenten zu entwickeln.

Ich habe nicht alles daran gesetzt, eine wiederverwendbare Komponente zu entwickeln, aber jetzt denke ich darüber nach, daraus ein Svelte 5-Paket zu machen. Aber ich schweife ab, zurück zu meinem Abenteuer: Ich habe die Hintergründe einiger Schieberegler so angepasst, dass sie sich dynamisch aktualisieren, wenn sich die Optionen L, C, H und Alpha ?ndern.

Implementierte einen Web-Worker, um die Pixelfarben für die dynamischen 2D-Karten für jeden Schieberegler zu berechnen. Mit Hilfe von Culori war es nicht schwer, Farbverl?ufe zu generieren, um den komplexen oklch-Farbraum genau darzustellen.

Und da war er ... ein funktionaler Oklch-Farbw?hler, der die Anforderungen meines aktuellen Stapels erfüllen konnte.

Da ich bereits schmutzige H?nde hatte, sprach ich mit meinem unsch?tzbaren Freund Claude 3.5 und fragte ihn, ob er noch ein paar heilige Geometriemuster h?tte, die als Farbschemata verwendet werden k?nnten, um die ohnehin schon lange Liste zu erg?nzen Muster/Schemata. Dieses Mal hat Claude die Anstrengungen nicht gemessen und mehr als hundert neue heilige Geometrie, moderne Quantenphysik und einige andere mathematische Gleichungen ?ausgespuckt“, die als Muster/Farbschemata in den Algorithmus integriert werden konnten.

Das Ergebnis

Es ist live in der VSCode Themes Community und Sie k?nnen den Code im Github-Repository überprüfen.

Bitte z?gern Sie nicht, wie immer Feedback und/oder Vorschl?ge in den Kommentaren abzugeben oder ein Problem im Repository einzureichen. Ich würde mich sehr über Ihre Meinung freuen.

Vielen Dank für die Lektüre und hoffentlich sehen wir uns beim n?chsten Mal!

Das obige ist der detaillierte Inhalt vonMigration des VSCode-Designgenerators nach oklch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!