Bootstrap 테마 동적 변경 toggleswatch

1 개요

Bootstrap 테마 동적 변경 toggleswatch

• Bootstrap 테마 동적 변경 (link href)의 방법으로도 되기는 하는데, 매우 복잡한 페이지의 경우 교체 중에 깜빡임 현상이 있다.
• 기존 스타일이 제거되고 신규 스타일을 적용하는 동안, 일시적으로 스타일이 비는 상태가 되기 떄문이다.
• 이러한 문제점을 해결하기 위해, html 태그에 .d 클래스를 추가/제거하는 방식으로 토글할 수 있게 한 toggleswatch를 만들어 보았다.

<link rel='stylesheet' href='https://unpkg.com/toggleswatch@4.5.2-2/dist/bootstrap.min.css' />
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand">Hello</a>
  </div>
</nav>
<main>
  <section class="jumbotron text-center">
    <div class="container">
      <h1>ToggleSwatch</h1>
      <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>
        <button type="button" class="btn-theme-light btn btn-primary">light</button>
        <button type="button" class="btn-theme-dark btn btn-primary">dark</button>
      </p>
    </div>
  </section>
</main>

<script src='//unpkg.com/jquery'></script>
<script src='//unpkg.com/bootstrap/dist/js/bootstrap.min.js'></script>
<script>
$('.btn-theme-light').click(function() {
  $('html').removeClass('d')
});
$('.btn-theme-dark').click(function() {
  $('html').addClass('d')
});
</script>

2 같이 보기

• Bootstrap 테마 동적 변경 (link href)

3 참고

• https://github.com/jmnote/toggleswatch