1(또는 몇 줄)의 CSS가 있는 다크 모드 🌓

23611 단어 webdevcssjavascripttutorial
이번 주에 저는 제 블로그에 다크 모드를 추가하고 싶었습니다(현재 개발 중). 그래서 간단한 해결책을 찾고 또 찾고 또 찾았습니다.

제 아이디어를 소개하려고 합니다. 그러나 나중에 동일한 2개의 기사를 찾았습니다. 그러나 그들의 솔루션은 다소 불완전합니다.

CSS 필터입니다

Jump to final example
Jump to final demo

다크모드는 이름이 너무 많아서
  • 라이트 온 다크
  • 블랙 모드
  • 다크 모드
  • 어두운 테마
  • 야간 모드

    • 다크 모드는 2018-2019년 트렌드입니다.

    어리석은 방법이 있습니다.

    .dark {
  background-color: black; /* from white to black */
  color: white; /* from black to white */
}


    그런 다음 HTML을 작성하십시오.

    ...
<body class="dark">
  <h1>Hello World!</h1>
   ...
</body>
...


    이것은 예를 들어 잘 작동합니다. 실제 웹사이트에는 버튼, 알림, 모델 등과 같은 스타일 항목이 너무 많습니다. 모두 다크 모드로 스타일을 지정하면

    body {
  background-color: ...;
  color: ...;
}
.btn {
  background-color: ...;
  color: ...;
}
.btn.primary {
  background-color: ...;
  color: ...;
}
...
...
.dark {
  background-color: ...;
  color: ...;
}
.dark .btn {
  background-color: ...;
  color: ...;
}
.dark .btn.primary {
  background-color: ...;
  color: ...;
}
...
...


    그런 다음 CSS 스타일시트를 두 배로 늘렸습니다.

    스타일 시트의 크기를 줄이는 솔루션은 무엇입니까???
    여기 CSS의 슈퍼맨이 있습니다. CSS 변수(CSS 사용자 정의 속성)!!!

    테마 색상을 CSS 변수로 정의합니다.

    :root {
  --text-color: black; 
  --bg-color: white;
}
.dark {
  --text-color: white; 
  --bg-color: black;
}


    그런 다음 변수를 사용하여 색상을 설정합니다.

    body, .dark {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.btn {
  background-color: var(--bg-color);
  color: var(--text-color);
}
.btn.primary {
  background-color: var(--bg-color);
  color: var(--text-color);
}
...
...


    이것은 잘 작동합니다.

    하지만 저는 개발자(취미)입니다. 디자이너가 아닙니다. 밝은 테마와 어두운 테마에서 어떤 색상을 사용해야 합니까?

    그런 다음 Darkmode.js을 찾았습니다. CSSmix-blend-mode: difference;를 사용하여 전체 웹 페이지에 어두운 모드를 활성화합니다. 복잡하고 몇 가지 문제가 있습니다. JavaScript를 사용하는 대신 누구나 CSS에서 mix-blend-mode를 사용하여 어두운 테마를 활성화할 수 있습니다. 다음 예에서는 mix-blend-mode: difference;가 작동하는 방식을 설명합니다.

    light-theme-color = rgb(x, y, z)
dark-theme-color = rgb(255-x, 255-y, 255-z)


    링크 색상을 파란색에서 이상한 노란색으로 변환합니다.

    light-theme-color = rgb(0, 0, 238) = blue
dark-theme-color = rgb(255-0, 255-0, 255-238) = rgb(255, 255, 17) = yellow


    며칠 후, 나는 아이디어를 얻었다... CSS 필터

    반전 필터를 사용하여 다크 모드를 활성화하십시오.

    .dark {
  filter: invert(100%);
}


    그런 다음 .dark 클래스를 html 태그에 추가합니다. 그것은 완벽한 장소입니다.

    <html class="dark">
   ...
</html>


    이 방법은 텍스트 색상과 배경색이 없으면 작동하지 않습니다. 그리고 height를 100%에 html로 설정하고 내용이 없는 페이지의 전체 페이지 어두운 테마에 대해 body 태그를 설정합니다.

    html,
body {
  color: #222;
  background-color: #fff;
  height: 100%;
}

    invert(100%)는 mix-blend-mode와 동일합니다. 그러나 더 간단합니다.

    light-theme-color = rgb(x, y, z)
dark-theme-color = rgb(255-x, 255-y, 255-z)


    하지만 이 방법도 같은 문제가 있습니다. 링크는 어두운 모드에서 노란색입니다.
    이 문제를 해결하려면 다음과 같이 해야 합니다.

    .dark {
  filter: invert(100%) hue-rotate(180deg);
}

    hue-rotate(180deg)는 색조 휠의 색상을 색조 휠의 반대 색상으로 변경합니다. 다음은 색조 휠입니다.


    다음 예에서는 링크 색상에 대해 filter: invert(100%) hue-rotate(180deg);가 작동하는 방식을 설명합니다.

    light-theme-color = rgb(0, 0, 238) = blue
inverted-color = rgb(255-0, 255-0, 255-238) = rgb(255, 255, 17) = yellow = hsl(60, 100%, 53%)
hue-rotated-color = hsl(270, 100%, 53%) = light-blue


    이 필터는 이미지에도 적용됩니다. 그래서 이미지가 못생겼습니다. 이미지에서 해당 필터를 제거하려면 필터를 다시 사용하십시오. 따라서 동일한 필터가 이미지에 두 번 적용되었습니다. inverse(100%) X inverse(100%) = inverse(0) 및 hue-rotate(180deg) X hue-rotate(180deg) = hue-rotate(0) .

    .dark,
.dark img {
  filter: invert(100%) hue-rotate(180deg);
}


    다른 미디어 요소에 대해서도 동일한 작업을 수행합니다.

    .dark,
.dark img,
.dark picture,
.dark video,
.dark canvas {
  filter: invert(100%) hue-rotate(180deg);
}


    미디어 요소에 어두운 테마를 적용해야 할 때 적용할 nofilter라는 클래스를 만듭니다.

    .nofilter {
  filter: none !important;
}


    그런 다음 HTML에서 nofilter를 사용하십시오.

    <img class="nofilter" src="path/to/image" alt="something"/>


    약간transition으로 매끄럽게 보입니다.

    html,
img,
picture,
video,
canvas {
  transition: filter 0.3s ease-in-out;
}


    사용자의 선호도를 어떻게 알 수 있습니까???. 이를 수행하는 CSS 미디어 쿼리가 있습니다.

    @media (prefers-color-scheme: dark) {
  html,
  img,
  picture,
  video,
  canvas {
    filter: invert(100%) hue-rotate(180deg);
  }
}


    다크 모드 토글 버튼을 만들고 사용자 기본 설정을 저장하고 싶습니다. + 또는 사용자 선호도를 자동으로 감지합니다. localstorage 매장 취향에 딱 맞습니다. window.matchMedia를 사용하여 CSS 미디어 쿼리가 현재 상태와 일치하는지 확인합니다.

    if (
  localStorage.theme === "dark" ||
  (!("theme" in localStorage) &&
    window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}


    이것은 SVG가 있는 토글 버튼입니다.

    <button onclick="toggleDark()">
  <svg aria-hidden="true" data-prefix="fas" data-icon="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 2rem; width: 2rem;" class="svg-inline--fa fa-moon">
    <path fill="currentColor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36 0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"></path>
  </svg>
</button>


    버튼은 둥글고 투명합니다.

    button {
  background: transparent;
  border: transparent;
  border-radius: 50%;
  cursor: pointer;
}


    다크 모드를 전환하는 JavaScript 기능이 있습니다.

    let toggleDark = () => {
  let result = document.documentElement.classList.toggle("dark");
  localStorage.theme = result ? "dark" : "light";
};


    최종 예



    그런 다음 까다로운 하나의 라이너로 위 코드의 최소 하위 집합을 소개할 것입니다. 이 코드는 많은 사이트에 충분합니다.

    .dark, .dark img { filter: invert(100%) hue-rotate(180deg); }


    최종 데모



    고급 데모입니다.


    나는 당신의 생각을 알고 싶습니다. 다크모드 라이브러리를 만들 수 있을지도 모릅니다.

    이 기사를 즐기십시오.
    더 많은 기사를 보려면 나를 따르십시오.
    감사합니다 💖💖💖
    Device File 과 Udev 이해
    eth와erc20 코드 접속

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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