Migration des VSCode-Designgenerators nach oklch

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!