애니메이션 어두운 테마 토글을 웹 사이트에 추가
5199 단어 darkhtmlopensourcereact
라이브러리는 현재 React를 공식적으로 지원하지만 모든 프레임워크에서 쉽게 사용할 수 있습니다.
All the toggles
Github
웹사이트에 추가
웹사이트에 클래식 토글을 추가하는 방법을 보여드리겠습니다. 반응을 사용하는 경우 아래를 참조하십시오.
먼저 toggles.dev에서 HTML 코드를 복사해야 합니다.
우리는 버튼을 사용할 것입니다. 작성 당시에는 다음과 같습니다.
<button
class="theme-toggle"
type="button"
title="Toggle theme"
aria-label="Toggle theme"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
width="1em"
height="1em"
fill="currentColor"
stroke-linecap="round"
class="theme-toggle__classic"
viewBox="0 0 32 32"
>
<clipPath id="theme-toggle__classic__cutout">
<path d="M0-5h30a1 1 0 0 0 9 13v24H0Z" />
</clipPath>
<g clip-path="url(#theme-toggle__classic__cutout)">
<circle cx="16" cy="16" r="9.34" />
<g stroke="currentColor" stroke-width="1.5">
<path d="M16 5.5v-4" />
<path d="M16 30.5v-4" />
<path d="M1.5 16h4" />
<path d="M26.5 16h4" />
<path d="m23.4 8.6 2.8-2.8" />
<path d="m5.7 26.3 2.9-2.9" />
<path d="m5.8 5.8 2.8 2.8" />
<path d="m23.4 23.4 2.9 2.9" />
</g>
</g>
</svg>
</button>
그런 다음 CSS가 있는지 확인하려고 합니다. JSDELIVR에서 최신 버전을 찾아 머리에 추가하십시오.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/classic.min.css" integrity="sha256-ILVFUnh+ImxX+Mn4ykqVnowo8WNCuskhdKSuoOOrago=" crossorigin="anonymous">
<head />
이제 테마가 어두울 때 토글 클래스를 적용하기만 하면 됩니다. "theme-toggle--toggled"클래스가 있으면 버튼이 토글됩니다. JavaScript를 통해 토글해야 합니다.
그리고 그게 다야.
반응하다
반응을 사용하는 경우 토글을 시작하고 실행하는 것이 훨씬 더 쉽습니다. 반응 패키지 사용 방법 보기here
Reference
이 문제에 관하여(애니메이션 어두운 테마 토글을 웹 사이트에 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alfiejones/adding-an-animated-dark-theme-toggle-to-your-website-3018텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
