Pyloid 공식문서
GithubLanguage
  • 💎Pyloid란 무엇인가?
  • 시작하기
    • 사전 요구사항
    • 프로젝트 생성하기
  • API
    • Python (백엔드)
      • Pyloid
      • BrowserWindow
      • PyloidAPI
      • Monitor
      • TrayEvent
      • 유틸리티 함수
    • Javascript (프론트엔드)
      • WindowAPI
      • EventAPI
  • 가이드
    • 커스텀 보일러플레이트 만들기
    • 웹뷰 로드하기
    • JS에서 Python 호출하기
    • Python에서 JS 호출하기
    • 키보드 단축키
    • 알림
    • 트레이
    • 타이머
    • 파일 감시
    • 클립보드
    • 창 위치
    • 개발자 도구
    • 창 사용자 정의
    • 자동 시작
    • 프로덕션 유틸리티
    • 데스크탑 모니터
    • 파일 다이어로그
    • 스플래시 스크린
    • 스레드
    • ⚡pyside를 사용하여 API 커스터마이징
    • 테마
    • 빌드 가이드
      • Pyloid-React-Vite
      • Pyloid-HTML-Boilerplate
Powered by GitBook
On this page
  • 시스템 테마 연동하기
  • 기본 설정
  • 동작 방식
  • 예제
  • 커스텀 테마 변수
  • 수동 테마 전환
  • 테마 변경 감지하기
  • 이벤트 리스너 등록
  • 활용 예시
  • 주의사항
  1. 가이드

테마

시스템 테마 연동하기

Pyloid는 사용자의 시스템 테마 설정을 자동으로 감지하여 적용할 수 있습니다. CSS 변수를 활용하여 라이트/다크 모드에 따른 스타일을 쉽게 관리할 수 있습니다.

기본 설정

/* 라이트 모드 테마 */
[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);
}

동작 방식

  1. data-pyloid-theme 속성은 시스템의 테마 설정에 따라 자동으로 'light' 또는 'dark' 값으로 설정됩니다.

  2. CSS 변수를 사용하여 각 테마별 스타일을 정의합니다.

  3. 컴포넌트에서는 정의된 CSS 변수를 참조하여 스타일이 적용됩니다.

예제

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

커스텀 테마 변수

자주 사용되는 테마 변수들:

[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;
}

수동 테마 전환

필요한 경우 JavaScript를 통해 수동으로 테마를 전환할 수 있습니다:

// 다크 모드로 전환
document.documentElement.setAttribute('data-pyloid-theme', 'dark');

// 라이트 모드로 전환
document.documentElement.setAttribute('data-pyloid-theme', 'light');

테마 변경 감지하기

Pyloid는 테마가 변경될 때 themeChange 커스텀 이벤트를 발생시킵니다. 이 이벤트를 활용하여 테마 변경 시 필요한 작업을 수행할 수 있습니다.

이벤트 리스너 등록

document.addEventListener('themeChange', (e) => {
    console.log('테마 변경됨:', e.detail.theme); // 'light' 또는 'dark'

    updateTheme(e.detail.theme);
});

활용 예시

  1. 테마별 이미지 변경:

function updateTheme(theme) {
    const logo = document.querySelector('.logo');
    if (theme === 'dark') {
        logo.src = '/images/logo-dark.png';
    } else {
        logo.src = '/images/logo-light.png';
    }
}
  1. API 호출 시 테마 정보 전달:

function updateTheme(theme) {
    // 사용자 설정 저장
    fetch('/api/user/preferences', {
        method: 'POST',
        body: JSON.stringify({ theme: theme }),
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

주의사항

  • themeChange 이벤트는 처음 시작 시와 시스템 테마가 변경될 때 발생합니다.

  • e.detail.theme에는 'light' 또는 'dark' 값이 포함됩니다.

이러한 이벤트 리스너를 활용하면 테마 변경에 따른 동적인 UI/UX 구현이 가능합니다.

Previouspyside를 사용하여 API 커스터마이징Next빌드 가이드

Last updated 6 months ago