커스터마이징이 많이 된 다크 테마에서 라이트 테마를 만드는 가장 쉬운 방법은?

[hipp0]

Foundation 테마를 사용하고 있으며, CSS로 상당히 커스터마이징한 다크 팔레트를 적용하고 있습니다.

모든 동일한 CSS 규칙을 따르는 라이트 버전을 만드는 가장 간단한 방법이 무엇인지 궁금합니다.

[Moin]

테마에 밝은 색 팔레트를 추가할 수 있습니다

밝은 테마나 어두운 테마 중 어떤 것이 사용되고 있는지에 따라 색상을 업데이트할 수 있습니다:

@awesomerobot

color_definitions.scss 파일에서 다음과 같이 할 수 있습니다:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

그런 다음 테마에서 새로 만든 어두운/밝은 모드 변경용 커스텀 프로퍼티를 사용하면 됩니다:

body {
  color: var(--my-theme-color);
}

[hipp0]

음, 그러면 기본 다크/라이트 모드를 사용 중인데, 모든 변경 사항을 다크 모드와 라이트 모드에 맞게 각각 조정해야 하는군요.

[Moin]

상황에 따라 다릅니다. 하드코딩된 색상을 사용했다면 그렇게 해야 합니다. var(--primary-300)나 var(--danger)와 같이 색상을 참조하는 한, 색상 팔레트에 따라 자동으로 변경됩니다.