How to figure out if user is on adaptive theme or custom theme?

[itsramiel]

I would like to have a switch where a user can switch between light/dark and system theme, which is very common to have.

My approach was the following:

UnistylesRegistry.addThemes({
  light: lightTheme,
  dark: darkTheme,
}).addConfig({
  adaptiveThemes: true,
});

// ..............

import SegmentedControl from "@react-native-segmented-control/segmented-control";
import { View } from "react-native";
import {
  UnistylesRuntime,
  UnistylesThemes,
  createStyleSheet,
  useStyles,
} from "react-native-unistyles";

const THEMES = ["light", "dark", "adaptive"];

export default function() {
  const { styles } = useStyles(stylesheet);
  const selectedTheme: (typeof THEMES)[number] =
    UnistylesRuntime.hasAdaptiveThemes
      ? "adaptive"
      : UnistylesRuntime.themeName;

  return (
    <View style={styles.container}>
      <SegmentedControl
        values={THEMES}
        selectedIndex={THEMES.indexOf(selectedTheme)}
        onChange={(event) => {
          const newTheme = THEMES[event.nativeEvent.selectedSegmentIndex];
          if (newTheme === "adaptive") {
            UnistylesRuntime.setAdaptiveThemes(true);
          } else {
            UnistylesRuntime.setTheme(newTheme as keyof UnistylesThemes);
          }
        }}
      />
    </View>
  );
}

const stylesheet = createStyleSheet((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.color,
    justifyContent: "center",
  },
}));

but even after changing the theme explicitly, the hasAdaptiveThemes is still true. I expected it to turn to false once a theme is set explicitly, but it doesnt.

Of course I can just set if it is light/dark/adaptive in a useState depending on user choice and just hope it is the same as Unistyles internal but I would love to be able to derive it from unistyle itself.

What is the appropriate way to achieve what I am trying to do in the example?

[jpudysz]

This is intended behavior and Unistyles won't disable adaptiveThemes.

I usually present 3 options:

• system
• light
• dark

When user selects "system" I'm turning on adaptive themes. For light/dark I'm disabling adaptive themes and setting target theme.