react-native 로 토스 디자인 따라하기 개인프로젝트 중 다크모드를 적용해보았습니다.

Feature

다크/라이트 모드 가능
선택된 모드 유지
다시 접속 시 선택된 모드 유지
선택 모드 없다면 기기 default 모드로 적용

최종 사용법

<Text.Common style={[styles.text, {color: colors[theme].text_button}]}>다크모드</Text.Common>

사용 라이브러리

zustand
mmkv

Store 세팅

themeStore.ts

import {Appearance} from 'react-native';
import {create} from 'zustand';
import {storage} from '../mmkv';

type ThemeProp = 'light' | 'dark';

type ThemeStoreProps = {
  theme: ThemeProp;
  setTheme: (theme: ThemeProp) => void;
};

const useThemeStore = create<ThemeStoreProps>(set => ({
  theme: Appearance.getColorScheme() === 'dark' ? 'dark' : 'light',
  setTheme: theme => {
    set({theme});
    storage.set('theme', theme);
  },
}));

export default useThemeStore;

color 세팅

color.ts

export interface ColorProps {
...
}

export const light: ColorProps = {
  bg: '#F2F4F6',
  bg_setion: '#ffffff',
  bg_bottom_sheet: '#FFFFFF',
  bg_bottom_tab: '#FFFFFF',
  bg_button: '#e6e9ed',
  bg_button_focus: '#d9dce1',
 ...
};

export const dark: ColorProps = {
  bg: '#101013',
  bg_setion: '#17171C',
  bg_bottom_sheet: '#17171C',
  bg_bottom_tab: '#17171C',
  bg_button: '#3B3B46',
  bg_button_focus: '#2C2C35',
 ...
};

export const colors = {dark, light};

스위치 예시

header-home.tsx

...
import {colors} from 'src/styles/color';
import useThemeStore from 'src/utils/zustand/themeStore';
...

const HomeHeader = () => {
	const {theme, setTheme} = useThemeStore();

	 return (
	 	...
		<Switch
			trackColor={{false: colors[theme].logo, true: colors[theme].logo}}
			ios_backgroundColor={colors[theme].logo}
			thumbColor={theme === 'dark' ? 'black' : 'white'}
			onValueChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
			value={theme === 'dark' ? true : false}
		/>
		...
	)
}

적용 예시

button.tsx

...
import React from 'react';
import {Pressable, StyleSheet} from 'react-native';
import {colors} from 'src/styles/color';
import useThemeStore from 'src/utils/zustand/themeStore';
...
type ButtonProps = {
  onPress: () => void;
  text: string;
};

const Button = ({onPress, text}: ButtonProps) => {
  const {theme} = useThemeStore();
  return (
    <AnimatedButton foucsedBackgroundColor={colors[theme].bg_button_focus}>
      <Pressable
        onPress={onPress}
        style={[
          styles.container,
          {
            backgroundColor: colors[theme].bg_button,
          },
        ]}>
        <Text.Common style={[styles.text, {color: colors[theme].text_button}]}>
          {text}
        </Text.Common>
      </Pressable>
    </AnimatedButton>
  );
};

Button.defaultProps = {
  text: 'Button',
};

export default Button;

const styles = StyleSheet.create({
  text: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  container: {
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 8,
  },
});

기본 StyleSheet.create 안에 colors[theme].bg_button dark_mode 스타일 코드를 넣으면 좋지만, theme 변수를 받아 사용 할 수 없는 구조이기에, inline-style 을 사용해서 넣어야 합니다.

colors[theme].bg_button 를 뜯어보면
colors = {dark, light}
theme = light | dark
입니다.

theme === light 일 때,

const light: ColorProps = {
  bg: '#F2F4F6',
  bg_setion: '#ffffff',
  bg_bottom_sheet: '#FFFFFF',
  bg_bottom_tab: '#FFFFFF',
  bg_button: '#e6e9ed',
  bg_button_focus: '#d9dce1',
  indicator_bottom_sheet: '#E5E8EB',
  text: '#6b7684',
  text_title: '#191f28',
  text_list: '#4E5968',
  text_button: '#4E5968',
  text_more: '#6b7684',
  text_info: '#8b95a1',
  text_bottom_tab_active: '#191f28',
  text_bottom_tab: '#B0B8C1',
  text_money: '#333D4B',
  icon: '#B0B8C1',
  divider: '#E5E8EB',
  red: '#F04452',
  logo: '#1B64DA',
};

colors[theme].bg_button =#e6e9ed

나오게 되는 것입니다!

후기

React-native 에서 다크모드/라이트모드에 대한 리소스가 많지 않아서 쉽지는 않았다..!

[React-Native] Dark Mode 다크모드 🌓