정보실

웹학교

정보실

css 대체 스타일 시트를 사용하여 웹 사이트 또는 앱에 어두운 모드(dark mode)를 추가하는 방법

본문

사이트에 다크 모드 추가 


다크 모드는 트위터, Instagram, WhatsApp 및 YouTube와 같은 많은 인기 있는 사이트와 앱에 의해 구현되었습니다. 그러나 자신의 사이트에 추가하는 방법은 무엇입니까?


https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html 


나는 항상 동적 사이트 색상 테마 스위처에 매료되었습니다. 집에서 느끼는 색상 테마를 선택할 수 있어 향상된 사용자 경험을 제공합니다!


예를 들어 다음은 디스플레이 설정에 있는 Twitter의 색상 옵션입니다.


Twitter's theme switcher 


비슷한 것을 만들어 봅시다. 아마도 트위터의 테마 체인저만큼 화려하지는 않지만 테마 정의가 포함 된 CSS 세트를 켜기 위해 대체 스타일 시트와 JavaScript를 사용하여 기술적 측면을 다룰 것입니다.


먼저 ... 여기에서 무엇을 만들려고 하는지 살펴 보겠습니다.


아래는 이 사이트의 테마를 전환하는 실제 예입니다.


이 전체 사이트의 CSS 테마를 즉시 전환하려면 단추를 클릭하십시오. 이 자습서의 나머지 부분에서는 자신의 사이트에 다크 모드 기능을 추가하는 방법을 보여줍니다!


이 어두운 모드 튜토리얼에서 대체 스타일 시트를 파악할 수 있으면 사용자 정의 웹 사이트, Wordpress (또는 유사한 사이트 작성 도구)에서 해당 스타일 시트를 복제 할 수 있습니다.


CSS가 인라인, 내부 및 외부 일 수 있다고 들었을 수 있습니다. 문서에 CSS가 포함되는 방식을 결정합니다. 그러나 대체 스타일 시트를 이해하려면 먼저 살펴보아야 합니다.


계단식 스타일 시트의 3 가지 유형 


그러나 CSS (Cascading Style Sheets)에 대한 다른 3 가지 사고 방식이 있습니다. 그들은 지속적이고 선호되며 대안입니다.


지속적은 항상 활성 스타일 시트와 함께 사용 가능하고 결합 된 CSS 스타일입니다. 영구 스타일 시트를 지정하려면 링크 태그에 rel = "stylesheet"속성을 추가하고 제목 속성을 건너 뛰십시오.


스타일 시트를 지정하는 일반적인 방법입니다.


<!-- Persistent Style Sheet -->

<link src = "style.css" rel = "stylesheet" />


기본 스타일 시트는 페이지 로드가 완료되었을 때 활성화되는 기본 스타일입니다. 그것을 만들려면 CSS 링크 태그에 title 속성을 추가하십시오.


<!-- Alternate Style Sheet (just add a title) -->

<link src = "dark.css"

      rel = "stylesheet"

    title = "dark" />


페이지를 다시 로드하지 않고도 대체 항목을 실시간으로 교체하여 테마를 변경할 수 있습니다.


<!-- Dark Mode Alternate Style Sheet -->

<link src = "dark.css"

    title = "dark" />

      rel = "alternate stylesheet" />

<!-- Light Mode Alternate Style Sheet -->

<link src = "light.css"

    title = "light"

      rel = "alternate stylesheet" />


대체 시트를 만들려면 링크 태그의 rel 속성을 "alternate stylesheet"로 설정하면 됩니다. 거의 다됐다.


이것은 첫 번째 단계입니다. 이제 스타일 시트를 전환하는 스크립트를 작성해야 합니다.


스타일 시트 간을 동적으로 전환 


연구를 할 때 인터넷에 떠 다니는 몇 가지 오래된 대체 스타일 시트 JavaScript 함수가 발견되었습니다. 

그러나 그들은 조금 구식이어서 내가 직접 썼습니다.


결론은 사용하려는 대체 스타일 시트 개체에서 속성 사용 안함을 false로 설정해야 한다는 것입니다.


<!-- Switch to a named alternate stylesheet -->

function setActiveStyleSheet(title) {

    let css = `link[rel="alternate stylesheet"]`;

    let stylesheets = document.querySelectorAll(css);

    stylesheets.forEach(sheet => sheet.disabled = true);

    let selector = `link[title="${title}"]`;

    let stylesheet = document.querySelector(selector);

    stylesheet.disabled = false;

}


새 스타일 시트로 동적으로 전환하려면 먼저 사용 가능한 모든 대체 스타일 시트를 비활성화 해야 합니다. 이를 수행하지 않으면 대체 스타일 시트가 작동하지 않는 것을 알 수 있습니다 (전환되지 않음).


따라서 이 기능의 첫 단계로 사용 가능한 모든 대체 스타일 시트를 비활성화 합니다. 완료되면 title 인수에 지정된 것을 활성화합니다.


<!-- Attach event to a button -->

    let DarkModeButton = document.getElementById("DarkModeButton");

    DarkModeButton.addEventListener("click",

        event => setActiveStyleSheet("darkmode"));


setActiveStyleSheet 함수를 켜는 데 사용되는 버튼에서 "click"이벤트에 대한 콜백으로 첨부 할 수 있습니다. 위의 예에서는 제목이 "darkmode"인 스타일 시트가 있다고 가정합니다.


또는 요소에서 onclick 속성을 직접 사용할 수 있습니다.


<div id = "DarkModeButton" onclick = "setActiveStyleSheet('darkmode')"></div>


CSS 스타일 시트를 동적으로 전환하는 것이 전부입니다. 그러나 한 가지 더 있습니다!


사용자가 대체 테마를 선택한 후 사이트를 떠나는 경우 사용자가 돌아와서 마지막으로 선택한 테마를 로드했는지 확인해야 합니다. 쿠키를 사용하여 수행 할 수 있지만 이 자습서에서는 HTML5 localStorage를 사용하여 수행합니다.


선택한 테마 암기 


localStorage를 사용하여 이전에 선택한 테마를 기억할 수 있습니다. 코드는 간단합니다. 테마를 선택할 때마다 제목 이름이 "theme"인 localStorage 항목에 저장됩니다. 이전 단계에서 이미 작성한 기능을 업데이트하겠습니다 :


<!-- Switch to a named alternate stylesheet -->

function setActiveStyleSheet(title) {

    let css = `link[rel="alternate stylesheet"]`;

    let stylesheets = document.querySelectorAll(css);

    stylesheets.forEach(sheet => sheet.disabled = true);

    let selector = `link[title="${title}"]`;

    let stylesheet = document.querySelector(selector);

    stylesheet.disabled = false;

    localStorage.setItem("theme", title);

}


새로운 localStorage 호출이 추가되었습니다. 이제 대체 스타일 시트를 켤 때마다 "테마"라는 키워드로 저장됩니다.


이제 사용자가 사이트를 떠나 다시 브라우저 탭을 닫은 후 다시 입력하면 localStorage에 저장된 기본 테마를 복원해야 합니다.


이를 위해 DOMContentLoaded 이벤트의 로컬 스토리지에서 읽고 (DOM이 완전히 로드 된 후 곧) 테마 항목에 저장된 값을 사용하여 스타일 시트를 선택하십시오.


<!-- Switch to a named alternate stylesheet -->

window.addEventListener('DOMContentLoaded', (event) => {

    console.log('DOM fully loaded and parsed');

    let title = localStorage.getItem("theme");

    setActiveStylesheet(title);

})


그게 다야! 이제 완전한 대체 CSS 테마 테마 선택기가 있습니다. 어려운 부분은 물론 꽤 CSS 레이아웃을 만드는 것입니다. 그러나 그것은 다른 튜토리얼까지 기다릴 수 있습니다!


페이지 정보

조회 11회 ]  작성일20-03-21 16:24

웹학교