VSCode 테마 생성기를 oklch로 마이그레이션

TLDR: VSCode 테마 커뮤니티는 이제 일치하는 색상 생성 알고리즘에서 OKLCH 색상 공간을 사용하여 색상을 무작위화하고 조작하며 oklch 색상 선택기 생성된 테마 색상을 조정할 때 사용됩니다.

VSCODE 테마 커뮤니티를 살짝 엿보거나 GitHub 저장소의 코드를 직접 살펴볼 수 있습니다.

---

늦은 발견

oklch 색상 공간은 그다지 새로운 것은 아니지만 VSCode 테마 커뮤니티를 개발하기 시작했을 때 저는 그 존재를 전혀 알지 못했습니다. 불과 몇 주 전에 저는 이에 대해 알게 되었고 이에 관한 많은 기사를 읽기 시작했으며 알고리즘과 앱 자체 모두에서 색 공간 마이그레이션과 함께 제공될 수 있는 모든 이점을 알게 되었습니다.

oklch 색상 공간에서 색상은

으로 표시됩니다.

• L은 지각적 가벼움을 의미합니다.
• C 색도를 나타내는 채도에 대한 값으로 0(무채색)부터 상한선은 없지만 실제로는 0.5를 초과하지 않습니다. CSS는 0.4를 100%로 취급합니다.
• H는 색상환의 색상 각도를 의미하며 일반적으로 십진수로 표시됩니다.

지각적 밝기를 사용하면 다양한 색상에 대해 균일한 밝기로 색상을 쉽게 선택할 수 있을 뿐만 아니라 색상 매개변수를 변경하지 않고도 색상 밝기와 채도를 조작할 수 있어 색상 생성 알고리즘과 함께 사용하기에 적합합니다.

알고리즘이 선택한 기본 색상과 색 구성표/신성한 기하학 패턴을 사용하여 색상 세트를 생성한 후, 밝기와 채도가 다양한 이러한 색상을 기반으로 테마 색상이 무작위로 생성됩니다.

oklch 색상 공간을 채택하면 배경 색상과 전경으로 사용된 색상 간의 최소 대비를 보장하는 데 필요한 밝기 및 채도를 모두 조작한 후에도 선택한 색상 구성표에서 파생된 모든 색상을 그대로 유지할 수 있습니다.

색상을 변경해야 하거나 변경할 의지가 있는 경우에도 새로운 oklch 색상 선택기를 사용하면 색상을 변경하지 않고 채도와 명도를 조정할 수 있을 뿐만 아니라 색상을 유지하면서 색상을 변경할 수 있습니다. 선택한 색상의 지각적 밝기는 변하지 않습니다.

결국 선택지는 하나뿐이었다. 앱을 마이그레이션하세요.

코드 마이그레이션

Css 색상 공간 사양에 관한 기사를 읽다가 oklch 색상 공간을 구현하는 TypeScript용 매우 완전하고 정확한 색상 조작 라이브러리인 Culori에 대해 알게 되었습니다.

오래된 색상 조작 라이브러리를 사용하고 있던 모든 기능과 방법을 변경하는 것은 어렵지 않았습니다. 알고리즘의 일부 부분이 더 깔끔해지고 유지 관리 및 이해가 더 쉬워졌습니다.

코드 마이그레이션 후 색상 선택기 구성 요소를 찾기 시작했지만 내 앱 요구 사항에 맞는 것을 찾을 수 없었습니다. Svelte 5를 사용해야 했고 oklch 색상 공간을 사용할 수 있는 옵션이 있어야 했으며 현재 구성 요소와 잘 통합되어야 했습니다. shadcn-svelte 구성 요소를 기반으로 하는 UI입니다.

저는 좌절감 속에서 oklch.com에서 오픈 소스이고 적어도 나에게는 매우 복잡한 EvilMartians의 훌륭한 작품을 접했습니다.
GitHub 저장소에서 몇 시간을 보낸 후 웹 페이지의 색상 선택기를 살펴본 후 Svelte 5 및 shadcn-svelte 구성 요소를 사용하여 자체 구현을 개발하기로 결정했습니다.

재사용 가능한 구성 요소를 개발하는 데 전력을 다하지는 않았지만 이제는 Svelte 5 패키지를 만들까 생각 중입니다. 하지만 제 모험으로 돌아가서 L, C, H 및 알파 옵션 변경에 따라 동적으로 업데이트되도록 일부 슬라이더 배경을 사용자 정의했습니다.

각 슬라이더에 대한 동적 2D 맵의 픽셀 색상을 계산하기 위해 웹 작업자를 구현했으며 Culori의 도움으로 복잡한 oklch 색상 공간을 정확하게 표현하기 위한 그라데이션을 생성하는 것이 어렵지 않았습니다.

그리고 거기에...현재 스택의 요구 사항을 충족할 수 있는 기능적인 oklch 색상 선택기가 있었습니다.

이미 손이 더러웠기 때문에 소중한 친구 Claude 3.5에게 가서 이미 긴 목록에 추가할 색 구성표로 사용할 수 있는 신성한 기하학 패턴이 몇 가지 더 있는지 물었습니다. 패턴/구성표. 이번에 Claude는 노력을 측정하지 않았고 알고리즘의 패턴/색상 구성표로 통합될 수 있는 100개 이상의 새로운 신성한 기하학, 현대 양자 물리학 및 기타 수학 방정식을 '무시'했습니다.

결과

VSCode 테마 커뮤니티에서 라이브로 진행되며 Github 저장소에서 코드를 확인할 수 있습니다.

언제나 그렇듯이 댓글로 어떤 종류의 피드백 및/또는 제안이라도 자유롭게 제공하시거나 저장소에 문제를 제출해 주시기 바랍니다. 나는 당신의 생각을 듣고 매우 기쁠 것입니다.

읽어주셔서 감사합니다. 다음 글에서 뵙길 바랍니다!

위 내용은 VSCode 테마 생성기를 oklch로 마이그레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!