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

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

다크모드. 라이트모드 스킨 공유

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

JavaScript를 사용해 다크모드와 라이트 모드 버튼을 적용하여 동적으로 CSS를 적용해 테마를 변경하는 방법과 실제로 블로그에 구현하는 과정과 코드를 공유합니다.

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

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

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

1. 다크 테마 전환 버튼 코드 적용

방문자가 블로그를 자신의 취향에 따라 테마를 변경할 수 있도록 해주는 것이 바로 전환 버튼입니다. 아래는 블로그에 적용할 수 있는 코드입니다. 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 배너 출력 을 선택

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

2. 버튼 스크립트 코드 추가

테마 전환 기능을 활성화하기 위해 JavaScript 코드를 추가합니다.

 <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>

스크립트를 블로그 스킨 편집- HTML - /body 태그 바로 위에 삽입합니다.

3. 기본 스킨 설정

블로그 방문 시 기본적으로 적용되는 테마를 설정합니다. 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 파일을 업로드하여 theme-stylesheet.href 경로에 맞게 설정합니다:

light.css: 밝은 테마
dark.css: 어두운 테마

코드는 HTML 헤드 부분에 추가해주면 됩니다.

4. 스킨 CSS 파일 다운로드

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

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

다크모드 CSS 파일을 다운로드하여 업로드 — CSS 파일을 다운로드하여 업로드 합니다

적용된 샘플 블로그

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

샘플 블로그 보기

블로그에 다크모드와 라이트모드 전환 기능을 추가하는 것은 단순한 디자인 변화가 아닙니다. 방문자의 니즈를 반영하고,디자인을 개성적으로 개선하며, SEO 성과에도 긍정적인 영향을 줄 수 있는 전략적인 선택입니다.

지금 바로 블로그에 적용해 보세요! 방문자에게 선택권을 주는 것만으로도, 블로그의 품질은 한 단계 더 높아질 수 있습니다.

'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
[ 검색엔진 최적화 ] 특정 페이지만 색인 방지하는 코드 활용 방법과 중요성 (8)	2024.12.05

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

다크모드. 라이트모드 스킨 공유

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

1. 다크 테마 전환 버튼 코드 적용

2. 버튼 스크립트 코드 추가

3. 기본 스킨 설정

4. 스킨 CSS 파일 다운로드

적용된 샘플 블로그

'SEO' 카테고리의 다른 글

티스토리툴바