본문 바로가기
반응형
다크모드 구현과 로컬스토리지 페이지가 닫혀도 다크모드가 유지되도록 구현하기 다크모드는 눈 보호, 배터리 절약 등의 장점으로 많이 보편화 되어 있는 것 같다. 이렇게 자주 쓰이는만큼 내가 설정 해놓은 다크모드가 나중에 들어오거나 탭을 닫은 후에도 유지 되었음 좋겠다. 이렇게 지속적으로 필요한 데이터의 경우 로컬스토리지를 사용함으로써 문제점을 해결 할 수 있다. Window.localStorage Window.localStorage는 현재 출처(origin)의 로컬 저장 공간의 Storage 객체에 접근할 수 있게 해준다. 이 속성을 사용해서 현재 도메인의 로컬 Storage 객체에 접근한 후, 키-값 형태의 항목을 추가하거나 읽고, 제거까지 할 수 있다. 항목 추가 localStorage.setItem('darkMode', 'enab.. 2021. 8. 21.
티스토리 다크모드 적용 닼..다크 다크! 요즘은 하얀 화면을 거의 못보는 것 같다. 스마트폰도 다크모드, 노트북도 다크모드, VSCode, 깃허브도 다크모드..이제는 기본 설정일 정도로 다크모드가 많이 보편화 되어 있고 다크모드가 확실히 눈에도 편하다. 그 중 유일하게 내 블로그에 다크모드가 안 되어서 있어서 이번에 적용해 보려고 한다. 나같은 경우 저녁 시간대가 되면 자동으로 다크모드가 활성화 되는데, 내 블로그도 그에 맞게 다크모드를 기능하게 해야겠다. 다크모드를 적용하려면 CSS 미디어 특성인 prefers-color-scheme을 알아야 한다. 이 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용된다. 즉 이 특성을 사용하면 내 노트북이나 스마트폰이 다크모드인지 아닌지를 알아 낼 수 있다.. 2021. 6. 3.
반응형