분류 css

메타 테마 색상 및 트릭

컨텐츠 정보

  • 조회 378 (작성일 )

본문

버전 15부터 Safari는 macOS와 iOS 모두에서 theme-color <meta> 태그를 지원합니다. 이제 첫 번째 데스크톱 브라우저가 이 <meta> 태그를 지원하고 미디어 속성과 기본 색상 구성표 미디어 기능도 지원하기 때문에 흥미로운 소식입니다.


나는 theme-color 메타 태그에 대해 별로 주의를 기울이지 않았지만 지금은 그 기능과 제한 사항에 대해 배우고 흥미로운 사용 사례를 발견하려고 노력할 좋은 시간입니다.


Safari는 Safari Technology Preview(127)의 현재 릴리스에서 테마 색상 메타 태그에 대한 지원을 제거했습니다. 이것은 일시적인 현상인 것 같습니다.


기능 및 제한 사항 


다음은 지난 몇 년 동안 테마 색상 메타 태그를 사용하는 방법입니다. 콘텐츠 속성에 대한 좋은 16진수 코드입니다.


<meta name="theme-color" content="#319197"> 


themecolor_1.jpg?resize=575%2C346&ssl=1 


올해 초 내가 만든 테스트에 따르면 이것은 Android의 Chrome, Brave 및 Samsung Internet에서 작동하고 Chrome에 설치된 PWA 및 이제 Safari Technology Preview에서도 작동합니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1625073641591_hex.png?resize=2072%2C896&ssl=1CSS 색상 지원 


가장 먼저 떠오른 질문 중 하나는 "색상 키워드, hsl(), rgb()도 사용할 수 있습니까?"였습니다. HTML 사양에 따르면 속성 값은 모든 CSS 색상이 될 수 있습니다. 이를 확인하기 위해 이 테마 색상 테스트 CodePen을 만들었습니다.


<meta name="theme-color" content="hsl(24.3, 97.4%, 54.3%)"> 


Blank webpage with orange header. 


Blank webpage with a hot pink header. There are controls to the right of the webpage for browser testing. 


지원되는 모든 브라우저는 hsl() 및 rgb()도 지원합니다. 이것은 JavaScript로 꽤 멋진 일을 할 수 있게 해주기 때문에 굉장합니다. 이에 대해서는 나중에 이야기하겠지만 먼저 몇 가지 제한 사항을 살펴보겠습니다.


Transparency 


HEX 코드, rbg(), hsl() 및 키워드는 훌륭하고 일관되게 지원되지만 투명도를 포함하는 색상은 그다지 많지 않습니다. 실제로 대부분의 브라우저에서 지원되지만 결과가 일관되지 않고 때로는 예상치 못한 경우가 있습니다.


transparent는 CSS 색상이며 대부분의 브라우저에서 예상한 대로 테마 색상 메타 태그에 사용됩니다. 모든 일반 모바일 브라우저는 색상을 변경하지 않고 기본 탭 막대를 표시하지만 macOS의 Safari 및 macOS의 Chrome Canary PWA는 탭 막대를 검은색으로 바꿉니다. Android의 PWA는 manifest.json에 정의된 theme-color로 대체됩니다. 이에 대해서는 잠시 후에 설명하겠습니다.


Examples of the same white webpage with either white or dark headers with the browser vendor labeled above each one. 


모든 브라우저는 hsla() 및 rgba()를 해석하지만 알파 값을 1로 설정합니다. 유일한 예외는 macOS의 Safari입니다. 투명도를 해석하지만 투명 색상에 검은색 기준선이 있는 것처럼 보입니다. 이것은 밝은 오렌지색이 어두운 오렌지색처럼 보이는 효과가 있습니다.


Same browser comparison but all with orange headers, except Safari which is a darker brown. 

새로운 색상 함수 


Safari 15는 lab(), lch() 및 hwb() 색상 기능을 지원하는 최초의 브라우저입니다. 이러한 함수는 CSS에서 사용하면 작동하지만 theme-color 메타 태그에서 사용하면 작동하지 않습니다.


세 가지 선언 모두 Safari 15에서 제대로 작동합니다.


body { background-color: hwb(27 10% 28%); background-color: lch(67.5345% 42.5 258.2); background-color: lab(62.2345% -34.9638 47.7721); } 


theme-color 메타 태그에서 새로운 색상 기능을 사용하는 경우 Safari는 해당 기능을 해석하지 않고 색상을 선택하는 자체 알고리즘으로 대체합니다. Safari는 theme-color에 대해 <body>의 배경색을 사용할 가능성이 높습니다. 즉, theme-color를 명시적으로 정의하지 않고도 예상한 결과를 얻을 수 있습니다.


<meta name="theme-color" content="lab(29.2345% 39.3825 20.0664)"> 


Green webpage with green header. 


이 새로운 색상 기능을 지원하는 브라우저는 Safari 15뿐입니다.


currentColor 


CSS 색상이 지원되면 currentColor도 작동해야 겠죠? 아니요, 불행히도 어떤 브라우저에도 없습니다. 흔하지 않은 사용 사례일 수 있지만 theme-color를 <body> 또는 <html> 요소의 현재 색상으로 설정할 수 있을 것으로 예상합니다.


<style> body { color: blue; } </style> <meta name="theme-color" content="currentColor"> 


WebKit 버그 추적기에서 "<meta name="theme-color" content="...">도 CSS currentcolor를 지원해야 합니다."라는 제목의 티켓을 찾았습니다. 누군가 티켓을 수령하면 향후 지원이 변경될 수 있습니다.


금지된 색상 


CSS 색상 키워드를 테스트할 때 빨간색을 사용했는데 작동하지 않았습니다. 처음에는 키워드가 지원되지 않는다고 생각했지만 파란색, 핫핑크, 녹색이 잘 작동했습니다. 밝혀진 바와 같이 Safari가 지원하지 않는 좁은 범위의 색상, 즉 인터페이스를 사용하는 데 방해가 되는 색상이 있습니다. 빨간색은 탭 표시줄에 있는 닫기 버튼의 배경색에 시각적으로 너무 가깝기 때문에 작동하지 않습니다. 이 제한은 Safari에만 해당되며 지원되는 다른 모든 브라우저에서는 모든 색상이 제대로 작동하는 것 같습니다.


Wbite webpage with a color picker set to red. The header of the browser is white. 



사용자 정의 속성 


브라우저의 내부와 사용자 정의 속성에 대해 충분히 알지 못하고 <head>에서 사용자 정의 속성에 액세스할 수 있는지 여부도 모르지만 어쨌든 시도했습니다. 불행히도 어떤 브라우저에서도 작동하지 않았습니다.


<style> :root { --theme: blue; } </style> <meta name="theme-color" content="var(--theme)"> 


이것이 내가 테마 색상 메타 태그의 기본 지원에 대해 알고 싶었던 거의 모든 것입니다. 다음으로 탭바에 다크모드를 구현하는 방법과 구현하지 않는 방법에 대해 알아보겠습니다.


Dark mode 


Safari 15는 테마 색상 메타 태그에서 미디어 속성과 기본 색상 구성표 미디어 기능을 지원하는 최초의 데스크탑 브라우저입니다. 버전 93부터 Chrome도 지원하지만 설치된 프로그레시브 웹 앱에만 해당됩니다.


web.dev의 웹 앱 매니페스트 페이지에 따르면 여러 테마 색상 메타 태그를 정의하면 브라우저는 일치하는 첫 번째 태그를 선택합니다.


<meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)"> 


나는 미디어 속성을 지원하지 않는 브라우저에서 어떤 일이 일어나는지 알고 싶었습니다. 위의 메타 태그를 포함하고 사이트를 PWA로 설치할 수 있는 다크 모드 테스트용 데모 페이지를 만들었습니다. webmanifest.json에는 theme-color에 대한 또 다른 색상 정의가 포함되어 있습니다.


{ "name": "My PWA", "icons": [ { "src": "https://via.placeholder.com/144/00ff00", "sizes": "144x144", "type": "image/png" } ], "start_url": "/theme-color-darkmode.html", "display": "standalone", "background_color": "hsl(24.3, 97.4%, 54.3%)", "theme_color": "hsl(24.3, 97.4%, 54.3%)" } 


지원되는 브라우저가 라이트 모드에서 탭 표시줄을 표시하는 방법은 다음과 같습니다. 브라우저가 미디어 속성을 지원하는지 여부는 중요하지 않으며 관계없이 첫 번째 메타 태그를 해석합니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624815621789_lightmode.png?resize=1024%2C443&ssl=1 

다음은 같은 페이지의 탭 표시줄이 다크 모드에서 어떻게 보이는지 보여줍니다. 이 결과는 조금씩 다르기 때문에 더 흥미롭습니다. Canary PWA 및 Safari는 어두운 색상을 지원하고 표시합니다. 기본 색상 구성표 미디어 기능을 지원하지 않기 때문에 밝은 스타일을 사용하는 Samsung 인터넷을 제외하고 모든 모바일 브라우저는 기본 어두운 탭 표시줄 스타일을 사용합니다. (TIL: 이것은 가까운 장래에 변경될 것입니다.)


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624817862906_darkmode-1.png?resize=2072%2C896&ssl=1마지막 테스트를 하나 했습니다. 어두운 모드의 테마 색상만 정의하고 밝은 모드에서 페이지에 액세스하면 어떻게 되는지 보고 싶었습니다.


<meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)"> 


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624818342759_darkmodeonly.png?resize=2072%2C896&ssl=1모든 모바일 브라우저가 미디어 속성을 무시하고 메타 태그의 어두운 색상만 사용할 것으로 예상했기 때문에 이러한 결과가 가장 놀랐습니다. 하지만 일반 Chrome Canary는 미디어 속성을 지원하지 않음에도 불구하고 전체 메타 태그를 완전히 무시합니다. . 예상대로 두 Canary PWA는 매니페스트 파일에 정의된 색상으로 대체됩니다.


또 다른 흥미로운 점은 Safari가 조명 모드에 대해 테마 색상을 정의하지 않았음에도 불구하고 테마 색상을 표시한다는 것입니다. 테마 색상을 제공하지 않으면 Safari가 자체적으로 색상을 선택하기 때문입니다. 이 경우 페이지의 배경색을 사용하지만 예를 들어 <header> 요소의 배경색을 사용할 수도 있습니다.


밝은 모드와 어두운 모드에 대한 테마 색상을 정의하려는 경우 가장 좋은 방법은 두 색상을 모두 정의하고 미디어 기능을 지원하지 않는 브라우저에 대한 폴백으로 첫 번째 메타 태그를 사용하는 것입니다.

<meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)"> 


Safari는 테마 색상이 데스크탑 브라우저에서도 잘 작동한다는 것을 입증했습니다. 특히 JavaScript를 통해 값을 변경할 수 있다는 점을 고려하면 디자이너와 개발자가 이 메타 태그를 사용하는 창의적인 방법을 많이 찾을 것이라고 확신합니다. 나는 당신의 영감을 위해 몇 가지 흥미로운 데모를 수집하고 만들었습니다.


데모 및 사용 사례 


Theming 


poolsuite.net은 사이트에 다양한 테마를 제공하고 그에 따라 테마 색상을 변경합니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624819758353_Screenshot2021-06-27at20.48.55.png?resize=2804%2C1786&ssl=1 



Max Böck도 테마를 변경할 때 웹사이트의 테마 색상을 변경합니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1625077477167_max.png?resize=1669%2C1079&ssl=1 

Page theming 


대부분의 웹사이트는 사용자 정의 테마를 제공하지 않지만 여전히 페이지에 확실한 것을 제공할 수 있습니다. Dave는 자신의 블로그 게시물에서 링크와 아이콘에 다른 주요 색상을 사용하고 있으며 이제는 탭 표시줄에도 사용합니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624898056250_dave.png?resize=1660%2C1212&ssl=1Gradients 


페이지에서 그라디언트를 사용하는 경우 그라디언트를 전체 브라우저에 걸쳐서 스타일을 강조 표시할 수 있습니다. 테마 색상 메타 태그는 그라디언트를 지원하지 않지만 메타 태그와 페이지 배경의 그라디언트 시작 색상에 동일한 색상을 사용할 수 있습니다.


<meta name="theme-color" content="rgb(0, 235, 255)"> <style> body { background: linear-gradient(rgb(0, 235, 255), #08124a); } </style> 


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624899029183_Screenshot2021-06-28at18.50.05.png?resize=2804%2C1786&ssl=1 



Form validation 


양식 유효성 검사에서 테마 색상을 변경하는 양식의 개념 증명을 만들었습니다. 제출된 데이터가 유효하지 않으면 빨간색으로 바뀌고 유효한 경우 녹색으로 바뀌는 파란색 탭 막대로 시작합니다.



s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624820499882_fomr.png?resize=1386%2C647&ssl=1 


const email = document.querySelector('input') const themeColor = document.querySelector('meta[name="theme-color"]') const msg = document.querySelector('[aria-live]') let color = '#FA0000' let message = 'Error message' document.querySelector('button').addEventListener('click', (e) => { e.preventDefault() email.reportValidity() email.setAttribute('aria-invalid', true) if (email.validity.valid) { color = '#00FF00' message = "Success message!" email.setAttribute('aria-invalid', false) } msg.textContent = message themeColor.setAttribute('content', color) }); 



Disco mode 


그렇게 해야 한다고 말하는 것은 아니지만 setInterval 및 hsl() 색상을 결합하여 사이트를 ? 디스코 모드 ?로 전환할 수 있습니다.


/* Inspired by https://twitter.com/argyleink/status/1408184587885309952 */ const motion = window.matchMedia("(prefers-reduced-motion: no-preference)"); // Check if users don't have a preference for reduced motion if (motion.matches) { let scheme = document.querySelector('meta[name="theme-color"]') let hue = 0 let color setInterval(() => { color = `hsl(${hue+=5} 50% 30%)` document.body.style.background = color; scheme.setAttribute('content', color) }, 50) 



Scrolling 


Stuart는 좋은 아이디어를 가지고 있었고 스크롤에서 테마 색상을 변경할 것을 제안했습니다. 다시 hsl() 색상을 사용하여 이 빠른 프로토타입을 만들었습니다.



성능에 부정적인 영향을 미치지 않는 경우에만 이 작업을 수행하십시오. 

Max는 Intersection Observer를 사용하여 뷰포트에서 현재 섹션의 배경색에 따라 테마 색상을 변경하는 데모를 구축했습니다.



const setThemeColor = (color) => { const meta = document.querySelector('meta[name="theme-color"]') if (meta) { meta.setAttribute('content', color) } } if ("IntersectionObserver" in window) { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const { isIntersecting, target } = entry if (isIntersecting) { const color = window.getComputedStyle(target).getPropertyValue("background-color"); setThemeColor(color) } }) }, { root: document.getElementById('viewport'), rootMargin: "1px 0px -100% 0px", treshold: 0.1 }) document.querySelectorAll('.section').forEach(section => { observer.observe(section) }) } 


Extracting color 


또 다른 흥미로운 아이디어는 헤더 이미지에서 지배적이거나 평균적인 색상을 자동으로 추출하여 테마 색상으로 사용하는 것입니다.


s_2BD09FE6F5E7D3412F4AEEF0B1BEE0CE1D56F7023E30B804529E2685536D0955_1624902669606_dominantcolor.png?resize=2804%2C1786&ssl=1 


<script type="module"> import fastAverageColor from "https://cdn.skypack.dev/fast-average-color@6.4.0"; const fac = new fastAverageColor(); fac.getColorAsync(document.querySelector('img')) .then(color => { document.querySelector('meta[name="theme-color"]').setAttribute('content', color.rgba) }) .catch(e => { console.log(e); }); </script> <img src="/amy-humphries-2M_sDJ_agvs-unsplash.jpg" alt="A sea star on blue sand." /> 


이것은 몇 가지 아이디어에 불과하지만 저는 이미 이것이 어디로 가고 있는지를 좋아하고 테마 색상 메타 태그를 사용하는 훨씬 더 창의적인 방법을 생각해 낼 것이라고 확신합니다.


https://css-tricks.com/meta-theme-color-and-trickery/