Dark Theme

Usage

To use dark theme, you just need to add prefix syntax dark: to your styling color. For example:

apply("bg-white dark:bg-gray-900");

when the appearance in light mode, it will use bg-white. Otherwise, use bg-gray-900 in dark mode.

Switch Theme

To switch theme between dark, light, and the system appearance. You can use switch() method in appearanceHook. Example:

import React, { useState } from "react";
import { TouchableOpacity, View, Text } from "react-native";
import { useStyles } from "osmicsx";

const Settings = (props) => {
  const { switchTheme } = useStyles();

  return (
    <View
      style={apply(
        "flex bg-white dark:bg-gray-900 items-center justify-center"
      )}
    >
      <Text
        style={apply(
          "text-gray-900 dark:text-white text-center text-2xl font-bold"
        )}
        onPress={() => switchTheme("light")}
      >
        Switch to Light
      </Text>
      <Text
        style={apply(
          "text-gray-900 dark:text-white text-center text-2xl font-bold"
        )}
        onPress={() => switchTheme("dark")}
      >
        Switch to Dark
      </Text>
    </View>
  );
};

switchTheme(value: string)

Value	Description
light	Switch theme to light
dark	Switch theme to dark
system	Switch theme to system appearance