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

블로그에 다크모드,라이트 모드 CSS 적용
-다크모드. 라이트모드 스킨공유
- 블로그 테마 전환 버튼으로 스킨 변경하기

다크모드와 라이트 모드 스킨을 쉽게 블로그에 다크모드 버튼을 설정해서 블로그 방문자들에게 개인의 취향에 맞는 블로그 환경을 제공할 수 있습니다. 이제는 단순히 콘텐츠만 제공하는 시대를 넘어, 사용자 경험(UX)을 극대화하는 요소가 필수입니다. 그 중심에 있는 다크모드 버튼은 방문자의 취향에 따라 테마를 선택할 수 있도록 하고, 화면 밝기와 스타일을 자유롭게 전환할 수 있습니다.

이 글에서는 다크모드 버튼을 블로그에 추가하는 방법을 소개하고, 이를 통해 블로그 체류 시간을 늘리고 사용자 만족도를 높이는 블로그 테마 수정 방법을 설명합니다. JavaScript와 CSS를 활용하면 사용자가 쉽게 다크모드와 라이트 모드를 전환할 수 있습니다.

이 글에서는 JavaScript를 사용해 다크모드와 라이트 모드 버튼을 적용하여 동적으로 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 배너 출력이 없을 경우, 플러그인에서 해당 모듈을 설치 후 진행합니다.

다크모드 라이트 모드 버튼 적용을 위한 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

'SEO' 카테고리의 다른 글

[ 티스토리 블로그 꾸미기 ] SEO 최적화로 티스토리 블로그 글 목록 노출 개선하기 (1)	2024.12.20
[ 티스토리 블로그 꾸미기 ] 자동으로 움직이는 이미지 갤러리 사용하기 (1)	2024.12.16
[ 블로그 글 제목 작성법 ] 블로그 글 제목 수와 글 요약 글자수 제한 하기 (1)	2024.12.15
[ 티스토리 스킨 공유] 티스토리 블로그 북클럽 블랙 다크모드 스킨 공유 (1)	2024.12.13
[검색엔진 최적화] 아이프레임 요소에 제목이 없음 오류 개선 사항 (0)	2024.12.09
[웹 콘텐츠 관리 쉽게하기] 자동화 HTML 코드 편집기 도구 정리 툴 소개 (1)	2024.12.08
[ 검색엔진 최적화 ] 특정 페이지만 색인 방지하는 코드 활용 방법과 중요성 (9)	2024.12.05

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

블로그에 다크모드,라이트 모드 CSS 적용 -다크모드. 라이트모드 스킨공유- 블로그 테마 전환 버튼으로 스킨 변경하기

티스토리 블로그에 다크모드 라이크모드 스킨 버튼 추가하는 법

다크모드 라이트 스킨 변경 모드 버튼 코드 적용방법

적용된 샘플 블로그

'SEO' 카테고리의 다른 글

티스토리툴바

블로그에 다크모드,라이트 모드 CSS 적용
-다크모드. 라이트모드 스킨공유
- 블로그 테마 전환 버튼으로 스킨 변경하기