다크 모드 구현 (feat. 유저/os 제어권 넘기기)

👩🏻‍💻 어두운 배경에 밝은 글씨는 다크 모드, 밝은 배경에 어두운 글씨는 기본 UI (라이트 모드)로 설정할 수 있다.
🌑 다크 모드를 사용하면 눈의 피로도를 낮출 수 있다는 점에서 종종 지원하는 기능이다.
🌝 밝은 조명 아래에서 다크모드는 가독성이 떨어질 수 있기 때문에 라이트 모드도 지원해 주는 것이 좋다.
🌓 다크/라이트 모드를 선택할 수 있도록 하거나 os의 기본 설정을 따라갈 수 있다.

🤔 근데 이렇게 유저가 선택한 모드랑 os의 설정 중 어떤게 더 우선순위가 높아야 하나?


오늘은 MDN Web Docs에서 힌트를 얻어 다크/라이트 모드에 우선순위를 부여하는 방식에 대해 살펴보자. 

 

Mac os에서 시스템 컬러모드 설정

 

구현

dark/light 모드를 구현하기 위해 준비물들을 먼저 살펴보자

 

☑ useAppTheme.ts 커스텀 훅: 현재 모드를 제어할 수 있는 커스텀 훅

☑ provider/ThemeProvider.tsx : 테마 모드를 전체에 감싸줄 컴포넌트

☑ provider/layout.tsx : 모든 Provider를 한 곳에  모은 컴포넌트

☑ (user 선택) 버튼 : light/ dark 모드를 변경할 수 있는 버튼 컴포넌트, useAppTheme 훅을 활용해서 모드를 토글 할 수 있다.

☑ (user/os 선택) 버튼 : user 혹은 os에 우선순위를 부여할지 선택할 버튼 컴포넌트, os 선택 시 os 모드 따라가고 user 클릭 선택 시 유저의 선택이 우선된다.

 

☑ 다크/라이트 모드 설정한 컴포넌트

!! 자세한 scss 코드는 생략했습니다!!

•  @tripie/design-system/src/components/_body.tsx : 폰트와 모드를 앱 전체에 적용할 컴포넌트

"use client";

import { useAppTheme } from "@tripie/hooks";
import classNames from "classnames";
import localFont from "next/font/local";
import { HTMLAttributes, ReactNode } from "react";
import "./_body.scss";

export interface BodyProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
}

const maruBuri = localFont({
  src: [
    {
      path: "../../static/fonts/MaruBuri-Regular.woff",
      style: "normal",
    },
  ],
});

const Body = ({ children, className, ...props }: BodyProps) => {
  const { mode } = useAppTheme();

  return (
    <section
      className={classNames(className, mode, maruBuri.className)}
      {...props}
    >
      <div className="background-container">
        <div className="stars"></div>
        <div className="twinkling"></div>
      </div>
      <div className="layout-wrap">{children}</div>
    </section>
  );
};
export default Body;​

•  @tripie/design-system/src/components/_body.scss : 폰트와 모드를 앱 전체에 적용할 컴포넌트

@use "../../base/" as *;
@use "../../functions/" as *;
@use "../../generator/" as *;
@use "../../mixins/" as *;
@use "./night-sky" as *;
@use "sass:map";

@include generate-styles;

.dark {
  color: color(default, 800);
  @include night-sky;
}

•  @tripie/design-system/src/components/_night-sky.scss : 폰트와 모드를 앱 전체에 적용할 컴포넌트

@use "../../mixins/" as *;
@use "../../base/" as *;
@use "sass:map";

@mixin night-sky {
  .background-container {
    overflow-x: hidden;
    @include position(fixed);
  }

  .stars {
    background: rgb(0, 0, 0) url("../../static/images/stars.png") repeat;
    @include position(absolute);
    @include z-index(base);
  }

  @keyframes move-background {
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to {
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }

  .twinkling {
    background: transparent url("../../static/images/twinkling.png") repeat;
    @include position(absolute);
    @include z-index(mask);
    animation: move-background 70s linear infinite;
  }

  img {
    @include position(absolute);
    @include z-index(fixed);
  }

  .layout-wrap {
    @include position(absolute);
    @include z-index(masked);
  }
}

•  @tripie/design-system/src/components/_body.scss : 폰트와 모드를 앱 전체에 적용할 컴포넌트

@use "../base/" as *;
@use "../functions/" as *;
@use "../mixins/" as *;

/// 모든 스타일 생성
@mixin generate-styles {
  @include generate-reset;
  @include generate-normalize;

  @include generate-color-variables;

  @each $key, $value in $config-theme {
    @include generate-color-variables(
      $colors: $value,
      $selector: "[data-theme=#{$key}]:root" // dark 모드일 경우 [data-theme="dark"]:root 생성
    );
  }

  @include generate-default;
  @include generate-media;
}

모드 제어권을 줄 대상에 따라 구현이 조금씩 달라진다.

1. os 모드 제어권 부여

import { useEffect, useState } from "react";
import { useLocalStorage, useMediaQuery } from "usehooks-ts";

const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";

const THEME_MODE = {
  DARK: "dark",
  LIGHT: "light",
} as const;

type ThemeMode = (typeof THEME_MODE)[keyof typeof THEME_MODE];

type UseAppThemeOutput = {
  mode: ThemeMode;
};

export const useAppTheme = (): UseAppThemeOutput => {
  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
  const [osPrefersMode] = useState(
    isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT
  );

  const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>(
    "app-theme",
    osPrefersMode ?? THEME_MODE.LIGHT
  );

  useEffect(() => {
    const root = document?.documentElement;
    setThemeMode(isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT);
    if (root) {
      root.dataset.theme = themeMode;
    }
  }, [themeMode, isDarkOS]);

  return {
    mode: themeMode,
  };
};​

 

os setting에서 mode를 변경하면 애플리케이션도 똑같이 반영된다.

os 모드 따라가기

다크 모드일 경우 html의 data-theme= "dark"이고, root 색상들도 다크 theme을 따라간다.

 

라이트 모드일 경우 html의 data-theme= "light"이고, root 색상들도 디폴트(라이트) theme을 따라간다.

👩🏻‍💻 이 방식은 os에 따라 자동으로 변경이 되므로 간단하게 구현할 수 있다.
하지만 유저가 만약 모드를 번경하고자하면 애플리케이션 화면에서 벗어나 설정에 직접 들어가서 변경을 해야 한다는 점에서 번거롭다. 뿐만 아니라 현재 애플리케이션만 특정 모드로 하고 다른 애플리케이션은 os 모드를 유지하도록 하고픈 니즈가 있을 수가 있을 수도 있다.

그럼 이번에는 유저에게 제어권을 넘기는 방식을 살펴보자.

2. 유저에게 모드 선택 제어권 부여

import { useEffect, useState } from "react";
import { useLocalStorage, useMediaQuery } from "usehooks-ts";

const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";

const THEME_MODE = {
  DARK: "dark",
  LIGHT: "light",
} as const;

type ThemeMode = (typeof THEME_MODE)[keyof typeof THEME_MODE];

type UseAppThemeOutput = {
  mode: ThemeMode;
  toggle: () => void;
  setLight: () => void;
  setDark: () => void;
  setMode: (mode: ThemeMode) => void;
};

export const useAppTheme = (): UseAppThemeOutput => {
  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
  const [osPrefersMode] = useState(
    isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT
  );

  const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>(
    "app-theme",
    osPrefersMode ?? THEME_MODE.LIGHT
  );

  useEffect(() => {
    const root = document?.documentElement;

    if (root) {
      root.dataset.theme = themeMode;
    }
  }, [themeMode, isDarkOS]);

  return {
    mode: themeMode,
    toggle: () =>
      setThemeMode((previous) =>
        previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK
      ),
    setLight: () => setThemeMode(THEME_MODE.LIGHT),
    setDark: () => setThemeMode(THEME_MODE.DARK),
    setMode: (mode) => setThemeMode(mode),
  };
};

 

// app/page.tsx

"use client";
import ThemeButton from "../components/ThemeButton";

export default function Home() {
  return (
    <div>
      <ThemeButton.Toggle />

      <h1>this is home</h1>
    </div>
  );
}

유저에게 모드 선택 권한 넘기기, os setting이 변경되어도 앱의 모드는 유지된다는 걸 확인할 수 있다.

이 방식은 현재 애플리케이션의 모드를 유저가 원하는 대로 변경할 수 있도록 구현했다.
하지만 os 설정이 반영되지 않으므로 불편한 상황이 있을 수 있다.
예를 들어 다크 모드를 사용하고 있는데 이 애플리케이션만 라이트 모드일 경우 갑자기 눈이 너무 부시거나,
어두운 곳에서 보고 있는 중이라 os 설정이 라이트인데 자동으로 애플리케이션은 다크 모드로 설정되어 있다면 굳이 변경을 해야 한다는 점이 욕심을 좀 부리자면 불편하다.
그리고 처음 애플리케이션에 진입했을 경우 다크모드로 설정해줘야 할지 혹은 라이트 모드로 설정해야 할지 유저의 선택이 아닌 개발자 임의대로 정할 수밖에 없다.

그런 점에서 os를 따라가는 걸 기본으로 (유저의 취향 고려) 하면서도 유저가 원하는 대로 설정을 할 수 있도록 구현할 수 없을까?
그러기 위해 공부를 하면서 종종 방문했던 MDN Web Docs는 라이트/다크 모드를 어떻게 구현했는지 살펴보자.

MDN의 라이트/다크 모드

mdn의 다크/라이트 모드

 

기본적으로 os 설정을 따라가도록 하고, light이나 dark 모드를 선택하면 os 설정을 오버라이드한다.

이 동작과 동일하도록 코드를 살짝 수정해보자.

import { useEffect, useState } from "react";
import { useLocalStorage, useMediaQuery } from "usehooks-ts";

const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";

const THEME_MODE = {
  DARK: "dark",
  LIGHT: "light",
} as const;

const CONTROL_MODE = {
  USER: "user",
  OS_DEFAULT: "os_default",
} as const;

type ThemeMode = (typeof THEME_MODE)[keyof typeof THEME_MODE];
type ControlMode = (typeof CONTROL_MODE)[keyof typeof CONTROL_MODE];

type UseAppThemeOutput = {
  mode: ThemeMode;
  toggle: () => void;
  setLight: () => void;
  setDark: () => void;
  setMode: (mode: ThemeMode) => void;
  setControl: (control: ControlMode) => void;  /** 💖 추가 : user/os 에게 제어권 넘기기 */
};

export const useAppTheme = (): UseAppThemeOutput => {
  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
  const [osPrefersMode] = useState(
    isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT
  );
  /**
  💖 추가 : 초기 제어권은 os가 지닌다.
  */
  const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>(
    "app-theme",
    osPrefersMode
  );
  const [themeControl, setThemeControl] = useLocalStorage<ControlMode>(
    "control-theme",
    CONTROL_MODE.OS_DEFAULT
  );

  useEffect(() => {
    const root = document?.documentElement;

    if (themeControl === "os_default") {
      setThemeMode(isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT);
    }
    root.dataset.theme = themeMode;
  }, [isDarkOS, osPrefersMode, themeControl, themeMode]);

  return {
    mode: themeMode,
    toggle: () => {
      setThemeControl("user");
      setThemeMode((previous) =>
        previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK
      );
    },
    setLight: () => setThemeMode(THEME_MODE.LIGHT),
    setDark: () => setThemeMode(THEME_MODE.DARK),
    setMode: (mode) => setThemeMode(mode),
    setControl: (control) => setThemeControl(control),
  };
};

 

// Theme button

"use client";
import { MyButton } from "@tripie/design-system";
import { useAppTheme } from "@tripie/hooks";

const ThemeButton = () => {
  const { setControl } = useAppTheme();
  return (
    <MyButton onClick={() => setControl("os_default")}>os default</MyButton>
  );
};

const ToggleButton = () => {
  const { mode, toggle } = useAppTheme();
  return (
    <MyButton onClick={toggle}>
      to {mode === "dark" ? "light" : "dark"}
    </MyButton>
  );
};

ThemeButton.Toggle = ToggleButton;

export default ThemeButton;

// app/page.tsx

"use client";
import ThemeButton from "../components/ThemeButton";

export default function Home() {
  return (
    <div>
      <ThemeButton />
      <ThemeButton.Toggle />

      <h1>this is home</h1>
    </div>
  );
}

os나 유저에게 모드 선택 위임

🍀 마치면서

오늘은 다크/라이트 테마 제어권을 유저나 os에 넘기는 방식에 대해 살펴봤다.
물론 프로젝트가 제공하는 서비스에 따라서 다크/라이트 모드를 설정해 주는 것이 중요하지 않을 수도 있지만, 
잠자기 전 침대에 누워 폰을 보는 사람에게는 필수지 않을까 싶다🤭

다크 모드 구현에 관해 카카오 FE 기술 블로그는 body 태그에 클래스를 붙이는 방식으로 구현하기를 추천하지만 현재 코드에서는 html에 붙이고 있다. 그리고 body 태그 바로 아래에 애플리케이션 전체를 감싸고 있는 section에 클래스를 부여하는 방식이다.
이는 body 태그가 app/layout.tsx 외에는 등장할 수 없다는 next의 제약(글 작성 기준)때문에 선택한 방식이다.

한편 html에 컬러 모드를 설정해 줘서 document의 최상단이므로 모든 스타일이 cascade 되고, spa route 변경이나 full reload시 깜빡거림을 제거할 수 있다는 점에서 좋은 거 같다.

 

---

📚 References

 

https://fe-developers.kakaoent.com/2021/211118-dark-mode/

웹에서 다크모드 지원하기 | 카카오엔터테인먼트 FE 기술블로그