CSS에서 빛이나 어두운 모드를 구현하는 방법

Sep 15, 2025

어떻게

CSS 사양은 끊임없이 진화하고 있습니다. CSS의 새로운 기능을 구현하는 프로세스는 복잡하지만 단순화 된 버전은 CSS 작업 그룹이 사양에 추가 할 새로운 요소를 결정한다는 것입니다. 그런 다음이 새로운 요소를 구현하기 위해 브라우저가 업데이트되며 브라우저는 이제 새로운 기능에 대한 지원이 불일치하는 이유입니다. 이것은 때때로 짜증나는 동안, 우리가 웹의 초기에 보았던 것에 따라 전체 사양을 구현하는 브라우저 보다이를 수행하는 것이 훨씬 좋은 방법입니다. 귀하의 사이트가 완전한 기능으로 일하고 있는지 걱정하는 경우 지지체의 지원을 부여하는 경우 웹 호스팅 서비스.

이 모든 소리가 너무 많은 일이 일어난 것 같습니까? 일을 A로 간단하게 유지하십시오 웹 사이트 빌더 ...에

CSS 워킹 그룹은 Apple과 Adobe와 같은 모든 주요 브라우저 공급 업체 및 기타 기술 회사의 회원국으로 구성됩니다. 최근에 새로운 버전의 MacOS를 시작한 Apple은 브라우저에서 Snazzy 새로운 어두운 모드를 탐지하는 방법을 원했습니다. 이렇게하려면 Apple은 새로운 레벨 5 미디어 쿼리의 사양에 대한 권장 사항을 추천했습니다.

 @media (색상 구성표 : 컬러 스킴 : 빛 | 어둡게)
{...}

이 미디어 쿼리를 사용하여 사용자가 현재 OS에서 밝은 또는 어두운 모드를 사용 중이면 탐지 할 수 있습니다. 현재 Safari Technology Preview 69 이상에서만 지원되지만 다른 브라우저는 훨씬 뒤로되어서는 안됩니다.

CSS 방법론에 대한 웹 디자이너 가이드

이를 테스트하기 위해 Mojave 10.14 (MacOS)로 업그레이드해야하며 시스템 환경 설정에서 어두운 모양을 선택했습니다. 이 새로운 미디어 쿼리를 사용하여 다른 테마를 구현할 수있는 몇 가지 방법이 있습니다. 우리는이 자습서에서 몇 가지를 탐구 할 것입니다.

01. 페이지를 설정하십시오

시작하려면 스타일에 몇 가지 HTML 요소를 만들어야하므로 코드 쌍에 새 펜을 만들고 일부 요소를 추가하여 시작할 것입니다. 우리는 콘텐츠를 위해 컨테이너를 추가하고,이를 가운데 및 일부 표제와 텍스트를 추가 할 것입니다. CSS를 사용하여 CSS에서 중첩을 사용하려면 CSS를 설정합니다.

& lt; div class = "콘텐츠 - 컨테이너"& gt; & lt; h1 & gt; 1 ℃의 제목; & lt; h2 & gt; 2 & lt; / h2 & gt; & lt; hr & gt; & lt; p & gt; ... & lt; / p & gt; & lt; p & gt; ... & lt; / p & gt; & lt; / div & gt;

02. 스타일 기본 요소

다음으로 페이지를 조금 더 멋지게 만들기 위해 기본 스타일을 추가하고 Google의 일부 글꼴을 포함시킵니다. 우리는 새로운 글꼴 크기, 색상 및 글꼴을 적용하는 모든 기본 요소를 모두 스타일로합니다.

 몸체 {
글꼴 - 가족 : 'merriweather', serif;
배경색 : #ededed;
색상 : # 212121;
패딩 : 1.618REM;
선 - 높이 : 1.618;
글꼴 크기 : 16px;
}

03. 스타일 컨테이너

CSS light and dark: style container — 편안한 라인 길이로 컨테이너를 만드십시오

다음으로 우리는 컨테이너를 독서하기위한 편안한 라인 길이를 만들기 위해 컨테이너를 스타일링합니다. 우리는 또한 배경색을 추가하고 그림자를 삭제합니다. 페이지의 콘텐츠 상자를 가운데에두기 위해 Margin Property '왼쪽 및 오른쪽 값에서'Auto '키워드를 사용합니다.

 .Content-Container {
패딩 : 1.618REM 3.236REM;
최대 너비 : 48.54REM;
마진 : 3.236REM 자동;
배경색 : #fff;
박스 - 그림자 : 0 0 12px 6px RGBA (0,0,0,0.05);
국경 반경 : .269666667REM;
}

04. 하이라이트 색상을 추가합니다

CSS light and dark: highlight colour — 강조 표시 색상을 선택하고 스타일을 만드십시오.

대부분의 웹 사이트는 어딘가에서 색을 사용하며, 우리는 백색과 회색 만 가지고 있기 때문에 이제는 색상을 강조 표시 하고이 색상을 적용하기위한 스타일을 만들어 보겠습니다. 우리는 SPAN 태그를 사용하여 색상을 적용 할 수 있으며 콘텐츠에서 무언가를 강조하기 위해 사용합니다.

& lt; span 클래스 = "α α"& gt; lorem ipsum & lt; span & gt; .text - 알파 { 색상 : # C3423F; }

05. 미디어 쿼리를 구현합니다

이제 몇 가지 기본 스타일이있는 페이지가 있으시면 미디어 쿼리를 구현할 수있는 방법을 살펴 보겠습니다. 그것을 포함시키고 일부 스타일을 무시하자. 신체 스타일로 시작합니다.

 @media (색상 구성표 : 어둠)
{
몸 {
배경색 - # 111;
}
}

06. 나머지 스타일을 무시합니다

CSS light and dark: override styles — 이제 나머지 스타일을 무시할 수 있습니다

이제 미디어 쿼리가 작동하고 신체 배경색이 변경된 것을 볼 수 있으므로 모든 나머지 스타일을 무시해야합니다.

. 컨테이너 컨테이너
{
색상 : 흰색;
배경색 : # 212121;
}
.text - 알파 {
색상 : # 50A8D8;
}

07. 유지 보수성

우리가 방금 한 일은 우리 데모에 완벽하게 잘 작동하지만 소규모 웹 사이트에서 유지 될 수 있습니다.이 방법은 더 큰 프로젝트를 관리하는 악몽이 될 것이며, 모두 무시할 필요가있는 다양한 요소가 많이 있습니다. 우리는 위의 예에서 캐스케이드를 무거워하는 반면, 대형 시스템은 모든 요소를 타겟팅하기 위해 더 많은 특이성이 필요할 수 있습니다.

08. 다른 접근 방식을 취하십시오

CSS light and dark: another approach — 빠르고 더러운 어두운 모드의 경우 '반전'을 사용하십시오 ...

그럼 우리는 그 밖의 문제가 어떻게 될 수 있습니까? CSS 필터를 살펴 보겠습니다. 우리가 CSS 필터에서 사용할 수있는 값 중 하나는 '반전'이므로이 문제를 HTML에 적용하고 모든 색상을 뒤집어 우리에게 '어두운 모드'를 제공합니다.

 @media (색상 구성표 : 어둡게) {
html {
필터 : 반전 (100 %);
}
}

09. 이미지를 추가하십시오

CSS light and dark: images — ... 물론 사진은 이렇게 보일 것입니다.

필터 메소드가 우리 문서에있는 콘텐츠와 함께 작동하는 동안 여전히 멋지게 보이지 않습니다 - 예를 들어, 우리의 상자 그림자는 또한 꽤 이상하게 보입니다. 우리는 스타일을 통제 할 수있었습니다. 이는 배경을 착색 할 때 더 큰 문제가됩니다. 이미지가 관련 될 때 고려해야 할 새로운 문제가 있습니다. 우리가 페이지에 이미지를 추가 할 때 일어나는 일을 보겠습니다.

10. 사용자 정의 속성을 사용하십시오

지금까지 우리가 탐구 한 방법은 스타일을 통제 할 수 없거나 모든 것이 어두운 모드로 업데이트되었는지 확인하기 위해 많은 유지 관리가 필요합니다. 우리가 접근 할 수있는 또 다른 방법이 있습니다. 우리는 색상을 정의한 다음 미디어 쿼리를 사용하여 겹쳐 쓰기 위해 사용자 정의 속성을 사용할 수 있습니다.

11. 사용자 정의 속성을 만듭니다

사용자 정의 속성을 사용하려면 "우리는 '내부의 CSS의 맨 위에 그들을 정의합니다. :뿌리 '요소' 루트 요소는 HTML과 동일한 범위를 가지므로 전 세계적으로 사용할 수 있습니다. 우리는 변수 이름을 결정하고 값을 정의해야합니다.

 : 루트 {
- 배경색 - 색상 : #ededed;
- 페이지 - 배경 : #fff;
- 텍스트 색상 : # 212121;
- 컬러 - 알파 : # C3423F;
}

12. 맞춤 속성을 적용하십시오

이제 우리는 우리가 CSS에서 사용할 수있는 사용자 정의 속성을 가지고 있습니다. 우리는 시체로 시작하고 배경과 텍스트 색상을 적용 할 것입니다. 사용자 정의 속성을 사용하려면 ' var (- 사용자 정의 - 이름) '구문.

 몸체 {
배경색 : var (- 배경색);
색상 : var (- 텍스트 - 색상);
}

13. 나머지 특성을 적용하십시오

동일한 방법을 사용하여 우리는 또한 우리의 컨테이너의 '배경색'과 '색상'을 업데이트 할 수 있습니다. ' 텍스트 - 알파 '맞춤 속성을 사용하는 클래스. 페이지의 모든 색상은 이제 사용자 정의 속성을 사용하여 제어됩니다.

 .Content-Container {
배경색 : var (- 페이지 - 배경);
}
.text - 알파 {
색상 : var (- color-alpha);
}

14. 미디어 쿼리를 다시 추가하십시오

이제 우리는 미디어 쿼리를 다시 추가 할 수 있지만 이번에는 해당 내부의 사용자 정의 속성 값을 무시할 수 있습니다. 우리는 원래의 루트 정의와 미디어 쿼리 내에이 오른쪽을 배치 할 것입니다. 이제 모든 색상 사용자 지정 속성에 대한 새 값을 선택할 수 있습니다.

 @media (색상 구성표 : 어둡게) {
: 루트 {
- 배경색 - 색상 : # 111;
- 페이지 - 배경 : # 212121;
- 텍스트 색상 : #ededed;
- 컬러 - 알파 : # 50A8D8;
}
}

15. 완전한 조절을하십시오

맞춤 등록 정보는 우리가 변경하고 사용할 수있는 색상 및 기타 속성을 선택할 수있는 모든 기능을 제공합니다. 어두운 모드를 사용할 때는 페이지 컨테이너의 상자 그림자를 덜 투명하게 만들어 봅시다. 이렇게하려면 페이지 그림자에 대한 새 사용자 정의 속성을 만들어야합니다.

 : 루트 {
...에 ...
- 페이지 - 그림자 : 0 0 12px 6px Rgba.
(0,0,0,0.05);
}

16. 그림자를 적용하십시오

이제 페이지의 올바른 요소에 적용하는 데 필요한 다른 사용자 정의 속성을 만들었습니다. 그런 다음 투명성을 줄이기 위해 루트 요소 내부의 값을 무시할 수 있습니다.

 @media (색상 구성표 : 어둡게) {
: 루트 {
...에 ...
- 페이지 - 그림자 :
0 0 12px 6px RGBA (0,0,0,0.33)
;
}
}
.Content-Container {
...에 ...
상자 - 그림자 : var (- 페이지 - 그림자);
}

17. 이미지를 추가하십시오

이제 이미지를 콘텐츠에 다시 추가 한 다음 콘텐츠 옆에있는 이미지를 부동하는 데 몇 가지 기본 스타일을 추가 할 수 있습니다.

 img {
너비 : 100 %;
높이 : 자동;
왼쪽으로 뜨다;
최대 너비 : 300px;
마진 오른쪽 : 1.618REM;
마진 하단 : 1.618REM;
}

우리가 볼 수 있듯이 필터를 사용하지 않으므로 이미지가 두 테마간에 변경되지 않습니다.

18. 더 많은 구성 요소를 추가하십시오

이제 우리는 사용자 정의 속성을 가지고 있으며, 우리는 페이지에 요소를 추가하고 변수로 스타일링 할 수 있습니다. 버튼 클래스를 만들고 페이지에 단추를 추가합시다.

 .Button {
디스플레이 : 인라인 플렉스;
글꼴 - 가족 : 상속;
배경색 : var (- color-alpha);
색상 : var (- 텍스트 - 색상);
패딩 : 1.618REM 3.236REM;
테두리 : 0 없음;
국경 반경 : 0.25rem;
텍스트 장식 : 없음;
}

19. 단추 스타일 만들기

동일한 변수를 사용하여 두 테마 모두에 사용할 수있는 호버 스타일을 만들 수도 있습니다. 이를 달성하기 위해 사용자가 버튼을 통해 가리키면 색상을 반전시켜 이러한 속성을 전환하여 덜어 져야합니다.

 .Button {
...에 ...
전환 : 배경색 150ms,
색 150ms;
& amp; hover {
배경색 : var (- 텍스트 - 색상);
색상 : var (- color-alpha);
}
}

20. 버튼 사용자 정의 속성 만들기

사용자 정의 속성은 일반 CSS 요소와 동일한 범위 를가집니다. 즉,보다 특정한 선택기를 사용하여 대체 할 수 있음을 의미합니다. 우리는이를 활용하고 버튼으로 범위가 지정된 일부 변수를 만듭니다.

 .Button {
- 버튼 - 배경 : var (- color-alpha);
- 버튼 - 텍스트 : var (- 배경색);
배경색 : var (- 버튼 - 배경);
색상 : var (- 단추 텍스트);
...에 ...
}

21. 범위를 이용하십시오

CSS light and dark: scope — 범위를 사용하여 버튼에 대해 다른 스타일과 상호 작용을 만듭니다.

우리는 어둡고 가벼운 테마의 버튼을 위해 다른 스타일을 만들고 상호 작용을 가져 오기 위해이 범위를 활용할 수 있습니다. 우리는 일반적으로 우리가 새로운 값으로 재산을 반복하는 대신 미디어 쿼리 또는 요소의 상태를 기반으로 변수의 값을 변경할 수 있습니다.

 .Button {
...에 ...
& amp; hover {
- 버튼 - 배경 : # AE3937;
@ Media (Prepers-Color-Cheme : Dark) {
- 버튼 - 배경 : # 2E98D1;
- 버튼 - 텍스트 : var (- 배경 -
색깔);
}
}
}

팀과 함께 빌드에서 일하고 있습니까? 당신의 과정을 일치하게 유지하십시오 클라우드 스토리지 ...에

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

이 기사는 원래 Creative Web Design Magazine의 Issage 283에서 출판되었습니다. 웹 디자이너 ...에 구매 문제 283. 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

CSS 아트를 시작하십시오
12 Great CSS 애니메이션 리소스
어떤 CSS 프레임 워크를 사용해야합니까?

CSS에서 빛이나 어두운 모드를 구현하는 방법

01. 페이지를 설정하십시오

02. 스타일 기본 요소

03. 스타일 컨테이너

04. 하이라이트 색상을 추가합니다

05. 미디어 쿼리를 구현합니다

06. 나머지 스타일을 무시합니다

07. 유지 보수성

08. 다른 접근 방식을 취하십시오

09. 이미지를 추가하십시오

10. 사용자 정의 속성을 사용하십시오

11. 사용자 정의 속성을 만듭니다

12. 맞춤 속성을 적용하십시오

13. 나머지 특성을 적용하십시오

14. 미디어 쿼리를 다시 추가하십시오

15. 완전한 조절을하십시오

16. 그림자를 적용하십시오

17. 이미지를 추가하십시오

18. 더 많은 구성 요소를 추가하십시오

19. 단추 스타일 만들기

20. 버튼 사용자 정의 속성 만들기

21. 범위를 이용하십시오

어떻게 - 가장 인기있는 기사

맞춤 슬랙 봇 만들기

WordPress가있는 클라이언트 포털 만들기

CSS가있는 SVG 필터 추가

Photoshop의 믹서 브러시 마스터

Photoshop에서 사진을 3D 애니메이션으로 켜십시오

창조적 인 어셈블리가있는 게임 캐릭터 수준 업

Illustrator에서 바쁜 도시 장면을 만듭니다

3D 모발 및 모피를 만드는 방법

카테고리