부트스트랩 다크모드 질문 드려요
본문
부트스트랩 다크모드 사용시
글자색, 배경, 테이블선을 커스텀으로 진행 할수있나요?
간단한 예제 부탁드립니다.
다크모드로 하니까, 색상변경을 할게 생기네요.
윈도우 os는 다크모드인지 아닌지 구분할수있던데
부트스트랩은 어떻게 하나요?
https://getbootstrap.com/docs/5.3/customize/color-modes/#variables
- 다크모드 일때, 간단한 글자, 글자배경, 선색 몇개만 변경하면 되는데
어렵게 설명해 놓아서 이해 할수가 없어요.
https://getbootstrap.com/docs/5.3/customize/css-variables/
여기 다크모드 설정을 css파일에 그냥 붙여서 변경하는건지, css는 아주 기본만 알고 있습니다.
이거를 css파일에 붙여서 몇가지 변경해 보니 안되는것 같은데, 부트스트랩 사용한지 2일 입니다.
css는 정말 기본만 사용하는 편입니다.
글자 배경 및 기타 선같은것은 부트스트랩 사용을 하지 않았습니다.
단지 테이블, 버튼, navbar 만 사용하는데
다크모드일때 글자색등 변경을 하고 싶은데 자바스크립트로 해야하는건지
이걸 어떻게 구분만 하면 되는데 구글검색해도 안나오네요.
아래는 다크모드 클릭 버튼입니다.
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (dark)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
답변 1
https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode
data-bs-theme 라는 속성으로 다크모드 적용 여부를 선택할 수 있는것 같습니다.
<html lang="en" data-bs-theme="dark">
이부분 속성을 조정해주면 될것 같구요 html 태그가 아니라 네비게이션 바에만 적용도 가능한것 같습니다.
웹 브라우저의 다크모드 여부는 prefers-color-scheme를 키워드로 조금 구글링 해보시고 다시 질문 주시면 될것 같습니다.
