Pyloid는 사용자의 시스템 테마 설정을 자동으로 감지하여 적용할 수 있습니다. CSS 변수를 활용하여 라이트/다크 모드에 따른 스타일을 쉽게 관리할 수 있습니다.
Copy /* 라이트 모드 테마 */
[data-pyloid-theme='light'] {
--background-color: white;
--font-color: #333333;
}
/* 다크 모드 테마 */
[data-pyloid-theme='dark'] {
--background-color: #333333;
--font-color: white;
}
/* CSS 변수 적용 */
body {
background-color: var(--background-color);
color: var(--font-color);
}
Copy <!DOCTYPE html>
<html>
<head>
<style>
[data-pyloid-theme='light'] {
--background-color: white;
--font-color: #333333;
}
[data-pyloid-theme='dark'] {
--background-color: #333333;
--font-color: white;
}
body {
background-color: var(--background-color);
color: var(--font-color);
}
</style>
</head>
<body>
<div class="card">
<h1>다크모드 테스트</h1>
<p>
이 페이지는 시스템의 다크모드 설정에 따라 자동으로 테마가 변경됩니다.
</p>
</div>
</body>
</html>
Copy [data-pyloid-theme='light'] {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: white;
--surface-color: #f8f9fa;
--font-color: #333333;
--border-color: #dee2e6;
}
[data-pyloid-theme='dark'] {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--background-color: #333333;
--surface-color: #424242;
--font-color: white;
--border-color: #495057;
}
Copy // 다크 모드로 전환
document.documentElement.setAttribute('data-pyloid-theme', 'dark');
// 라이트 모드로 전환
document.documentElement.setAttribute('data-pyloid-theme', 'light');
Copy document.addEventListener('themeChange', (e) => {
console.log('테마 변경됨:', e.detail.theme); // 'light' 또는 'dark'
updateTheme(e.detail.theme);
});
Copy function updateTheme(theme) {
const logo = document.querySelector('.logo');
if (theme === 'dark') {
logo.src = '/images/logo-dark.png';
} else {
logo.src = '/images/logo-light.png';
}
}
Copy function updateTheme(theme) {
// 사용자 설정 저장
fetch('/api/user/preferences', {
method: 'POST',
body: JSON.stringify({ theme: theme }),
headers: {
'Content-Type': 'application/json'
}
});
} 이러한 이벤트 리스너를 활용하면 테마 변경에 따른 동적인 UI/UX 구현이 가능합니다.
