반응형
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 |
Tags
- 유니티
- express
- JSON
- Python
- IntelliJ
- 스프링
- springboot
- RiotAPI
- c#
- netlify
- 파이썬
- AWS
- 백엔드
- node.js
- bcrypt
- 코딩
- 깃
- oAuth
- 프로그래밍
- OAuth2.0
- unity
- MongoDB
- frontend
- jwt
- react
- 스프링부트
- spring
- 게임
- 게임개발
- 백준
Archives
- Today
- Total
목록Javascript (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