[HTML&CSS]DaisyUI(2.x)에서 체크박스 체크 상태의 색상을 커스터마이즈

👉 기본 상태

• checkbox가 checked 상태일 때(선택했을 때) 브라우저의 테마에 따라 배경 색상과 V의 색상이 바뀜
  • 브라우저의 Light/Dark 모드에 따라 사이트의 배경색과 맞지 않은 색상으로 설정됨
    
    
    
    

👉 원인 분석 및 시도

• checkbox에 checked에 대해 accent-color를 줬으나 실패
• checkbox에 checked에 대해 background-color를 줬으나 실패
  • 체크 표시가 뜨기 전에 설정한 배경색이 스쳐 지나가는 모습이 보이긴 했지만 최종 화면에서는 적용되지 않음
• 해당 페이지에 요소 검사로 분석
  • 아래의 CSS 설정이 적용되는 것을 확인

    .checkbox:checked, .checkbox[checked=true], .checkbox[aria-checked=true] {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        animation: checkmark var(--animation-input,.2s) ease-in-out;
        background-repeat: no-repeat;
        background-image: linear-gradient(-45deg,transparent 65%,hsl(var(--chkbg))65.99%),linear-gradient(45deg,transparent 75%,hsl(var(--chkbg))75.99%),linear-gradient(-45deg,hsl(var(--chkbg))40%,transparent 40.99%),linear-gradient(45deg,hsl(var(--chkbg))30%,hsl(var(--chkfg))30.99%,hsl(var(--chkfg))40%,transparent 40.99%),linear-gradient(-45deg,hsl(var(--chkfg))50%,hsl(var(--chkbg))50.99%);

    • ⇒ 보여지는 체크 표시와 배경색은 background-image 부분으로 image였음
      
      
      
      

👉 해결

• CSS 설정에서 보이는 부분 중 —chkbg(배경색)와 —chkfg(V 표시 색)를 원하는 HSL 값으로 재설정하면 됨
  • HTML 태그에서 style로 적용

    <input type="checkbox" class="checkbox" style="--chkbg: 0, 100%, 50%; --chkfg: 240, 100%, 50%;" />

• 적용했을 때 모습