darkreader CONTRIBUTING.md 한국어 해석

배코딩·2024년 10월 11일
0

note

목록 보기
145/149

기여하기

Dark Reader 프로젝트에 기여하고 도움을 줄 수 있는 다양한 방법이 있습니다. 아래에서 더 자세히 알아보세요. 미리 감사드립니다.

후원하기

Dark Reader의 개발을 후원하세요.

번역

번역을 개선하거나 제안할 수 있습니다. 지원 가능한 언어 코드 목록을 참조하세요.

사이트에서 Dark Reader 비활성화

웹사이트 페이지는 Dark Reader가 자체적으로 비활성화되도록 요청할 수 있습니다. 이를 위해 "Dark Reader 잠금"을 포함합니다. 이 "잠금"은 name 속성이 darkreader-lock으로 설정된 <meta> 태그이며, 문서의 <head> 태그 안에 자식 요소로 포함됩니다.

Dark Reader를 정적으로 비활성화

다음과 같이 HTML 문서의 <head> 태그 내에 <meta name="darkreader-lock">을 추가하세요:

html
코드 복사
<head>
    <meta name="darkreader-lock">
</head>

Dark Reader를 동적으로 비활성화

다음과 같이 "잠금"을 동적으로 추가하세요(브라우저가 이미 문서를 충분히 파싱하여 head 속성을 생성했다고 가정):

const lock = document.createElement('meta');
lock.name = 'darkreader-lock';
document.head.appendChild(lock);

이미 다크 모드인 웹사이트 추가

다음 조건을 만족하는 경우 웹사이트가 이미 다크 모드인 것으로 간주됩니다:

  • 모든 하위 페이지를 포함한 전체 웹사이트가 시스템의 선호 색상 설정과 관계없이 기본적으로 다크 모드입니다.
  • URL이 실제 웹사이트 주소여야 하며, 어떤 종류의 리디렉션도 허용되지 않습니다.
  • 웹사이트가 완전히 완료된 상태여야 하며, 디자인 또는 개발 중이거나 다른 미완성 상태(예: "곧 공개", "공사 중", "이동함" 등의 표시 페이지)가 아닙니다.

이러한 조건을 만족하면 dark-sites.config 파일에 웹사이트를 추가할 수 있습니다.

  • 알파벳 순서를 유지하며 웹사이트를 나열해주세요.

잘못된 반전 수정

웹페이지의 요소가 잘못 반전되었거나 스타일이 잘못된 경우, 적절한 CSS 선택자를 지정하여 이를 수정할 수 있습니다. Dynamic Theme 모드에서는 dynamic-theme-fixes.config 파일을, Filter 및 Filter+ 모드에서는 inversion-fixes.config 파일을 사용하세요.

  • 웹사이트를 알파벳 순서대로 나열하고, 짧은 선택자를 사용하며, 해당 파일의 코드 스타일을 유지해주세요.

Dev Tools 사용 방법

Dev Tools는 웹 페이지에서 사소한 문제를 수정하는 데 도움을 줍니다. 이러한 문제에는 어두운 배경 위에 어두운 아이콘이 있거나, 밝은 배경을 제거하거나, 투명한 이미지에 흰색 배경을 추가하는 등의 작업이 포함될 수 있습니다.

Dynamic 모드

페이지가 부분적으로 어둡고 밝게 보일 경우, 이는 버그로 간주됩니다.

Filter 모드

페이지에서 이미 어두운 요소들을 반전시키는 것이 일반적인 관행입니다.

Dev Tools 사용 절차

  1. Chrome Dev Tools 열기

    Chrome에서 Dev Tools를 열려면 F12 키를 누릅니다. Firefox에서는 "Inspector"를 여려면 Ctrl + Shift + C를 누릅니다.

  2. 요소 선택기 클릭

    Chrome에서는 요소 선택기를 클릭합니다 (왼쪽 상단 아이콘). Firefox에서는 자동으로 활성화됩니다.

  3. 잘못 반전된 요소 선택

    잘못 반전된 요소를 선택합니다.

  4. 해당 요소의 선택자 결정

    그 요소 또는 유사한 모든 요소에 대한 선택자를 선택합니다. 예를 들어, 요소에 class="icon small"이 있는 경우 선택자는 .icon일 수 있습니다.

  5. Dark Reader 아이콘 클릭

    Dark Reader 아이콘을 클릭합니다.

  6. 개발자 도구 열기

    Dark Reader 팝업 하단에서 "Open developer tools"를 클릭합니다.

  7. 블록 편집 또는 추가

    URL 및 반전할 선택자가 포함된 블록을 편집하거나 추가합니다.

  8. 적용 클릭

    변경 사항을 적용합니다.

  9. 모드 확인

    Light 모드와 Dark 모드에서 어떻게 보이는지 확인합니다.

  10. 동적 테마 수정 파일 또는 반전 수정 파일 열기

    수정한 내용이 제대로 작동하면 dynamic-theme-fixes.config 파일 또는 inversion-fixes.config 파일을 엽니다.

  11. GitHub에서 수정 사항 추가

    Edit을 클릭합니다 (먼저 GitHub에 로그인해야 합니다).

  12. 수정 사항 입력

    해당 파일에 수정 사항을 입력합니다. URL별로 알파벳 순서를 유지합니다.

  13. 수정 작업 설명 추가

    수행한 작업에 대한 간단한 설명을 추가합니다.

  14. 파일 변경 제안 클릭

    Propose file change를 클릭합니다.

  15. 변경 사항 검토 및 풀 리퀘스트 생성

    변경 사항을 검토한 후 Create pull request를 클릭합니다.

  16. GitHub Actions 테스트 확인

    GitHub Actions는 올바른 코드 스타일인지 확인하기 위해 테스트를 실행합니다.

  17. 오류 수정

    빨간 십자가가 보이면 Details를 클릭하여 문제가 무엇인지 확인하고 기존 Pull Request를 수정합니다.

  18. 테스트 통과 확인

    초록색 체크 표시가 보이면 모든 것이 정상입니다.

  19. 개발자 검토 및 머지

    Dark Reader 개발자가 변경 사항을 검토하고 병합하여 이를 사용할 수 있게 합니다.

dynamic-theme-fixes.config
================================

example.com

INVERT
.icon

CSS
.wrong-element-colors {
    background-color: ${white} !important;
    color: ${black} !important;
}

IGNORE INLINE STYLE
.color-picker

IGNORE IMAGE ANALYSIS
.logo
규칙설명비고 / 예시
INVERT지정한 요소를 반전합니다.Dynamic Mode: 어두운 이미지가 어두운 배경에서 보이지 않을 때만 INVERT를 사용합니다.
CSS웹페이지에 사용자 지정 CSS를 추가합니다.!important 키워드는 다른 스타일 시트의 재정의를 방지하기 위해 각 CSS 속성에 지정해야 합니다. Dynamic mode는 ${COLOR} 템플릿을 지원합니다. 예: ${white}는 다크 모드에서 ${black}으로 변환됩니다.
IGNORE INLINE STYLE매칭된 요소의 인라인 스타일 분석을 방지합니다.예: <p style="color: red"> 요소의 스타일 속성은 변경되지 않습니다.
IGNORE IMAGE ANALYSIS매칭된 선택자에 대해 배경 이미지 분석을 방지합니다.

새로운 색상 스키마 추가하기

Dark Reader에 인기 있거나 독특하지만 유용한 사전 정의된 색상 스키마를 추가하려면, src/config/color-schemes.drconf 파일에 추가할 수 있습니다. 아래의 단계를 따라 새로운 색상 스키마를 추가하세요:

  1. color-schemes.drconf 파일 열기

    해당 파일을 엽니다.

  2. 수정 사항 입력하기 (GitHub 로그인 필요)

    파일의 Edit 버튼을 클릭하여 수정 사항을 입력합니다. 색상 스키마 이름에 따라 알파벳 순서를 유지합니다.

  3. 간단한 설명 추가

    추가한 내용에 대한 간단한 설명을 제공합니다.

  4. 파일 변경 제안

    Propose file change 버튼을 클릭합니다.

  5. 변경 사항 검토

    변경 사항을 검토한 후 Create pull request를 클릭합니다.

  6. GitHub Actions 테스트 확인

    GitHub Actions가 올바른 코드 스타일인지 확인하기 위해 테스트를 실행합니다.

  7. 오류 수정

    만약 빨간 십자가가 보이면 Details를 클릭하여 무엇이 잘못되었는지 확인하고, 기존 Pull Request를 수정합니다.

  8. 테스트 통과 확인

    초록색 체크 표시가 나타나면 모든 것이 정상입니다.

  9. 개발자 검토 및 병합

    Dark Reader 개발자가 변경 사항을 검토하고, 병합하여 사용 가능하게 만듭니다.

동적 변수 사용

배경색이나 텍스트 색상을 수정할 때, #fff, #000, black, white와 같은 하드코딩된 색상 대신 사용자의 설정에 따라 생성된 CSS 변수를 사용해야 합니다.

CSS
코드 복사
dynamic-theme-fixes.config
================================
example.com

CSS
.logo {
    background-color: var(--darkreader-neutral-background) !important;
}
.footer > p {
    color: var(--darkreader-neutral-text) !important;
}

사용 가능한 CSS 변수 목록:

변수설명사용 용도
--darkreader-neutral-background사용자의 설정에 맞는 중립적인 배경색주로 배경색이 잘못된 요소에 사용됨
--darkreader-neutral-text사용자의 설정에 맞는 중립적인 텍스트 색상잘못된 텍스트 색상이 적용된 요소에 사용됨
--darkreader-selection-background사용자가 정의한 배경색 설정사용자의 배경색 설정
--darkreader-selection-text사용자가 정의한 텍스트 색상 설정사용자의 텍스트 색상 설정

이 변수를 사용하면 사용자의 테마 설정에 맞게 요소의 색상이 동적으로 조정됩니다.

필터 및 필터+ 모드 수정

CSS
코드 복사
inversion-fixes.config
================================

example.com

INVERT
.icon
.button
#player

NO INVERT
#player *

REMOVE BG
.bg-photo

CSS
.overlay {
    background: rgba(255, 255, 255, 0.5);
}
  • Filter와 Filter+ 모드는 웹 페이지 전체를 반전시킨 후, INVERT 섹션에 나열된 필요한 요소들(이미지, 비디오 등)의 반전을 되돌리는 방식으로 작동합니다.
  • 만약 반전된 요소가 이미지나 다른 콘텐츠를 포함하고 있고, 이로 인해 잘못된 표시가 된다면, NO INVERT 규칙을 사용하여 반전을 방지할 수 있습니다.
  • REMOVE BG는 요소의 배경 이미지를 제거하고 강제로 검은색 배경을 적용합니다.

새로운 기능 추가 또는 버그 수정

Dark Reader에 새로운 기능을 추가하거나 버그를 수정하고 싶다면, GitHub에 이슈를 제출하세요(기존의 이슈가 없는 경우). 활발한 기여자들과 논의한 후 승인을 기다립니다.

확장을 빌드하고 디버그하려면 Node.js LTS 버전을 설치하세요. 프로젝트 루트 폴더에서 npm install을 실행하여 개발 종속성을 설치합니다. 그런 다음 npm run debug를 실행하세요.

Chrome 및 Edge

  1. chrome://extensions 페이지를 엽니다.
  2. 공식 Dark Reader 버전을 비활성화합니다.
  3. 개발자 모드를 활성화합니다.
  4. "Unpacked extension 로드" 버튼을 클릭합니다.
  5. 프로젝트의 build/debug/chrome 폴더로 이동합니다.

Firefox

  1. about:addons 페이지를 엽니다.
  2. 공식 Dark Reader 버전을 비활성화합니다.
  3. about:debugging#addons 페이지를 엽니다.
  4. "임시 추가 기능 로드" 버튼을 클릭합니다.
  5. build/debug/firefox/manifest.json 파일을 엽니다.

npm run debug:watch를 실행하면 코드 변경 후 자동으로 다시 컴파일됩니다.

팁

코드를 편집하기 위해 Visual Studio Code나 WebStorm과 같은 텍스트 편집기나 웹 IDE를 사용할 수 있습니다.

코드 스타일(예: 공백 등)을 유지해 주세요. 이는 npm run code-style을 실행하면 자동으로 가능합니다.

테스트를 실행하려면 npm test를 실행하여 통과하는지 확인하세요.

코드가 검토 및 병합 준비가 되면, 풀 리퀘스트를 제출하고 검토를 기다리세요.

profile
배코딩
PS, 풀스택, 앱 개발, 각종 프로젝트 내용 정리 (https://github.com/minsu-cnu)
이전 포스트

darkreader README.md 한국어 해석

다음 포스트

darkreader CODE_OF_CONDUCT.md 한국어 해석

0개의 댓글