반응형
테일윈드에는 다크 모드가 활성화되었을 때 사이트 스타일을 다르게 지정할 수 있는 다크 변형이 포함되어 있습니다.
예:
<html>
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>페이지의 배경색은 밝은 모드에서는 흰색이고 어두운 모드에서는 검은색입니다.
공무원으로부터 또 다른 예를 들어보겠습니다.
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
</p>텍스트 색상은 밝은 모드에서는 슬레이트-500이고 어두운 모드에서는 슬레이트-400입니다.
그러나 당신은 곧 그것이 얼마나 지루한 작품인지를 알게 될 것이다.
- 백인 대 흑인
- 슬레이트-500 대 슬레이트-400
- ...
어? 색깔이 반대야? 재밌는
뒷바람의 색상 팔레트를 살펴보겠습니다.
당신은 역색을 찾는 방법을 찾았나요? 그것은 명백하다:
- 50대 900
- 100대 800
- 200대 700
- ... 그리고 그 반대의 경우도 있다.
이 문제를 자동으로 처리할 수 있는 변종을 만들어 보는 건 어떨까요?
이것이 바로 뒷바람이 두 가지 색을 띠는 이유이며, 프로젝트에 매우 쉽게 통합할 수 있는 이유입니다.
// tailwind.config.js
const { bicolor } = require('tailwind-bicolor');
module.exports = {
// ...
plugins: [bicolor()],
};<div class="bg-white dark:bg-black"></div>
<!-- Replace with below -->
<div class="bi:bg-white"></div>그게 다야! 온라인 데모로 이동합니다.
기본적으로 역색을 자동으로 처리하지만, 밝은 곳에서는 녹색을 사용하고 어두운 곳에서는 파란색을 사용하려는 경우에도 사용자 정의할 수 있습니다.
'css' 카테고리의 다른 글
| Css와 Javascript 또는 Gsap으로 스포트라이트 효과를 생성하세요. (0) | 2022.01.27 |
|---|---|
| HTML과 CSS를 사용하여 멋진 프로필 카드를 만드는 방법 (0) | 2022.01.27 |
| CSS 변수: 그것들은 무엇이고 그것들을 어떻게 사용하는가 (0) | 2022.01.27 |
| Flexbox를 한 단계 업그레이드 (0) | 2022.01.27 |
| 로그인 - 등록/로그인 - 로그인 (0) | 2022.01.27 |
댓글