[개발] 웹페이지 다크모드 개발

안녕하세요 @realmankwon입니다.

웹페이지를 개발하면서 생각해보니 제가 사용하는 프로그램은 모두 다크모드로 사용하고 있는데 정작 제가 만들고 있는 것들은 다크모드를 반영하지 않았더군요.
크롬에서 다크 리더라는 확장앱을 사용하고 있어서 다크모드를 적용을 안 했던 것 같기는 한데 문제는 제가 만든 웹페이지에 다크 리더를 적용하면 이상하게 속도가 급격하게 느려졌습니다.

그래서 잘 사용하지 않게 되더군요.
이번에도 시간을 내어 해결을 해 보았습니다.
일단 언제나처럼 구글링을.... ㅎㅎ

바로 나오는군요 ^^

https://herculino.com/en/blog/semantic_ui_darkmode_part1.html

일단 css 를 작성해 줍니다.

<style>
  :root {
    --darkBG: #232b32;
  }

  body.inverted {
    background-color: var(--darkBG);
  }
</style>

다음으로 html 에 button 을 추가 시켜줍니다.
아래의 javascript 소스를 보면 아시겠지만 해당 버튼은 토글이 되면서 다크모드와 라이트모드를 왔다리 갔다리 하게 됩니다.

  <button class="ui button icon basic" id="darkmode">
    <i class="moon icon"></i>
  </button>

위의 버튼 클릭에 따라 toggle 함수들이 실행이 되면서 모든 class 에 inverted 가 추가되면서 다크모드로 변경이 됩니다.
이때 원문에서는 darkmodeEnabled라는 변수가 선언이 되어 있지 않아서 에러가 났습니다.
생각해 보면 현재 상태가 어떤지를 판단하는 변수이기 때문에 button 의 class 에 sun 이 있으면 true, moon 이 있으면 false 를 지정해주면 되었습니다.

<script>
  function toggleDarkMode() {
    // add fomantic's inverted class to all ui elements
    $("body").find(".ui").addClass("inverted");
    // add custom inverted class to body
    $("body").addClass("inverted");

    // simple toggle icon change
    $("#darkmode > i").removeClass("moon");
    $("#darkmode > i").addClass("sun");

    return;
  }

  function toggleLightMode() {
    // remove fomantic's inverted from all ui elements
    $("body").find(".ui").removeClass("inverted");
    // remove custom inverted class to body
    $("body").removeClass("inverted");

    // change button icon
    $("#darkmode > i").removeClass("sun");
    $("#darkmode > i").addClass("moon");

    return;
  }

  $("#darkmode").click(function () {
    const darkmodeEnabled = $("#darkmode > i").hasClass("sun");
    if (darkmodeEnabled) {
      toggleLightMode();
    } else {
      toggleDarkMode();
    }
  });
</script>

그렇게 하고 실행을 하니 아주 잘 되는군요 ㅎㅎ
필요하신 분들은 참고하시기 바랍니다!ㅎ