1. 개요

이번주에 프로그래머스 데브코스에서 Vanilla Javascript를 이용해 TodoList를 만드는 과제를 진행했다.

나는 다크모드 만들기를 추가 목표로 세웠다.
어떤 컨셉으로 구현할지 소스를 찾아 다니다가

쿠로미와 마이멜로디를 이용해 다크모드를 구현하기로 했다

2. 로직

CSS Variable 이용

div#app 태그의 'dark' 클래스 존재 여부에 따라 css변수 값이 결정되며 다크 모드가 반영된다

App이 처음 실행될 때

App이 실행되면 localStorage와 사용자 세팅을 확인한다

• localStorage에 theme가 저장되어 있으면 theme에 따라 모드 초기화
• localStorage에 theme가 저장되어 있지 않다면 사용자 세팅에 맞춰서 모드 초기화

사용자가 theme 변경 버튼을 눌렀을 때

1. App 내부에서 저장하고 있는 theme 상태를 변경한다
2. App의 타겟인 div태그에 theme 업데이트를 반영한다

   • 다크모드라면 div에 dark 클래스 추가
   • 그렇지 않다면 div에서 dark 클래스 제거

3. 로컬스토리지에 변경된 사항을 저장한다.

3. 구현

1. CSS 세팅

사용할 색깔들 변수로 선언

:root {
  --main-black: #333235;
  --main-white: #efeef1;
  --main-pupple: #9c93d1;
  --main-pink: #f2a6be;
  --main-background: var(--main-white);
  --main-text-color: var(--main-pink);
  --main-delete-color: var(--main-pupple);
}

우선 최상단 루트에 사용할 색깔들을 CSS변수를 이용해 정의했다.

그리고 이를 이용해 라이트 모드일때 배경색, 텍스트, 그리고 삭제 버튼의 색을 정의했다.

• 라이트모드는 마이멜로디를 상징한다
• 삭제버튼의 색깔은 쿠로미를 상징한다

다크모드일때 변수 값 변경

#app.dark {
  --main-background: var(--main-black);
  --main-text-color: var(--main-pupple);
  --main-delete-color: var(--main-pink);
}

다크 모드일때 배경색, 텍스트, 삭제 버튼의 변수 값을 변경한다.

• 다크모드는 쿠로미를 상징한다
• 삭제버튼의 색깔은 마이멜로디를 상징한다

웹 아이콘 준비

네가지 아이콘을 준비했다

• 토글버튼을 위한 해와 달 아이콘
• 쿠로미를 상징하는 고양이 아이콘
• 마이멜로디를 상징하는 토끼 아이콘

위의 세가지는 fontawesome에서 가져왔고 토끼 아이콘만 material icons에서 가져왔다.

토끼 아이콘을 찾는게 정말 힘들었다... 거의 세시간동안 찾았다.

웹 아이콘을 사용하려면 HTML head에 다음 코드를 추가해야한다

<!--fontawesome, material icons-->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet" />
    <script src=[YOUR_KIT] crossorigin="anonymous"></script>

<!--내가 작성한 css-->
<link rel="stylesheet" href="style.css" />

❗위의 코드를 임포트할때 style.css아래에 작성해야 나중에 material-icon을 수정할때 편리하다.

순서를 반대로하면 구글에서 제공한 material-icons 클래스가 style.css에서 정의한 material-icons 클래스 스타일을 덮어씌워 무시한다. 이를 해결하기 위해서는 style.css에서 더 자세하게 선택자를 표기하는 방법도 있다. 사실 난 이렇게 했다

.title .material-icons {
  font-size: 5rem;
}

CSS에 material icons를 위한 세팅을 추가한다

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

세팅을 마치면 원하는 곳에서 웹 아이콘 사용가능!

<!--해, 달-->
<i class="fa-solid fa-moon"></i>
<i class="fa-solid fa-sun"></i>

<!--고양이, 토끼-->
<i class="fa-solid fa-cat"></i>
<span class="material-icons">
  cruelty_free</span>`;

2. 다크모드 기능 구현

App.js

...
import store from './store/store.js';
export default class App extends Component{
  ...
  setup() {
	...
    const DarkTheme =
      store.theme === 'dark' ||
      (!store.theme &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);

    this.setState({ todos: initialTodoList, theme: DarkTheme });
    this.updateDarkMode(DarkTheme);
  }

	...
  
  mounted() {
    const { todos, theme } = this.state;

    const $header = this.$target.querySelector(HEADER_SELECTOR);
    new Header({
      $target: $header,
      props: {
        addItem: this.addItem.bind(this),
        darkMode: theme,
        toggleDarkMode: this.toggleDarkMode.bind(this),
      },
    });

    ...
  }
  
  toggleDarkMode() {
  const { theme } = this.state;
    this.setState({ ...this.state, theme: !theme });
    this.updateDarkMode(!theme);
  }

  updateDarkMode(darkMode) {
    if (darkMode) {
      this.$target.classList.add('dark');
      store.theme = 'dark';
    } else {
      this.$target.classList.remove('dark');
      store.theme = 'light';
    }
  }
}

위에서부터 설명하자면

setup() {
	...
    const DarkTheme =
      store.theme === 'dark' ||
      (!store.theme &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);

    this.setState({ todos: initialTodoList, theme: DarkTheme });
    this.updateDarkMode(DarkTheme);
  }

App이 처음 실행된 후 localStorage및 사용자 세팅을 검사한 후 알맞은 theme를 설정한다

이렇게 다크모드를 판단하는 로직은 tailwindCSS에서 가져옸다

const $header = this.$target.querySelector(HEADER_SELECTOR);
new Header({
      $target: $header,
      props: {
        addItem: this.addItem.bind(this),
        darkMode: theme,
        toggleDarkMode: this.toggleDarkMode.bind(this),
      },
    });

App에서 Header를 생성할때 현재 theme 및 변경 함수를 전달해줬다.

  toggleDarkMode() {
  const { theme } = this.state;
    this.setState({ ...this.state, theme: !theme });
    this.updateDarkMode(!theme);
  }

  updateDarkMode(darkMode) {
    if (darkMode) {
      this.$target.classList.add('dark');
      store.theme = 'dark';
    } else {
      this.$target.classList.remove('dark');
      store.theme = 'light';
    }
  }

• toggleDarkMode는 다크모드 변경 버튼을 눌렀을 때 실행되는 함수다. App에 저장되어 있는 theme상태를 변경하고 updateDarkMode함수를 실행한다.
• updateDarkMode함수는 DOM에 변경사항을 반영하고 localStorage에 변경된 theme를 저장한다

Header.js

export default class Header extends Component {
  templates() {
    const { darkMode } = this.props;
    return `
      <h1 class='title'>
        ${this.getAnimalLogoTemplate(darkMode)}
        TodoList
        <button class='toggle-dark'>
        	${this.getDarkModeButtonTemplate(darkMode)}
        </button>
      </h1>
      ...
    `;
  }

  setEvent() {
    const { toggleDarkMode } = this.props;
    
    ...
    
    this.addEvent({
      eventType: CLICK,
      selector: TOGGLE_DARKMODE_SELECTOR,
      callback: toggleDarkMode,
    });
  }

  ...

  getDarkModeButtonTemplate(darkMode) {
    return darkMode
      ? `<i class="fa-solid fa-moon"></i>`
      : `<i class="fa-solid fa-sun"></i>`;
  }

  getAnimalLogoTemplate(darkMode) {
    return darkMode
      ? `<i class="fa-solid fa-cat"></i>`
      : `<span class="material-icons">
          cruelty_free
        </span>`;
  }
}

• Header에서는 테마에 따라 다크모드 토글 버튼의 로고와 동물 로고를 다르게 렌더링해준다.
• 라이트 모드라면 해와 토끼, 다크 모드라면 달과 고양이를 보여준다.
• App에서 받은 리스너 함수를 토글 버튼 클릭 이벤트로 등록한다.

Store.js

class Store {
  #storage;
  constructor(storage) {
    this.#storage = storage;
  }

  ...

  set theme(darkMode) {
    this.#storage.theme = darkMode;
  }

  get theme() {
    return this.#storage.theme;
  }
}

const storage = localStorage;
export default new Store(storage);

localStorage에서 theme를 저장하고 불러올 수 있다

결과

소감

사실 어렵지는 않았다. 하지만 토끼 아이콘을 찾는게 정말 너무너무너무 힘들었다...😭 포기하고 고양이 로고만 보여줄까도 생각했지만 컨셉에 최대한 맞게 구현하고 싶어서 열심히 찾았다. 그리고 토끼 아이콘이

<span class="material-icons">cruelty_free</span>

이런식으로 되어 있어서 인터넷이 느리면 토끼 아이콘 대신 cruelty_free라는 글씨가 보일때가 있어서 신경이 약간 쓰인다.