react-native-appearanceを使ってダークモードを判定する

github.com

react-native-appearanceでiOSのダークモードの判定を取得できるので、これでアプリのダークモードのON/OFF（初期値）の設定をしてみる

対応pull request

ダークモード修正 by wheatandcat · Pull Request #145 · wheatandcat/Peperomia · GitHub

ダークモードの実装

qiitaで記事にしているので、こちらを確認

qiita.com

実装

Peperomia/Theme.tsx at 8915a70524f8abd27324fbc391b39114783829de · wheatandcat/Peperomia · GitHub

import React, { createContext, Component, ReactNode } from "react";
import { Appearance, useColorScheme } from "react-native-appearance";
import { setMode } from "../config/theme";

type Props = {
  children: ReactNode;
};

Appearance.getColorScheme(); // ← ①: 事前設定

export default (props: Props) => {
  const colorScheme = useColorScheme();// ← ②: ここで設定からdark or lightの文字列を取得できる

  return <Theme colorScheme={colorScheme}>{props.children}</Theme>;
};

ここで取得できた値を元にdarkモードの判定を取得して設定