TIL 52. React Native - useColorScheme

// App.js

import { useColorScheme } from "react-native";
import { ThemeProvider } from "@emotion/react";

// (...)

const isDark = useColorScheme() === "dark

// (...)

return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <NavigationContainer>
          <Root />
        </NavigationContainer>
      </ThemeProvider>
    </QueryClientProvider>
  );

테마를 사용하기 위해 ThemeProvider로 감쌌다.

// theme.js

export const lightTheme = {
  title: "black",
  backgroundColor: "white",
  itembgColor: "#efddae",
};
export const darkTheme = {
  title: "white",
  backgroundColor: "#273c75",
  itembgColor: "black",
};

위 코드처럼 변수로 스타일들을 지정해주면,

import { useColorScheme } from "react-native";

// (...)

const isDark = useColorScheme() === "dark";

// (...)

useColorScheme이 있는 곳의,

// Detail.js

const ScrollContainer = styled.ScrollView`
  background-color: ${({ theme }) => theme.backgroundColor};
`;

styled component 안에서 사용가능하다.

근데, 간혹 지정해준 스타일이 아니라, isDark에 따라 개별적으로 스타일을 주고 싶을 때는 아래처럼 하면 된다.

const InputId = styled.TextInput`
  width: 48%;
  height: 30px;
  padding: 0 12px;
  border: 1px solid ${(isDark) => (isDark ? "white" : "#333")};
  border-radius: 8px;
`;