Skip to content

How HTML, CSS, and JavaScript support dark mode for iOS and macOS.

License

Notifications You must be signed in to change notification settings

hsh2001/apple-dark-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

62 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŒ™ 닀크λͺ¨λ“œ μ›Ή νŽ˜μ΄μ§€ λ””μžμΈ

λͺ©μ°¨

  1. 닀크λͺ¨λ“œλž€?
  2. μ™œ 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•΄μ•Όν• κΉŒ?
  3. 닀크λͺ¨λ“œ μΈμ‹ν•˜κΈ°
  4. 닀크λͺ¨λ“œ 끄고 켜기
  5. μ• λ‹ˆλ©”μ΄μ…˜

닀크λͺ¨λ“œλž€?

2019λ…„ 9μ›” 20일 μƒˆλ²½ 2μ‹œ, μ• ν”Œμ€ 아이폰과 μ•„μ΄νŒŸ ν„°μΉ˜λ₯Ό μœ„ν•œ μƒˆλ‘œμš΄ 운영체제인 iOS 13λ₯Ό λ°°ν¬ν•˜κΈ° μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ 같은 ν•΄ 6μ›” μ΄ˆμ— μ—΄λ Έλ˜ WWDC2019(μ• ν”Œ 세계 개발자 회의)μ—μ„œλŠ”, μ›Ήκ°œλ°œμžκ°€ iOS13κ³Ό MacOS Mojaveλ₯Ό μœ„ν•œ 닀크λͺ¨λ“œλ₯Ό μ œμ–΄ν•  수 μžˆλŠ” 방법을 μ œκ³΅ν–ˆμŠ΅λ‹ˆλ‹€. 흰 바탕에 검은 글씨λ₯Ό λ„μš°λ˜ 기쑴의 UIμ™€λŠ” 달리, 닀크λͺ¨λ“œλŠ” 검은 바탕에 흰 글씨λ₯Ό λ„μš°λ©° μ „μ²΄μ μœΌλ‘œ μ–΄λ‘μš΄ λͺ¨μŠ΅μ„ λ³΄μ—¬μ£ΌλŠ” UIμž…λ‹ˆλ‹€.

μ™œ 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•΄μ•Ό ν• κΉŒ?

μš°λ¦¬κ°€ 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•  μ΄μœ λŠ” λ¬΄μ—‡μΌκΉŒμš”? μš”μ¦˜ μœ ν–‰μ΄λΌμ„œ? λ©‹μ Έ λ³΄μ—¬μ„œ? 이보닀 더 근본적인 μ΄μœ κ°€ μžˆμŠ΅λ‹ˆλ‹€.

μ›ΉνŽ˜μ΄μ§€μ˜ κ°€μž₯ μ€‘μš”ν•œ λͺ©μ μ€ μ›Ή νŽ˜μ΄μ§€μ˜ 정보λ₯Ό μ‚¬μš©μžμ—κ²Œ λͺ…ν™•ν•˜κ²Œ μ „λ‹¬ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. μ˜ν™”κ΄€ 직원듀은 μ˜ν™”κ°€ μ‹œμž‘λ˜κΈ° 전에 κ°€μž₯ λ¨Όμ € μƒμ˜κ΄€μ˜ μ‘°λͺ…을 κΊΌμ„œ 주변을 μ–΄λ‘‘κ²Œ λ§Œλ“­λ‹ˆλ‹€. κ·Έ μ΄μœ λŠ” 주변을 κΎΈλ―ΈλŠ” μš”μ†Œκ°€ λ„ˆλ¬΄ ν™”λ €ν•˜κ±°λ‚˜ λˆˆμ— 띄면 쀑심 μ½˜ν…μΈ μ— λŒ€ν•œ μ§‘μ€‘λ„λŠ” μ™ΈλΆ€λ‘œ λΆ„μ‚°λ˜κΈ° 쉽기 λ•Œλ¬Έμž…λ‹ˆλ‹€. μ˜ν™”κ΄€ 사둀와 λ§ˆμ°¬κ°€μ§€λ‘œ, 닀크λͺ¨λ“œλ₯Ό λΉ„λ‘―ν•œ μ—¬λŸ¬ μ–΄λ‘μš΄ ν™˜κ²½μ€ μ£Όλ³€ μš”μ†Œλ³΄λ‹€ 쀑심 μ½˜ν…μΈ μ— λ”μš± 집쀑할 수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€. μš”μ¦˜ 자주 μ“°μ΄λŠ” μ‹¬ν”Œν•œ UI λ””μžμΈ νŒ¨ν„΄λ„ 이와 λ™μΌν•œ λ§₯λ½μž…λ‹ˆλ‹€.

κ°œλ°œμžλŠ” μ‚¬μš©μžμ˜ μž₯μ•  여뢀와 관계없이 λͺ¨λ“  μ‚¬μš©μžκ°€ νŽΈλ¦¬ν•˜κ²Œ μ†Œν”„νŠΈμ›¨μ–΄λ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ μ œκ³΅ν•  의무λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. μ• ν”Œμ˜ 'VoiceOver'λŠ” μ‹œκ° μž₯애인을 μœ„ν•œ μ• ν”Œμ˜ λŒ€ν‘œμ μΈ μ ‘κ·Όμ„± λ„κ΅¬λ‘œ, λ§Žμ€ μ‹œκ°μž₯애인듀이 아이폰을 μ„ νƒν•˜λŠ” μ΄μœ κ°€ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 이밖에도 ν™”λ©΄ 전체λ₯Ό λ°˜μ „μ‹œν‚€λŠ” '색 λ°˜μ „' κΈ°λŠ₯이 μ €μ‹œλ ₯μžλ‚˜ 밝은 빛에 μ˜ˆλ―Όν•œ μ‚¬μš©μžλ“€μ—κ²Œ λ§Žμ€ 도움을 μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.

닀크λͺ¨λ“œ λ˜ν•œ μ €μ‹œλ ₯μžλ‚˜ 밝은 빛에 μ˜ˆλ―Όν•œ μ‚¬μš©μžμ—κ²Œ 눈의 ν”Όλ‘œλ₯Ό λœμ–΄μ£ΌλŠ” 효과λ₯Ό μ£Όμ–΄ 큰 도움이 λ©λ‹ˆλ‹€. μ‚¬μš©μžκ°€ 색 λ°˜μ „ κΈ°λŠ₯을 켜고 닀크λͺ¨λ“œ μ›Ή νŽ˜μ΄μ§€μ— λ°©λ¬Έν•˜λ©΄ λ‹€μ‹œ 밝은 색이 λ˜μ§€ μ•Šμ„κΉŒλΌκ³  걱정할지도 λͺ¨λ₯΄κ² μ§€λ§Œ, 그럴 ν•„μš” μ—†μŠ΅λ‹ˆλ‹€. μ• ν”Œμ˜ '슀마트 λ°˜μ „' κΈ°λŠ₯은 상황에 따라 μ μ ˆν•˜κ²Œ 화면을 λ°˜μ „μ‹œν‚€λŠ” κΈ°λŠ₯으둜, 이미 닀크λͺ¨λ“œλ₯Ό μ§€μ›ν•˜κ³  μžˆλ‹€λ©΄ 화면을 λ°˜μ „μ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

ν•œ μ‚¬μš©μžκ°€ 슀마트폰의 μ–΄λ‘μš΄ 잠금 화면을 ν’€κ³ , μ–΄λ‘μš΄ μ›Ή λΈŒλΌμš°μ €λ₯Ό 켜고, μ–΄λ‘μš΄ μ£Όμ†Œμ°½μ— μ£Όμ†Œλ₯Ό μž…λ ₯ν•΄μ„œ 우리 μ‚¬μ΄νŠΈμ— μ ‘μ†ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. μ•—, κΈ°κΈ° μžμ²΄μ—μ„œ μ§€μ›ν•˜λŠ” 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•˜λ˜ 이 μ‚¬μš©μžλŠ” 닀크λͺ¨λ“œλ₯Ό μ§€μ›ν•˜μ§€ μ•ŠλŠ” 우리 μ‚¬μ΄νŠΈμ— μ ‘μ†ν•˜λŠ” μˆœκ°„ 섬광탄을 λ§žμ€ λŠλ‚Œμ„ κ°„μ ‘μ μœΌλ‘œ μ²΄ν—˜ν•©λ‹ˆλ‹€. μ˜μ‚¬ μ„ μƒλ‹˜, 눈이 μ•ˆλ³΄μ—¬μ—¬ 우리 κ°œλ°œμžλŠ” μ‚¬μš©μžμ—κ²Œ 톡일성 μžˆλŠ” μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•  ν•„μš”κ°€ μžˆμŠ΅λ‹ˆλ‹€. μ‚¬μš©ν•˜λ˜ ν™˜κ²½κ³Ό 동떨어진 ν™˜κ²½μ˜ UIλŠ” μ‚¬μš©μžμ—κ²Œ 거뢀감과 우리 μ‚¬μ΄νŠΈμ—μ„œ ν•œμ‹œλΌλ„ 빨리 λ– λ‚˜κ³  μ‹Άλ‹€λŠ” λ§ˆμŒμ„ 심어쀄 κ²ƒμž…λ‹ˆλ‹€.

μ΄λŸ¬ν•œ 이유둜, 이 κΈ€μ—μ„œλŠ” 닀크λͺ¨λ“œλ₯Ό μ‚¬μš© 쀑인 μ‚¬μš©μžκ°€ μ›Ή μ‚¬μ΄νŠΈμ— 접속할 경우 μžλ™μœΌλ‘œ μ›Ή μ‚¬μ΄νŠΈλ₯Ό μ–΄λ‘μš΄ λ””μžμΈμœΌλ‘œ λ³€κ²½ν•˜λŠ” 방법을 λ‹€λ£Ήλ‹ˆλ‹€.

닀크λͺ¨λ“œ μΈμ‹ν•˜κΈ°

μ‚¬μš©μžκ°€ μ›Ή μ‚¬μ΄νŠΈμ— μ ‘μ†ν•œ μˆœκ°„ 닀크λͺ¨λ“œλ₯Ό μ μš©ν•˜λ €λ©΄ μš°μ„  μ‚¬μš©μžμ˜ κΈ°κΈ°κ°€ 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•˜κ³  μžˆλŠ”μ§€ 확인해야 ν•©λ‹ˆλ‹€. CSS와 JavaScriptμ—μ„œ 이λ₯Ό ν™•μΈν•˜λŠ” 방법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

CSS

CSSλŠ” μ‚¬μš©μž κΈ°κΈ°κ°€ μ–΄λ–€ ν…Œλ§ˆλ₯Ό μ‚¬μš©ν•˜λŠ”μ§€ μ•Œλ €μ£ΌλŠ” prefers-color-scheme미디어쿼리λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€. prefers-color-schemeλŠ” λ‹€μŒκ³Ό 같은 값을 κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

  • no-preference: ν…Œλ§ˆλ₯Ό μ•Œλ¦¬μ§€ μ•ŠμŒ.
  • light: 라이트λͺ¨λ“œλ₯Ό μ‚¬μš©μ€‘μž„.
  • dark: 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©μ€‘μž„.

λ”°λΌμ„œ μ•„λž˜μ™€ 같은 μ½”λ“œλ₯Ό 톡해 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©μ€‘μΈ μ‚¬μš©μžμ—κ²Œλ§Œ μž‘λ™ν•˜λŠ” CSS μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

κ·ΈλŸ¬λ‚˜, 일뢀 λΈŒλΌμš°μ €λŠ” prefers-color-scheme미디어쿼리λ₯Ό μ§€μ›ν•˜μ§€ μ•Šκ±°λ‚˜ μ‹€μ œ μ‚¬μš©μž 기기의 μ‹œμŠ€ν…œ ν…Œλ§ˆ μ„€μ •κ³ΌλŠ” λ‹€λ₯Έ 값을 가지고 μžˆμŠ΅λ‹ˆλ‹€.

  • βœ… : 지원함
  • ❌ : μ§€μ›ν•˜μ§€ μ•Šκ±°λ‚˜ μ‹œμŠ€ν…œ ν…Œλ§ˆ μ„€μ •κ³Ό λ‹€λ₯Έ 값을 가짐.
OS / Browser Safari Chrome Firefox Whale
iOS βœ… ❌ ❌ ❌
iPadOS βœ… ❌ ❌ ❌
macOS βœ… βœ… βœ… βœ…

JavaScript

JSμ—μ„œλŠ” CSS의 미디어쿼리λ₯Ό 빌렀온 λ’€, prefers-color-scheme 미디어쿼리 지원여뢀λ₯Ό ν™•μΈν•˜μ—¬ ν˜Έν™˜μ„±μ„ κ²°μ •ν•©λ‹ˆλ‹€.

const darkModeMeidaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateForDarkModeChange() {
  if (darkModeMeidaQuery.matches) {
    // Dark mode is on.
  } else {
    // Dark mode is off.
  }
}

darkModeMeidaQuery.addListener(updateForDarkModeChange);
updateForDarkModeChange();

이제 λ‹€μŒκ³Ό 같은 μ½”λ“œλ₯Ό μ μš©ν•΄μ„œ 닀크λͺ¨λ“œλ₯Ό μ§€μ›ν•˜λŠ” 데 μ„±κ³΅ν–ˆμŠ΅λ‹ˆλ‹€.

@media (prefers-color-scheme: dark) {
  body {
    background: #323232;
    color: #fff;
  }

  header {
    background: #111;
  }

  footer {
    background: #111;
  }
}

닀크λͺ¨λ“œ

닀크λͺ¨λ“œμ™€ κ΄€λ ¨λœ CSS μ½”λ“œλŠ” λͺ¨λ‘ ν•˜λ‚˜μ˜ 미디어쿼리 속에 μž‘μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ 닀크λͺ¨λ“œμ˜ CSS μ½”λ“œλŠ” dark.cssλΌλŠ” νŒŒμΌμ— λ”°λ‘œ 담아두고 link νƒœκ·Έμ˜ media 속성을 ν™œμš©ν•΄ 파일 λ‹¨μœ„μ˜ 미디어쿼리λ₯Ό μ‘°μž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

dark.css

/*
  media=(prefers-color-scheme: dark)
*/

body {
  background: #323232;
  color: #fff;
}

header {
  background: #111;
}

footer {
  background: #111;
}

index.html

...
<link rel="stylesheet"
      href="assets/css/dark.css"
      media="(prefers-color-scheme: dark)">
...

닀크λͺ¨λ“œ 끄고 켜기

μœ„μ—μ„œ μ–ΈκΈ‰ν•œ 닀크λͺ¨λ“œ 인식 문법은 iOS13 이상, iPadOS, MacOS Mojave μ΄μƒμ˜ 일뢀 λΈŒλΌμš°μ €μ—μ„œλ§Œ μž‘λ™ν•©λ‹ˆλ‹€. μ΅œμ‹  λ²„μ „μ˜ μ• ν”ŒκΈ°κΈ°κ°€ μ•„λ‹ˆκ±°λ‚˜ prefers-color-scheme 미디어쿼리 κΈ°λŠ₯을 μ§€μ›ν•˜μ§€ μ•ŠλŠ” λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜κ³  μžˆλ‹€λ©΄ 닀크λͺ¨λ“œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ•„λž˜λΆ€ν„°λŠ” 닀크λͺ¨λ“œ κΈ°λŠ₯을 μ§€μ›ν•˜μ§€ μ•ŠλŠ” κΈ°κΈ°λ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μš©μžκ°€ 닀크λͺ¨λ“œλ₯Ό μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•˜λŠ” 방법을 λ‹€λ£Ήλ‹ˆλ‹€.

μ•žμ„œ νŒŒμΌμ„ λΆ„λ¦¬ν•˜κΈ° μœ„ν•΄ μΆ”κ°€ν•œΒ  linkΒ μš”μ†Œμ˜Β  media 속성을 μ‘°μž‘ν•˜λŠ” κ²ƒμœΌλ‘œ ν•΄λ‹Ή CSSλ₯Ό ν™œμ„±ν™”ν•˜κ±°λ‚˜ λΉ„ν™œμ„±ν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μš°μ„  닀크λͺ¨λ“œλ₯Ό 끄고 μΌœλŠ” JavaScript ν•¨μˆ˜λ₯ΌΒ  darkModeSwitch라고 ν•˜κ³  이λ₯Ό μ‘°μž‘ν•  λ²„νŠΌμ„ λ§Œλ“­λ‹ˆλ‹€.

<p>
  Dark Mode:
  <a onclick="darkModeSwitch(true)">ON</a>
  /
  <a onclick="darkModeSwitch(false)">OFF</a>
</p>

그리고 μœ„μ—μ„œ dark.cssλ₯Ό 뢈러였기 μœ„ν•΄ μΆ”κ°€ν•œ link νƒœκ·Έμ— idλ₯Ό λΆ€μ—¬ν•©λ‹ˆλ‹€.

<link id="dark-mode-sheet"
      rel="stylesheet"
      href="assets/css/dark.css"
      media="(prefers-color-scheme: dark)">

μœ„μ—μ„œ μ–ΈκΈ‰ν•œ darkModeSwitch ν•¨μˆ˜λ₯Ό μ •μ˜ν•΄μ€λ‹ˆλ‹€. μ—¬κΈ°μ„œ link μš”μ†Œμ˜ media 속성을 μ‘°μž‘ν•  κ²ƒμž…λ‹ˆλ‹€.

function darkModeSwitch(status) {
  document
  .querySelector('#dark-mode-sheet')
  .setAttribute(
    'media',
    status? 'screen' : 'not screen'
  );
}

어렡지 μ•Šκ²Œ 닀크λͺ¨λ“œλ₯Ό 끄고 μΌœλŠ” κΈ°λŠ₯을 μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ‚¬μš©μžκ°€ μ›Ή νŽ˜μ΄μ§€λ₯Ό μƒˆλ‘œκ³ μΉ¨ν•˜κ±°λ‚˜ λ‹€λ₯Έ νŽ˜μ΄μ§€λ‘œ 이동할 경우 닀크λͺ¨λ“œλŠ” ν•΄μ œλ©λ‹ˆλ‹€. 이 λ¬Έμ œλŠ” Cookieλ₯Ό μ‚¬μš©ν•΄ λΈŒλΌμš°μ €μ— 섀정값을 μ €μž₯ν•˜κ³  이 섀정에 따라 μ›Ή νŽ˜μ΄μ§€λ₯Ό ν‘œμ‹œν•˜λ„λ‘ ν•˜λ©΄ ν•΄κ²°λ©λ‹ˆλ‹€.

이 κΈ€μ—μ„œλŠ” μΏ ν‚€μ˜ μ‘°μž‘μ„ μœ„ν•΄Β  JavaScript Cookie 라이브러리λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.Β  μžμ„Ένžˆλ³΄κΈ°

μš°μ„  닀크λͺ¨λ“œλ‘œ λ³€κ²½ν•  λ•Œλ§ˆλ‹€ 이λ₯Ό μΏ ν‚€λ‘œ μ €μž₯ν•©λ‹ˆλ‹€. μΏ ν‚€λŠ” λ¬Έμžμ—΄λ‘œ 값을 μ €μž₯ν•˜κΈ° λ•Œλ¬Έμ— μƒνƒœκ°’μ„ μ •μˆ˜ν˜•μœΌλ‘œ λ³€ν™˜ν•΄μ„œ μ €μž₯ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 그리고 이 값을 κ°€μ Έμ˜€λŠ” ν•¨μˆ˜ isDarkMode도 μΆ”κ°€ν•©λ‹ˆλ‹€.

function isDarkMode() {
  return Cookies.get('darkmode');
}

function darkModeSwitch(status) {
  Cookies.set('darkmode', +status);
  document
  .querySelector('#dark-mode-sheet')
  //μ€‘λž΅
}

이제 μ›Ή νŽ˜μ΄μ§€κ°€ μ‹œμž‘λ  λ•Œ 이 값에 따라 νŽ˜μ΄μ§€λ₯Ό μ‘°μž‘ν•΄μ•Ό ν•©λ‹ˆλ‹€. 쿠킀값이 μžˆλ‹€λ©΄ μ‚¬μš©μž 기기의 닀크λͺ¨λ“œ 섀정을 λ¬΄μ‹œν•˜κ³  쿠킀값에 따라 νŽ˜μ΄μ§€λ₯Ό μ‘°μž‘ν•©λ‹ˆλ‹€. λ§Œμ•½ 쿠킀값이 μ—†λ‹€λ©΄ μ•„λ¬΄λŸ° μ‘°μž‘λ„ ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ €μž₯된 값은 μ •μˆ˜λ‘œ 이루어진 λ¬Έμžμ—΄μ΄λ―€λ‘œ 이λ₯Ό λ‹€μ‹œ μ •μˆ˜ν˜•μœΌλ‘œ λ³€κ²½ν•΄μ€λ‹ˆλ‹€.

//μ „λž΅
document.addEventListener('DOMContentLoaded', function () {
  const isDm = isDarkMode();
  if (isDm != null) darkModeSwitch(+isDm);
});

이제 닀크λͺ¨λ“œλ₯Ό λͺ¨λ“  μ‚¬μš©μžμ—κ²Œ μ™„λ²½ν•˜κ²Œ 지원할 수 있게 λ©λ‹ˆλ‹€.

μ• λ‹ˆλ©”μ΄μ…˜

닀크λͺ¨λ“œλ‘œ λ³€ν•  λ•Œ μ• λ‹ˆλ©”μ΄μ…˜μ„ μΆ”κ°€ν•˜λ©΄ λ”μš± 완성도 μžˆλŠ” μ›Ή λ””μžμΈμ΄ λ©λ‹ˆλ‹€.

μ• λ‹ˆλ©”μ΄μ…˜

body {
  transition: .5s background, .5s color;
}

header {
  transition: .5s background;
}

footer {
  transition: .5s background;
}

ν…ŒμŠ€νŠΈμ— μ‚¬μš©λœ νŽ˜μ΄μ§€λŠ” μ—¬κΈ°λ₯Ό 눌러 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μ–‘ν•œ μ‚¬μš©μžμ˜ μ‚¬μš©μž κ²½ν—˜μ„ μœ„ν•΄ 더 λ§Žμ€ 자료λ₯Ό νƒμƒ‰ν•˜κ³  λ°œμ „ν•˜κΈΈ κΈ°μ›ν•©λ‹ˆλ‹€. 이 글이 도움이 λ˜μ—ˆλ‹€λ©΄ μŠ€νƒ€β­οΈλ₯Ό λˆŒλŸ¬μ£Όμ„Έμš”! κ°μ‚¬ν•©λ‹ˆλ‹€.

도움을 μ£Όμ‹  λΆ„λ“€

About

How HTML, CSS, and JavaScript support dark mode for iOS and macOS.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published