티스토리 검색엔진 최적화

[ 동적 CSS 적용하기 ] 블로그에 동적으로 CSS 적용하는 방법 -다크모드.라이트 모드 버튼

by 일상허브 | 최초 발행일: 2024. 12. 14. |

블로그를 더욱 스마트하게 만드는 방법

다크모드 라이트 모드 버튼을 적용해서 블로그 동적 CSS 적용하기

동적 CSS를 적용하게 되면 블로그를 더욱 스마트하게 꾸밀 수 있습니다. 이 글에서는 JavaScript를 사용해 다크모드 라이트 모드 버튼을 적용해서 동적으로 CSS를 적용하는 방법과 실제로 블로그에 구현하는 과정을 상세히 소개하겠습니다.

JavaScript로 동적 CSS 적용하기

동적 CSS 적용의 필요성

블로그에 방문하는 방문자에 선택에 의해 현재의 사이트나 블로그를 동적 CSS를 활용하면 방문자가 자신의 취향에 맞는 테마를 선택할 수 있어 블로그의 체류 시간을 늘리고, 만족도를 높이는 데 효과적입니다.

다크 모드: 방문자가 다크 모드를 활성화하면 선택 변경.
반응형 스타일: 특정 화면 크기에서 다른 스타일 적용.
사용자 지정 테마: 사용자 선택에 따라 테마 색상 변경.

코드 적용방법

JavaScript를 사용하면 HTML 요소에 동적으로 CSS 클래스를 추가하거나 제거할 수 있습니다.

버튼 추가

방문자가 현재 테마를 전환할 수 있도록 버튼을 추가합니다. 아래 HTML 코드를 사용해 사이드바에 버튼을 적용합니다.

 <button id="toggle-theme" style="padding: 10px 20px; font-size: 16px; margin-top: 20px; cursor: pointer; background-color: white; color: black; border: 2px solid black; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: background-color 0.3s, color 0.3s;">
  테마 전환
</button>

HTML 배너 출력 적용방법

관리자 페이지에서 다음 과정을 따라 버튼을 추가합니다.

사이드바 설정 > 기본 모듈에서 HTML 배너 출력을 선택합니다.
위 HTML 코드를 복사하여 저장합니다.
HTML 배너 출력이 없을 경우, 플러그인에서 해당 모듈을 설치 후 진행합니다.

버튼 코드 추가

위에 코드를 그대로 복사해서 저장합니다.

스크립트 코드 추가

테마 전환 기능을 활성화하기 위해 JavaScript 코드를 추가합니다. 아래 스크립트를 블로그 스킨 편집의 HTML 최하단, /body 태그 바로 위에 삽입합니다..

  <script>
  function toggleTheme() {
    const htmlElement = document.documentElement;
    const currentTheme = htmlElement.getAttribute('data-phocus-theme');
    const themeStylesheet = document.getElementById('theme-stylesheet');
    const button = document.getElementById('toggle-theme');

    if (currentTheme === 'dark') {
      htmlElement.setAttribute('data-phocus-theme', 'light');
      themeStylesheet.href = 'https://tistory1.daumcdn.net/tistory/7199696/skin/images/light.css';
      button.textContent = '다크 모드';
    } else {
      htmlElement.setAttribute('data-phocus-theme', 'dark');
      themeStylesheet.href = 'https://tistory1.daumcdn.net/tistory/7199696/skin/images/dark.css';
      button.textContent = '라이트 모드';
    }

    localStorage.setItem('theme', htmlElement.getAttribute('data-phocus-theme'));
  }

  document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'light';
    const htmlElement = document.documentElement;
    const themeStylesheet = document.getElementById('theme-stylesheet');
    const button = document.getElementById('toggle-theme');

    htmlElement.setAttribute('data-phocus-theme', savedTheme);
    themeStylesheet.href = `https://tistory1.daumcdn.net/tistory/7494097/skin/images/${savedTheme}.css`;
    
    button.textContent = savedTheme === 'dark' ? '라이트 모드' : '다크 모드';
  });

  document.getElementById('toggle-theme').addEventListener('click', toggleTheme);
</script>

기본 스킨 설정

블로그 방문 시 기본적으로 적용되는 테마를 설정합니다. data-phocus-theme 속성을 활용해 초기 상태를 지정합니다..

<html lang="ko" data-phocus-theme="light">
<link id="theme-stylesheet" rel="stylesheet" href="/skin/images/light.css">  <!-- Default light theme -->

CSS 파일 다운로드

다음 두 CSS 파일을 다운로드하여 업로드한 후, 해당 경로를 위 스크립트와 HTML 코드에 반영합니다.

아래 파일은 티스토리 북클럽 기본 스킨을 다크 모드와 라이트 모드 변경한 코드입니다. 다른 스킨은 변경후 사용하시면 됩니다.

이 코드를 사용하여구현된 블로그 입니다. 방문자들은 다크 모드와 라이트 모드를 자유롭게 전환할 수 있습니다.

nanda

nandaarhat 님의 블로그 입니다.

nandaarhat.tistory.com

코드 정리기

코드 입력 삭제 코드 "> "> "> 지우기 변경 코드 "> "> ..

everydayhub.tistory.com

'티스토리 검색엔진 최적화' 카테고리의 다른 글

[ 티스토리 블로그 꾸미기 ] 자동으로 움직이는 이미지 갤러리 사용하기 (1)	2024.12.16
[ 티스토리 블로그 스킨 제작하기 ] 티스토리 블로그 북클럽 블랙 다크모드 스킨 공유 (1)	2024.12.13
[검색엔진 최적화] 아이프레임 요소에 제목이 없음 개선 사항 (0)	2024.12.09
[웹 콘텐츠 관리 쉽게하기] 자동화 HTML 코드 편집기 도구 정리 툴 소개 (1)	2024.12.08
[ 검색엔진 최적화 ] 특정 페이지만 색인 방지하는 코드 활용 방법과 중요성 (12)	2024.12.05
티스토리 블로그 단축키로 블로그 작성시 빠르고 효율적으로 작업하기 (0)	2024.12.04
[ 블로그 최적화 ] 사이트 디자인과 콘텐츠 요소의 효과적인 배분 (0)	2024.11.29