Svelte로 간단한 다크 모드 토글 만들기

참고: 이 자습서는 Svelte에 중점을 두고 있지만 다른 UI 프레임워크에서도 작동하도록 할 수 있어야 합니다. 부담 없이 사용해 보세요!

라이트/다크 모드 토글이 지금 어디에나 있다는 것을 눈치채셨을 것입니다. 거의 every popular website 사용자가 선호하는 테마를 선택할 수 있습니다. 그렇다면 Svelte 앱에 테마 토글을 어떻게 추가합니까?

운 좋게도 매우 쉽습니다. 수행해야 할 작업은 다음과 같습니다.

1. 토글 구성 요소 추가



새 구성 요소DarkModeToggle.svelte를 만들고 그 안에 새 확인란을 추가합니다.

<input type="checkbox" on:click={toggleTheme} />


확인란은 widely supported이고 부울 상태를 나타내기 때문에 이와 같은 토글에 대해 꽤 좋은 선택입니다. 우리의 경우 false는 "light off"(= "dark")를 나타내고 true는 "on"을 나타냅니다.

앱에 새 구성 요소를 추가합니다.

2. 토글 테마



다음으로 toggleTheme 핸들러를 구현해야 합니다. 구성 요소에 script 태그를 추가합니다.

<script>
  const STORAGE_KEY = 'theme';
  const DARK_PREFERENCE = '(prefers-color-scheme: dark)';

  const THEMES = {
    DARK: 'dark',
    LIGHT: 'light',
  };

  const prefersDarkThemes = () => window.matchMedia(DARK_PREFERENCE).matches;

  const toggleTheme = () => {
    const stored = localStorage.getItem(STORAGE_KEY);

    if (stored) {
      // clear storage
      localStorage.removeItem(STORAGE_KEY);
    } else {
      // store opposite of preference
      localStorage.setItem(STORAGE_KEY, prefersDarkThemes() ? THEMES.LIGHT : THEMES.DARK);
    }

    // TODO: apply new theme
  };
</script>

...


보시다시피 여기에서 많은 일이 진행되고 있습니다.
  • localStorage를 사용하여 사용자의 테마 기본 설정을 저장합니다.
  • 미디어 쿼리를 사용하여 사용자의 OS에 테마 기본 설정이 설정되어 있는지 확인합니다.
  • 사용자가 일반적으로 어두운 테마를 선호하고 웹 사이트에서 어두운 테마를 선택하는 경우 기본 설정을 저장할 필요가 없습니다. 일반적으로 그리고 우리 사이트에서 어두운 테마를 사용하지 않는 사용자도 마찬가지입니다.
    다른 모든 경우에는 선호도를 localStorage 에 저장합니다.

  • 3. 테마 적용



    마지막으로 새 테마를 적용해야 합니다. 파일에 다른 함수를 추가하고 toggleTheme 끝에 호출합니다.

      const applyTheme = () => {
        const preferredTheme = prefersDarkThemes() ? THEMES.DARK : THEMES.LIGHT;
        currentTheme = localStorage.getItem(STORAGE_KEY) ?? preferredTheme;
    
        if (currentTheme === THEMES.DARK) {
          document.body.classList.remove(THEMES.LIGHT);
          document.body.classList.add(THEMES.DARK);
        } else {
          document.body.classList.remove(THEMES.DARK);
          document.body.classList.add(THEMES.LIGHT);
        }
      };
    
      const toggleTheme = () => {
        ...
    
        applyTheme();
      };
    


    지금까지 좋아 보인다! 그러나 우리는 여전히 일부 극단적인 경우를 처리하지 않습니다.
  • 사용자가 웹 사이트를 처음 방문할 때 초기 테마를 어떻게 적용합니까?
  • 사용자가 시스템 전체 테마 기본 설정을 변경하면 어떻게 됩니까?
  • onMount에서 두 상황을 모두 처리할 수 있습니다.

      import { onMount } from 'svelte';
    
      ...
    
      onMount(() => {
        applyTheme();
        window.matchMedia(DARK_PREFERENCE).addEventListener('change', applyTheme);
      });
    


    마지막으로 중요한 것은 상태가 테마와 일치하도록 확인란을 조정하는 것입니다.

      <input type="checkbox" checked={currentTheme !== THEMES.DARK} on:click={toggleTheme} />
    


    이제 남은 일은 다음과 같습니다.

    4. 사용자 정의 CSS 작성



    이제 다크 모드에 대한 사용자 정의 스타일을 작성할 수 있습니다.

    @media (prefers-color-scheme: dark) {
      body:not(.light) {
        /* Your stuff here... */
      }
    }
    
    body.dark {
      /* And also here... */
    }
    


    으아악 우리는 끝났어! 🎉

    완전히 작동하는 예제에 관심이 있다면 내 webapp Manicure ( source code )을 확인하십시오. 또한 토글 스타일을 지정하는 방법에 대한 아이디어를 제공할 수도 있습니다.

    좋은 웹페이지 즐겨찾기