포트폴리오 만들기
다크모드 만들기
다크모드 스타일링
우선 다크모드를 수동으로 적용하기 위해서는 다크모드의 기본 모드가 미디어이기 때문에 selector로 변경해야 합니다.
<html lang="ko" class="dark">
...
...
<script>
tailwind.config = {
darkMode: 'selector',
};
</script>
</head>
<body class="dark:bg-gray-900 bg-white">-
class="dark"(html 태그에 추가)
Tailwind CSS에서 다크 모드를 활성화하기 위한 클래스입니다.
이 클래스를 통해 다크 모드가 활성화되었음을 설정하며, 스타일링 규칙에서 이를 감지해 다크 모드 전용 스타일이 적용됩니다. -
tailwind.config에서darkMode: 'selector'
다크 모드의 활성화를 특정 클래스(.dark)로 제어하도록 설정합니다.
기본 다크 모드 설정은 운영 체제의 다크 모드 여부를 따라가지만, 여기서는selector를 사용해 개발자가 다크 모드를 원하는 상황에서 직접 컨트롤할 수 있도록 만듭니다. -
dark:bg-gray-900 dark:text-white
다크 모드에서 배경색을bg-gray-900(어두운 회색)으로, 텍스트 색상을text-white(흰색)으로 설정합니다.
다크 모드 전용 스타일을 적용하여 어두운 테마에 적합한 시각적 디자인을 제공합니다. -
bg-white text-black
라이트 모드에서 배경색을 흰색(bg-white), 텍스트 색상을 검정색(text-black)으로 설정합니다.
기본 테마에서 밝은 환경에 적합한 스타일을 제공합니다. -
min-h-screen
요소의 최소 높이를 화면의 높이만큼 설정합니다.
콘텐츠가 적더라도 화면 전체를 차지하도록 만들어 레이아웃을 균형 있게 유지합니다. -
transition-colors duration-300
색상 변화(배경색, 텍스트 색상 등)를 부드럽게 전환하며, 전환 애니메이션의 지속 시간을 300밀리초로 설정합니다.
다크 모드와 라이트 모드 간의 전환이 자연스럽게 이루어지도록 만듭니다.
Header 부분
<!-- 로고 -->
...
<p class="text-sm text-gray-500 dark:text-gray-300">프론트 개발자</p>
...
<!-- 메뉴 & 다크모드 -->
...
<button class="p-2 w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500">
<i class="fas fa-moon text-gray-700 dark:text-yellow-400"></i>
</button>
...
<!-- 소개 -->
...
<p class="text-gray-600 dark:text-gray-400">
...Main
...
<!-- Introduce -->
<p class="text-gray-600 dark:text-gray-400">
...
<!-- About Section -->
<article class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-6 hover:scale-105 transition-transform duration-300"
>
...
<ul class="text-gray-800 dark:text-gray-300 leading-relaxed">
...
<!-- skills -->
...
<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-4 hover:scale-105 transition-transform duration-300">
...
<!-- 프로젝트트 -->
...
<article class="bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:scale-105 transition-transform duration-300">
...
-
dark:text-gray-300,dark:text-gray-400
다크 모드에서 텍스트 색상을 각각gray-300(밝은 회색)과gray-400(중간 밝기 회색)으로 설정합니다.
어두운 배경과 대비를 이루어 가독성을 높이기 위한 스타일입니다. -
dark:bg-gray-700,dark:bg-gray-800
다크 모드에서 배경색을 각각gray-700(중간 어두운 회색)과gray-800(짙은 회색)으로 설정합니다.
어두운 테마에 적합한 배경색으로, 눈에 부담을 덜 주는 디자인을 제공합니다. -
dark:text-yellow-400
다크 모드에서 텍스트나 아이콘 색상을yellow-400(밝은 노란색)으로 설정합니다.
대비를 제공하며, 주목을 끌기 위한 시각적 강조 효과를 줍니다. -
dark:bg-gray-800및dark:bg-gray-700(버튼과 카드 스타일링)
다크 모드에서 배경을 어두운 회색으로 설정하여 카드나 버튼이 어두운 테마와 조화를 이루도록 만듭니다.
라이트 모드에서는 밝은 배경, 다크 모드에서는 어두운 배경으로 스타일이 전환됩니다. -
dark:text-gray-300(목록 및 텍스트)
다크 모드에서 목록과 텍스트의 색상을 밝은 회색으로 설정하여 가독성을 유지합니다. -
dark:접두사를 사용한 모든 클래스
다크 모드 스타일을 다룰 때, HTML 태그의class="dark"설정에 반응하여 스타일이 적용됩니다.
이를 통해 라이트 모드와 다크 모드 간의 디자인을 유연하게 전환할 수 있습니다.
다크모드 기능구현
다크모드를 구현시키기 위해 JavaScript를 사용합니다.
script를 추가하여
먼저 다크모드 버튼에
id="darkModeToggle"를 추가합니다
<button
id="darkModeToggle"
class="p-2 w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500"
>
<i class="fas fa-moon text-gray-700 dark:text-yellow-400"></i>
</button><script>
function toggleDarkMode() {
const darkModeToggleIcon = document
.getElementById('darkModeToggle')
.querySelector('i');
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
// fas fa-moon text-gray-700 dark:text-yellow-400
darkModeToggleIcon.className = 'fas fa-moon text-gray-700';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
darkModeToggleIcon.className = 'fas fa-sun text-yellow-400';
}
}
document
.getElementById('darkModeToggle')
.addEventListener('click', toggleDarkMode);
</script>-
document.documentElement.classList.contains('dark')
현재 HTML 문서에dark클래스가 있는지 확인하여 다크 모드 활성화 여부를 판단합니다. -
document.documentElement.classList.add('dark')
다크 모드 활성화 시, HTML 문서의 루트 요소에dark클래스를 추가합니다.
이를 통해 다크 모드 스타일링이 적용됩니다. -
document.documentElement.classList.remove('dark')
다크 모드를 비활성화할 때, HTML 문서의 루트 요소에서dark클래스를 제거합니다.
이를 통해 라이트 모드 스타일링으로 전환됩니다. -
localStorage.theme = 'dark' / 'light'
사용자 선택을 로컬 스토리지에 저장하여 브라우저를 새로고침하거나 다시 방문해도 이전에 설정한 모드가 유지되도록 합니다. -
darkModeToggleIcon.className변경
다크 모드와 라이트 모드 간 전환 시 아이콘의 클래스 이름을 동적으로 변경합니다.- 다크 모드 활성화: 아이콘을 태양 모양(
fas fa-sun text-yellow-400)으로 변경하여 밝은 테마를 끌어올 수 있음을 표시합니다. - 라이트 모드 활성화: 아이콘을 달 모양(
fas fa-moon text-gray-700)으로 변경하여 어두운 테마를 끌어올 수 있음을 표시합니다.
- 다크 모드 활성화: 아이콘을 태양 모양(
-
addEventListener('click', toggleDarkMode)
버튼 클릭 시toggleDarkMode함수를 호출하여 다크 모드와 라이트 모드 간 전환을 실행합니다.
다크모드 theme
다크모드의 theme를 storage에 저장 후 default로 다시 뿌려줘서
새로고침 해도 기존의 상태가 유지되도록 해줍니다.
function initialTheme() {
const darkModeToggleIcon = document
.getElementById('darkModeToggle')
.querySelector('i');
if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark');
darkModeToggleIcon.className = 'fas fa-sun text-yellow-400';
} else {
document.documentElement.classList.remove('dark');
darkModeToggleIcon.className = 'fas fa-moon text-gray-700';
}
}
initialTheme();-
localStorage.theme === 'dark'
로컬 스토리지에 저장된 테마 값이'dark'인지 확인합니다.
사용자가 이전에 다크 모드를 활성화했는지 판단하여 초기 테마를 설정합니다. -
document.documentElement.classList.add('dark')
다크 모드가 활성화된 경우, HTML 문서의 루트 요소에dark클래스를 추가합니다.
이를 통해 다크 모드 스타일링이 적용됩니다. -
document.documentElement.classList.remove('dark')
다크 모드가 비활성화된 경우, HTML 문서의 루트 요소에서dark클래스를 제거합니다.
이를 통해 라이트 모드 스타일링으로 전환됩니다. -
darkModeToggleIcon.className변경
현재 테마에 따라 아이콘의 클래스를 동적으로 설정합니다.- 다크 모드(
'dark'): 태양 모양(fas fa-sun text-yellow-400) 아이콘을 설정하여 다크 모드 활성화를 나타냅니다. - 라이트 모드: 달 모양(
fas fa-moon text-gray-700) 아이콘을 설정하여 라이트 모드 활성화를 나타냅니다.
- 다크 모드(
-
initialTheme()
페이지 로드 시 호출되어 로컬 스토리지에 저장된 테마를 기준으로 초기 테마를 설정합니다.
이를 통해 사용자가 이전에 설정한 테마가 유지됩니다.
