스마트한 웹 디자인. 파트 I: 라이트/다크 모드 파비콘.

7072 단어 webhtmlcssjavascript
오늘 우리는 OS UI 테마를 감지하고 이에 따라 사이트 보기를 변경하는 새롭고 멋진 기능을 제공합니다. 새로운 기술을 사용하여 테마 가능하고 쉽게 사용자 정의할 수 있는 css 및 html을 작성할 수 있습니다. 이 게시물 시리즈에서는 웹 앱을 위한 간단한 테마 디자인을 만드는 방법을 알려드리겠습니다.

CSS 및 HTML을 사용하여 페이지 시각화를 변경할 수 있지만 아직 그러한 기능이 없는 요소가 하나 있습니다. 그리고 당신은 이미 내가 말하는 것을 알고 있습니다. 네, 파비콘입니다.

다크 모드에서 Dev.to나 Github의 파비콘을 보면 거의 보이지 않게 된 것을 볼 수 있습니다. 우리는 그것을 변경하고 파비콘이 테마 전환에 반응하도록 만들어야 합니다. 이렇게 하는 가장 논리적인 방법은 favicon이 속성 값으로 전달된 CSS 미디어 쿼리에 반응할 수 있도록 하는 링크 요소의 속성media입니다. 그러나 안타깝게도 링크의 미디어 속성에서 지원하는 미디어 쿼리 목록에는 prefers-color-scheme가 포함되어 있지 않습니다.

다행히도 JavaScript를 사용하여 작동하도록 만들 수 있습니다. 그럼 해보자.

이것이 어떻게 작동할 수 있는지live preview입니다.

TL;DR For those who want ready solution, use the library:

럼킨 / 파비콘 스위처

파비콘이 미디어 쿼리에 반응하도록 만들기



테마 전환 듣기



페이지 헤드에서 모든 링크 요소를 수집하고 media 속성을 가져와 window.matchMedia() 메서드를 사용하여 일치시켜야 합니다. 이 메소드는 MediaQueryList 을 반환하며 이는 청취 변경을 허용하며 이를 사용할 것입니다.

window.matchMedia('(prefers-color-scheme:light)').addListener((e) => {
  e.matches // Determine wether query matched or unmatched
})

아이콘 추가



이제 다양한 테마의 아이콘을 페이지 본문에 삽입해야 합니다.

  <link rel="icon" media="(prefers-color-scheme:dark)" href="favicon-dark.png" type="image/png" />
  <link rel="icon" media="(prefers-color-scheme:light)" href="favicon-light.png" type="image/png" />

아이콘 전환



브라우저가 탭의 아이콘을 전환하도록 하려면 <link> 요소를 <link> 내부의 마지막 <head> 요소로 만드는 것으로 충분합니다. 이것은 잘 작동하지만 Chrome에는 현재 일부 조건에서 이러한 아이콘 전환을 중단시키는 버그가 있습니다. 이 버그를 방지하려면 새 항목<link>을 만들고 다른 링크 다음에 헤드 하위 목록에 추가해야 합니다.

const favicon = document.createElement('link')
link.setAttribute('rel', 'favicon icon')
head.appendChild(link)

// Listen media change
window.matchMedia('(prefers-color-scheme:light)')
.addListener((e) => {
  if (! e.matches) {
    return
  }
  // Apply new favicon source
  const source = document.querySelector('link[rel*="icon",media="(prefers-color-scheme:light)"]')

  if (source === null) {
    return
  }

  link.setAttribute('type', source.type)
  link.setAttribute('href', source.href)
})

마지막 표현식을 복제하고 light를 dark로 바꾸면 어두운 테마 아이콘이 활성화됩니다.

Note! We check wether source is null due to possible DOM mutations.



결론



이제 테마 전환에 반응하는 페이지 파비콘을 만드는 방법을 알았습니다.


읽어 주셔서 감사합니다. 더 많은 사용 사례를 다루고 max-width , min-width 등과 같은 다른 미디어 쿼리를 지원하는 favicon-switcher 을 사용하십시오.

학점



사진 제공: Linda Xu on Unsplash
Python 스크립트가 제어하는 WebDriver에서 자주 사용하는 간단한 대상 포지셔닝
의역 30일 of React의 Day6-State

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage