기수 UI 기수 색상을 사용자 정의 팔레트로 교체

제가 작업 중인 새로운 Next.js 프로젝트에서는 스타일링을 위해 Tailwind CSS와 Radix UI를 선택했습니다. Radix UI는 개발자가 자신만의 강조 색상과 회색 색상을 정의할 수 있는 사용자 정의 팔레트 도구를 제공합니다. 하지만 문서 전체를 검색했지만 사용자 정의 색상을 구현하는 효과적인 방법을 찾을 수 없었습니다.

Google 검색을 시작했고, 다행히 작업을 달성할 수 있도록 안내해 주는 블로그를 찾았습니다. 제가 취한 단계는 다음과 같습니다.

1단계. 사용자 정의 색상 스케일을 복사하여 global.css 파일에 붙여넣습니다

Accent, Gray에 원하는 색상의 헥스코드를 입력하고, 악센트 스케일 복사를 클릭하세요.

glabal.css 파일에 복사한 내용을 붙여넣으세요.

복사 그레이 스케일을 사용하여 그레이 스케일에 대해서도 동일한 작업을 수행합니다.

2단계. tailwind.config.ts에서 코드 수정

이 코드를 파일에 추가하세요. JavaScript를 사용하는 경우 블로그의 코드를 사용하세요. TypeScript를 사용하므로 코드에 일부 입력이 추가되었습니다.

function getColorScale(name: string): { [key: string]: string } {
  // eslint-disable-next-line prefer-const
  let scale: { [key: string]: string } = {};
  for (let i = 1; i <= 12; i++) {
    // Add the color variable to the scale
    scale[i.toString()] = `var(--${name}-${i})`;
    // Add alpha color variable to the scale
    scale[`a${i}`] = `var(--${name}-a${i})`;
  }

  return scale;
}

이 코드는 global.css 파일에서 색상 스케일을 가져와서 tailwind CSS가 색상을 사용자 정의하는 데 사용하는 형식으로 변환합니다.

다음으로 테마 개체 아래의 색상 개체를 수정합니다.

이 예에서 강조 색상 스케일의 색상 범주는 파란색이므로 getColorScale을 호출할 때 파란색을 인수로 넣으면 됩니다.

회색에도 동일하게 적용하세요.

theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },

3단계.layout.tsx 파일 업데이트

기본적으로 AccentColor는 파란색으로 설정되고 greyColor는 회색으로 설정되므로 이 예에서는 색상 스케일이 자동으로 업데이트되지만 색상 범주가 주황색과 같은 다른 색상인 경우에는 다음이 필요합니다. AccentColor를 주황색으로 업데이트합니다.

<Theme accentColor='blue' grayColor='gray'>
  <NavBar />
  <main>{children}</main>
  <Footer />
</Theme>

파란색의 색상 스케일이 재정의되었으므로 Radix UI의 모든 테마 구성 요소는 이제 사용자 정의 색상 스케일을 사용하여 구성 요소의 스타일을 지정합니다.

모든 구성 요소를 재정의하지 않고 웹 사이트에 사용자 정의 색상 스케일을 적용한 방법은 다음과 같습니다.

맞춤 설정은 어떻게 하나요?

위 내용은 기수 UI 기수 색상을 사용자 정의 팔레트로 교체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!