개발자 매뉴얼 | 색상모드

색상 모드

다크 모드, 색약 모드, 고대비 모드는 "색상 모드"로 다음과 같은 공통점이 있습니다.

• 서버에게 /style/color로 POST 요청을 보냅니다.

• 서버에게 요청시 다음의 데이터를 보냅니다.

  • url
  • html_data : 해당 페이지의 html
  • style_change : 해당 모드 명

• 서버는 해당 모드에 맞는 스타일 시트를 삽입하고 html의 색상코드를 모두 변경합니다.

  • 스타일 시트 관리 : services/manageStyleSheet.js

    • makeStyle : 모드에 맞는 스타일 시트를 반환합니다.
    • addStyle : 스타일 시트를 반환할 html에 삽입합니다.
    • delStyle : 스타일을 적용하기 전, 이미 적용된 색상 모드 스타일 시트를 제거합니다.

  • html 요소별 색상 변경 : 각 모드의 getRenderedHtml

스타일 시트

사용자가 크롬 브라우저를 사용한다는 가정하에,

크롬에서 제공하고 있는 기본 스타일 시트를 해당 색상모드에 맞게 변경한 스타일 시트를 제공합니다.(makeStyle)

크롬 기본 스타일 시트

• strict_mode
  • true : 다크 모드, 고대비 모드
  • false : 색약 모드
• setting : 색상 모드 별 색상 설정 내용, json

각 색상 모드의 세부 내용

각 색상 모드의 세부 내용은 다음 링크에서 확인할 수 있습니다.

🛠 다크 모드

🛠 색약 모드

🛠 고대비 모드