vue css variable 동적으로 변경 / css-vars-ponyfill(ie)

runtime 중에 선택한 테마에 따라 동적으로 css variable을 변경해보자

• css

:root {
    --primary-color: red;
    --info-color: bule;
}

div {
    background-color: var(--primary-color)
    color: var(--info-color)
}

li {
    color: var(--info-color)
}

• vue (script)

changeTheme (primary, info) {
  const style = document.documentElement.style
  style.setProperty('--primary-color', primary)
  style.setProperty('--info-color', info)
}

css root 변수를 지정하고 var 키워드로 사용한다. css 파일을 import 하고,
script 영역에서 setProperty로 변수 지정값을 변경할 수 있다.

잘 적용된다. 제목을 보면 ie가 있다. 괜히 적혀있는게 아니다😄

css variable은 ie 11에서 지원되지 않는다고 한다.
ie 지원 중단이 내년에 시작된다고 했는데 지원이고 뭐고 그냥 사라져버렸으면..

우선은 아직 살아있으니 ie도 챙겨봅시다.

다행히 하느님 정도 되시는 분이 css-vars-ponyfill 라이브러리를 만들어 두셨다. 야호!
감사하며 그저 가져다 써보자.

npm i css-vars-ponyfill

• main.js

import cssVars from 'css-vars-ponyfill'

cssVars()

install 후 cssVars() 옵션 기본값으로 호출한다. 더 자세한 옵션은 css-vars-ponyfill

• vue (script)

changeTheme (primary, info) {
  cssVars({
    variables: {
      'primary-color': primary,
      'info-color': info,
    },
  })
}

setProperty로 값을 변경하던 부분도 cssVars를 사용하여 값을 변경할 수 있다.
'--'를 생략해도 상관없어서 'primary-color' 생략해서 사용한다.

ie에서도 정상적으로 variable이 변경된다.