Flowbite를 사용하여 Tailwind CSS 다크 모드 스위처 빌드

15990 단어 tailwindcssoptutorialwebdev
고지 사항: 이 자습서에서는 공식 Flowbite 설명서dark mode guide의 예제를 사용합니다.

귀하의 웹 사이트에 어두운 버전을 제공하는 것은 요즘 좋은 기능이라기보다는 기대되는 기능에 가깝습니다. 다행히 Tailwind CSS에는 어두운 모드 기능이 활성화되어 있으며 Flowbite의 구성 요소도 "class"옵션을 사용하여 이를 지원합니다.

JavaScript 및 구성 파일을 사용하여 dark version switcher for Tailwind CSS and Flowbite를 활성화하고 빌드하는 방법을 알아봅니다.

다크 모드를 수동으로 전환



Tailwind CSS 프로젝트 및 Flowbite 구성 요소에 어두운 모드를 활성화하려면 tailwind.config.js 파일 내에 다음 코드를 추가한 다음 dark 요소에 html 클래스를 추가하기만 하면 됩니다.

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}


또는 "미디어"옵션을 사용하여 브라우저의 색 구성표 기본 설정에 따라 어둡거나 밝은 테마를 자동으로 설정할 수도 있습니다.

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}


다크 모드 스위처



Tailwind CSS 및 Flowbite용 다크 모드 전환기를 만들려면 일부 JavaScript 코드와 사용자가 기본 설정을 변경하는 데 사용할 수 있는 토글 요소를 추가해야 합니다.
  • HTML의 <head> 태그에서 사용자 기본 설정을 확인하여 어두운 모드를 전환합니다.

    • <script>
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
</script>


    먼저 이전에 로컬 저장소를 사용하여 테마 색상 기본 설정을 수동으로 설정했는지 확인하고 폴백으로 브라우저 색 구성표 기본 설정에 따라 어둡거나 밝은 모드를 설정합니다.
  • 테마 색상을 수동으로 변경하기 위해 상호 작용할 수 있는 <button> 요소를 만듭니다.

    • <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
    <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
    <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>


    이 예에서는 현재 색 구성표를 기반으로 내부 아이콘을 변경하는 <button> 구성 요소를 사용했습니다.
  • 기본 파일 내에 다음 JavaScript를 추가하여 <button> 요소에서 클릭 이벤트를 처리합니다.

    • var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }

    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }

});


    이 스크립트는 이전 기본 설정을 기반으로 버튼 내부의 아이콘을 변경하고 로컬 저장소를 사용하여 어두운 모드 기본 설정을 지정하고 기본dark 태그에서 <html> 클래스를 추가하거나 제거하여 클릭 이벤트도 처리합니다.

    Flowbite - Tailwind CSS 구성 요소 라이브러리



    이 다크 모드 스위처는 Flowbite라는 Tailwind CSS로 구축된 더 큰 오픈 소스 구성 요소 라이브러리의 일부입니다.



    공식 Flowbite 문서를 확인하여 이에 대해 자세히 알아볼 수 있습니다Tailwind CSS component library.
    모래 조각 유닛에서 코드로sprite 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage