Skip to main content
Version: Next

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)

ValueDescription
lightSwitch theme to light
darkSwitch theme to dark
systemSwitch theme to system appearance