패캠챌랜지

가상 키보드에 기본모드 / 다크모드를 적용해 주기 위해서 html 태그에 theme 라는 커스텀 속성을 지정해주었다. theme의 값이 빈 문자열이면 기본 모드, dark-mode이면 다크모드를 적용해 줄 것이다. 코드로 나타내면 아래와 같다고 할 수 있다. 그리고 다음은 css에서 다크모드가 실행될때 적용될 부분을 작성해주었다. 기본모드에서 다크모드가 되면 흰색이 검은색이 되는 등 색상 반전이 일어나게 된다. 이것을 설정해주기 위해 css의 filter 속성을 사용한다. filter 속성은 주로 흐림 효과, 색상 변형 등 그래픽 효과를 요소에 적용할때 사용한다. 이미지나 배경, 테두리의 렌더링을 조정할 수 있다. html[theme="dark-mode"] { filter: invert(100%) hue..
해리Harry
'패캠챌랜지' 태그의 글 목록