스파르타코딩 내일배움캠프 DAY 20 TIL - 다크모드

2번째 프로젝트 기한이 얼마 안남았다.

생각보다 어려워진 난이도로 지금 굉장히 고생을 하고 있다.
우선 혼자 공부 할 때는 아쉽게도 자바스크립트 신문법에 대해서 잘 몰랐는데, 막상 프로젝트를 신문법으로 진행을 하려고 하니 어디서부터 어떻게 해야 할지 막막했다.
우선 급한대로 코어 자바스크립트부터 빠르게 살펴봤지만, 생각보다 어려운 문법들이 많아서 조금.. 아니 많이 고전을 한 것 같다.

하지만 팀프로젝트 완성이 우선이기에, 외적으로 다른 부분, 아니 뭐라도 해야했다.

그래서 이전에 혼자서 만들어봤던 다크모드를 적용해보기로했다.

우선은 다크모드 배경 색상은 단순히 블랙 색상보다는 크롬(구글)의 다크모드처럼 살짝 물이 빠진 검정색으로 골랐다.
왜냐하면 무조건 검은색은 약간 이질감이 느껴졌기 때문이다.

먼저 color picker로 해당 색상을 찾아서 기록을 해뒀다.

그리고 dark1, dark2, dark3에 각각 원하는 색상과 효과를 넣어주고, classList를 이용하여 추가 및 제거로 다크모드 효과를 내봤다.

구글 검색을 하면서 알게된 건, 생각보다 많은 방법으로 해결이 가능하다는 것이다. 이번에는 아쉽게 시간이 없어서 구글에 나온 방법으로 해보지는 않았지만, 다음번에는 새로운 방법으로도 도전을 해봐야 겠다.

결국 원하는 방향으로 깔끔하게 구현이 되었다.

이제 코드를 정리해보자

메인페이지

<div class="mainWrapper">
  <div class="container">
    <!-- 1. 네비게이션 바 -->

    <!-- 다크모드 --> 우선 HTML메인 페이지에 다크모드를 설정하고, onclick으로 버튼 이벤트를 줘봤다.
    <span onclick="darkmode(event)" class="badge bg-dgoToMypage">☀️</span>

    <nav class="nav">
      <button onclick="goToMain(event)" type="button" class="home">
        <p></p>
      </button>
      <button onclick="goToTeamInfor(event)" type="button" class="music">
        <p></p>
      </button>
    </nav>
    <!-- 2. 스레드 -->
    <main>
      <div class="sub-header">
        <h2 class="main_tit">오늘의 음악</h2>
        <div class="info">
          <div class="date" id="date">날짜</div>
          <button onclick="goToWrite(event) " type="button" class="post"></button>
        </div>
      </div>
      <div class="content" id="post-list"></div>
    </main>
  </div>
</div>

다음으로는 Main.js에 darkMode를 import를 했다. 이제 곧 mainpage.js에가서 자바스크팁트로 작업을 해야하기 때문이다.

• 추가로 허들없이 사용을 해야하니 window.darkmode = darkmode;로 설정을 해주었다.

let count = 0;
export function darkmode(event) {
  count += 1;
  if (count % 2 == 1) {
    document.querySelector(".badge").innerHTML = "🌙";
    document.querySelector("body").classList.add("dark");
    document.querySelector(".music-img").classList.add("dark2");
    document.querySelector("main").classList.add("dark3");
    // document.querySelector(".card").classList.add("dark4");

    // 로그인,로그아웃
    // document.querySelector(".login .sign-in").classList.add("dark");
    // document.querySelector(".login .sign-up").classList.add("dark");
  } else {
    document.querySelector(".badge").innerHTML = "☀️";
    document.querySelector("body").classList.remove("dark");
    document.querySelector(".music-img").classList.remove("dark2");
    document.querySelector("main").classList.remove("dark3");
    // document.querySelector(".card").classList.remove("dark4");
    // 로그인,로그아웃
    // document.querySelector(".login .sign-in").classList.add("dark");
    // document.querySelector(".login .sign-up").classList.add("dark");
  }
}

이제 mainpage.js에서 작업을 해보도록 하겠다.
굉장히 노가다?작업 인 듯하다.. 각각의 부분을 설정을 하고 classList를 통해 계속 바꿔보면서 테스트를 해봤다.

/* 다크모드 */

.dark {
  background-color: #262625;
  /* background-color: black; */
  color: white;
}

.dark1 {
  background-color: white;
  color: black;
}

.dark2 {
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(107%) contrast(101%);
}

.dark3 {
  background-color: #333333;
  /* background-color: #626262; */
  color: white;
}

.dark4 {
  border-top: 12px solid white;
  border-right: 10px solid #333333;
  border-left: 10px solid #333333;
  border-bottom: none;

  margin: 0;
  padding: 0;
}

.badge {
  position: relative;
  top: 10px;
  left: 75px;
  font-size: 28px;
  display: inline-block;
  cursor: pointer;
}

그리고 동시에, CSS에서도 동시에 효과를 줘야한다.
각각의 dark를 숫자로 부여해서, 원하는 효과대로 설정을 해줬다.

다만 아쉬운점은 ....

조금 더 최적화된 코드로 작성하지 못한 것,
아이콘 반응을 주지 못한 것이 개인적으로 아쉬웠다.
또한 한 번 다크모드로 설정을 하면, 새로고침 및 화면을 껏다켜도 다크모드가 유지되는 기능을 넣었으면 좋았을텐데 그게 조금 아쉬다.
하지만 처음 만들었던 다크모드 보다는 훨씬 디장니적으로도 괜찮아서 나름 마음에 들었다