ExpoIntermediate

Dark / Light theme — useColorScheme ও theme object

সিস্টেমের color scheme অনুযায়ী অ্যাপ-এর রং বদলানো — বাংলায়।

5টি অংশবাংলা ভাষায়

`useColorScheme` — সিস্টেমের bright/dark state-এর hook:

constants/theme.tsts

const palette = {
  light: { bg: "#ffffff", text: "#0f172a", accent: "#2563eb" },
  dark: { bg: "#0f172a", text: "#f8fafc", accent: "#60a5fa" },
};

export function getTheme(scheme) {
  return scheme === "dark" ? palette.dark : palette.light;
}

const scheme = useColorScheme();
const theme = getTheme(scheme);

<View style={{ backgroundColor: theme.bg }}>
  <Text style={{ color: theme.text }}>টাস্ক টাইটেল</Text>
</View>

app.json-এ userInterfaceStyle: "automatic" — সিস্টেম অনুযায়ী
status bar — <StatusBar style="auto" />
dark-এ হালকা রঙের কথা মাথা রাখা — contrasted accent

রং এক জায়গায়

সব রং theme object-এ রাখুন, screen-এ hardcode করবেন না — theme বদলানোর সাথে সাথে সব জায়গা ঠিক থাকে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।