홈페이지>웹사이트 구축 리소스>웹사이트 데이터
다운로드

어두운 모드 및 부트 스트랩에 대한 보조 안내서 5

V4 Dark Mode POC의 연속이지만 이번에는 V5의 경우

이것은 Dark Mode 및 Bootstrap 4 Body of Work에 대한 결정적인 가이드에 대한 후속 조치이며 Bootstrap 5 (Github Repo.) 와 관련이 있습니다.

Bootstrap 4에 대한 같은 작업을 받고 있다면 Vinorodrigues/Bootstrap-Dark Repo를 방문하십시오.

이 프로젝트의 상태에 대한 중요한 메모 :

Bootstrap 5의 핵심 저장소에서의 개발 노력은 v5.3에 도달했습니다. 여기에는 "색상 모드"가 포함되어 있으며 해당 다크 모드의 구현 내에 있습니다. 보다:

https://getbootstrap.com/docs/5.3/customize/color-modes/

따라서,이 프로젝트는 중복되고 은퇴하여 교육의 이익을 위해 코드와 저장소를 남겨두고 여기에 남겨 둡니다.

에 대한

Dark Mode 및 Bootstrap 4에 대한 결정적인 안내서를 먼저 읽지 않으면이 코드는 의미가 없습니다.

당신은 무엇을 얻습니까?

이 코드는 원래 작업 본문의 4 가지 방법 (및 변형 -6 ) 을 컴파일하지만 부트 스트랩 5를 위해 컴파일되어 있습니다. 이들은 다음과 같습니다.

방법 1

(원본 링크)

  • bootstrap-night : 이것은 단순히 어두운 부트 스트랩 테마입니다. 그러나 부트 스트랩 코어 CSS와 함께 사용하여 2 파일의 다크 모드 기능을 제공 할 수 있습니다.

방법 2

(원본 링크)

  • bootstrap-nightfall : 이것은 단순히 부트 스트랩 코어의 모든 구성 요소의 "색상 전용"CS이지만 어둡고 애드온으로 사용되도록 의도됩니다. 또한 간단한 미디어 쿼리를 사용하여 자동 다크 모드 스위칭을 구동 할 수도 있습니다.

방법 3

(원본 링크)

  • bootstrap-nightshade : 이것은 부트 스트랩 코어를 수정 한 것으로 모든 구성 요소에 어두운 색상 CSS를 추가하지만 html.dark 클래스 래퍼에 중첩되어 있습니다. 그 자체로는 Dark Mode Switching을 제공 할 수 없지만 포함 된 darkmode.js 라이브러리를 추가하면 "토글" 버튼 지원이 포함 된 Bootstrap의 대화식 Dark Mode Switching 변형이 있습니다.

  • bootstrap-blackbox :이 변형은 본질적으로 "Nightshade"변형과 동일하지만 HTML 태그 클래스를 사용하는 대신 HTML 태그 데이터 속성을 사용합니다. data-bs-color-scheme . 동일한 darkmode.js 라이브러리 가이 제품을 구동합니다. HTML 태그에 데이터 속성을 추가하기 만하면됩니다.

방법 4

(원본 링크)

  • bootstrap-dark : 이것은 권장되는 방법입니다. OS 또는 브라우저에서만 토글 할 수있는 밝은 테마와 어두운 테마를 가진 하나의 CSS는 prefers-color-scheme .

  • bootstrap-unlit :이 변형은 본질적으로 "Dark"변형과 동일하지만 "Dark"체계는 색 구성표에서 옵션과 같이 기본/폴백 및 "빛"입니다.

시작하세요

1. bootstrap-night 2. bootstrap-nightfall 3. bootstrap-nightshade 3B. bootstrap-blackbox 4. bootstrap-dark 4B. bootstrap-unlit
빠른 시작 가이드 빠른 시작 가이드 빠른 시작 가이드 빠른 시작 가이드 빠른 시작 가이드 빠른 시작 가이드
darkmode.js 참조 darkmode.js 참조
예를 참조하십시오 예를 참조하십시오 예를 참조하십시오

증거는 푸딩에 있습니다

테스트 페이지 중 일부는 vinorodrigues.github.io/bootstrap-dark-5에서 설정되었습니다.

이것을 사용할 수 있습니까?

예.

라이센스는 MIT입니다. 즉, 원래 저자에게 신용하고 저작권을 현장에서 남겨 두는 한, 당신이 휘젓는대로 사용하십시오.

테마 빌더이거나 자신의 프로젝트에서 원리를 사용하려면 GIT 및 노드를 설치해야합니다.

  1. 포크 또는 리포지토리 다운로드 : git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
  2. 노드 종속성 설치 : npm install (아래 참고 참조).
  3. scss 서브 폴더에서 _variables.scss 및 _variables-alt.scss 수정하십시오.
  4. npm run build 실행하여 테마를 구축하십시오.
  5. 컴파일 된 코드는 dist Folder에 있습니다.

빌드 시스템은 NPM 스크립트를 기반으로합니다. 대부분의 빌드 도구 (NPM 모듈) 는 스크립트를 명령 줄에서 실행할 수 있도록 "글로벌" 으로 설치해야합니다. 

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

Note 1:

이 코드는 "Dark Mode"기능을 추가하기위한 Bootstrap 5 핵심 코드의 재사용 일 뿐이며 "POC (Proof of Concept of Concept)" (POC) 로 선언됩니다. 즉, 생산 소스로 의도 된 것이 아니라 다양한 방법을 통해 다크 모드가 달성 할 수 있음을 증명하는 연습 일뿐입니다. 또한 저자 (Vino Rodrigues)가 그것을 지원하도록 강요받지 않았다는 것을 의미합니다.

Note 2:

이 프로젝트는 Node-Sass와 함께 컴파일 하지 않습니다 . 원래 Bootstrap 5 문서, 특히 여기 (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass)를 참조하면 Dart-Sass에 유리하게 Node-sass의 사용을 사용하지 않았다는 점에 유의하십시오.

그들은 이것 (https://sass-lang.com/blog/libsass-is-deprecated) 기사를 인용하여 Sass 큐레이터는 더 이상 libsass를 지원하지 않을 것이며, 노드 사스는 의존적이라고 말합니다.

NPM

개발자는 scss 및 dist 폴더를 자신의 프로젝트에 포함시킬 수 있습니다.

npm install bootstrap-dark-5

cdn

jsdelivr.com을 사용하여 CDN을 통해 테마를 핫 링크 할 수도 있습니다.

GitHub 릴리스에서 테마 CSS 파일에 액세스 할 수 있습니다.

  • bootstrap-dark @Media perfers-color-scheme 변형

    • 생산 / 미니딩 변형 :
    • 개발 / 디버그 변형 :
    • 또한 빠른 시작 가이드를 읽으십시오.

  • bootstrap-nightshade html.dark CSS 클래스 + JS 라이브러리 변형

    • 생산 / 미니딩 변형 :
    • 개발 / 디버그 변형 :
    • 또한 빠른 시작 가이드와 darkmode.js 참조를 읽으십시오.

  • bootstrap-night - 그 어두운 테마 만 변형

    • 생산 / 미니딩 변형 :
    • 개발 / 디버그 변형 :
    • 또한 빠른 시작 가이드를 읽으십시오.

  • 소스 등이 여기에 있지만 Github를 사용하는 것이 좋습니다.

추가 독서

다크 모드를 위해 글을 쓰고 자하는 모든 개발자에 대해 읽어야합니다 .

  • ... 분명히, 원래 콘텐츠 : Dark Mode 및 Bootstrap에 대한 결정적인 안내서 4

  • Web.dev, Thomas Steiner (@tomayac), 2019 년 6 월 27 일 (2020 년 6 월 9 일 업데이트) , "Color-Scheme : Hello Darkness, 나의 오랜 친구"

  • Web.dev, Thomas Steiner (@tomayac), 2020 년 4 월 8 일 (2020 년 6 월 16 일 업데이트) , "Color-Scheme CSS 속성 및 해당 메타 태그를 통한 개선 된 Dark Mode 기본 스타일"

  • CSS-Tricks, Adhuham, 2020 년 9 월 9 일 "웹에서 어두운 모드에 대한 완전한 안내서"

  • 내 ".. Definitive Guide .."Piece의 이미지 및 기타 고려 사항에 대한 내 비트.

피드백

유용한 피드백이 있으면 GitHub 문제 페이지에 "문제"를 표시하십시오.

© 2022

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체