반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Tags
- MongoDB
- 코딩
- 파이썬
- 백준
- OAuth2.0
- bcrypt
- spring
- RiotAPI
- 깃
- oAuth
- 게임개발
- react
- node.js
- springboot
- 유니티
- AWS
- Python
- express
- 스프링부트
- c#
- netlify
- 백엔드
- unity
- 프로그래밍
- 스프링
- 게임
- JSON
- jwt
- frontend
- IntelliJ
Archives
- Today
- Total
목록2024/12/17 (1)
Unwound Developer
Javascript - 다크모드/라이트모드
다크모드 / 라이트모드 구현 방법최근에는 사용자 기기의 다크/라이트 테마 설정 값을 따라 웹 테마도 자동으로 변경되는 경우가 많아요.예를 들어 유튜브도 시스템 설정에 따라 테마가 바뀌는 대표적인 예시입니다.1. CSS에서 테마 컨트롤하기prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 시스템 설정에 따라 다크 모드인지 라이트 모드인지 자동으로 판단할 수 있습니다. 이를 활용해 조건부 스타일을 적용할 수 있어요.코드 예시/* 라이트 모드 스타일 */body { background-color: white; color: black;}/* 다크 모드 스타일 */@media (prefers-color-scheme: dark) { body { background-color: black..
Web/React
2024. 12. 17. 22:35