bootstrap 다크모드설정
<!-- html태그의 data-bs-theme 를 사용한다 -->
<html lang="en" data-bs-theme="dark"><!-- 모드 변경용 btn 만들기 -->
<button class="mode-change-btn" onclick="darkMode()">다크모드설정</button>function darkMode(){
// 현재 모드를 가져옴
let mode = $('html').attr("data-bs-theme");
// 현재 모드와 반대되는 모드로 설정
if( mode == 'dark' ){
$('html').attr("data-bs-theme", "light");
$('.mode-change-btn').html('다크모드');
}else{
$('html').attr("data-bs-theme", "dark");
$('.mode-change-btn').html('라이트모드');
}
}1. attr()
attr()은 요소의 속성값을 가져오거나 속성을 추가한다.
- 예시 html
<div class="box" id="title"></div>- 속성 값 가져오기
// 클래스명이 box인 요소의 id 속성의 값을 가져옴
$('.box').attr('id'); // title- 속성 추가 하기
// 클래스명이 box인 요소에 name속성을 추가하고 그 값은 test로 함
$('.box').attr('name', 'test');
- 속성 값 변경하기
// 클래스명이 box인 요소에 원래있던 id 속성의 값을 test로 변경
$('.box').attr('id', 'test');- 속성 삭제하기는 removeAttr() 사용
// 클래스명이 box인 요소의 id 속성을 삭제
$('.box').removeAttr('id');2. 모드 추가 / 스타일 변경
부트스트랩 컬러참고
스타일 변경 시 참고
(v 5.3.1) 코드 원문 참고
/* 원본 경로 : site/assets/scss/_content.scss */
/* 컬러모드 스타일 수정,삭제,추가 하면 됨 */
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700};
}
.btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}
프론트 개발자