← Back to UI Home

How to use your app theme in this UI

tcbs-cli
npm install @tcbs/react-native-mazic-ui

You can easily set up your app's theme using useTcbsColorStore from @tcbs/react-native-mazic-ui. Below is a sample implementation for both light and dark modes:

tcbs-cli
import { useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
const { setTcbsColor } = useTcbsColorStore();
React.useEffect(() => {
  setTcbsColor({
    light: {
      btnColor: '#007AFF',
      btnBorderColor: '#007AFF',
      btnIconColor: '#16a62bff',
      themeColor: '#007AFF',
      btnTextColor: '#FFFFFF',
    },
    dark: {
      btnColor: '#222222',
      btnBorderColor: '#222222',
      btnIconColor: '#FFFFFF',
      themeColor: '#222222',
      btnTextColor: '#FFFFFF',
    },
  });
}, []);

Access Theme State and Colors

You can access the current theme value (tcbsTheme), the calculated theme mode (currentThemeMode), and the current colors object (themeColors) from useTcbsColorStore:

tcbs-cli
import React from 'react';
import { useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
const MyComponent = () => {
  const { tcbsTheme, currentThemeMode, themeColors } = useTcbsColorStore();
  return (
    <>
      <Text>Theme value: {tcbsTheme}</Text>
      <Text>Calculated mode: {currentThemeMode}</Text>
      <Text>Theme colors: {JSON.stringify(themeColors, null, 2)}</Text>
    </>
  );
};

Expected Values

  • tcbsTheme: "light", "dark", or "system"
    User’s selected theme mode.
  • currentThemeMode: "light" or "dark"
    The effective theme mode (resolved from user or system).
  • themeColors: { btnColor, btnBorderColor, btnIconColor, themeColor, btnTextColor, ... }
    An object with the current color values for the active theme.

Set a Single Mazic Color

To quickly set a single Mazic color for your app, use the setMazicColor method as shown below:

tcbs-cli
import { useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
const { setMazicColor } = useTcbsColorStore();
React.useEffect(() => {
  setMazicColor('#174143'); // '#CC561E', '#1E3E62', '#089A9A', etc.
}, []);

Set Theme Mode (Light, Dark, System)

You can set the theme mode to light, dark, or system using setTcbsTheme:

tcbs-cli
import { useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
const { setTcbsTheme } = useTcbsColorStore();
// Set theme mode to 'light', 'dark', or 'system'
React.useEffect(() => {
  setTcbsTheme('light'); // or 'dark', or 'system'
}, []);

Toggle Theme Mode

You can use the toggleTcbsTheme function to quickly switch between theme modes. Here is an example using TcbsButton:

tcbs-cli
import React from 'react';
  import { TcbsButton, useTcbsColorStore } from '@tcbs/react-native-mazic-ui';
  const MyComponent = () => {
    const { tcbsTheme, toggleTcbsTheme } = useTcbsColorStore();
    return (
      <TcbsButton
        title={tcbsTheme}
        variant="primary"
        iconName="heart"
        iconPosition="left"
        onPress={() => toggleTcbsTheme()}
      />
    );
  };

Ready-made Theme Modal

You can use the ready-made ThemeModal component provided by @tcbs/react-native-mazic-ui for a user-friendly theme selection dialog. Here is how to use it:

Theme Modal Example
tcbs-cli
import React from 'react';
import { ThemeModal, TcbsButton } from '@tcbs/react-native-mazic-ui';
const MyComponent = () => {
  const [themeModalVisible, setThemeModalVisible] = React.useState(false);
  return (
    <>
      <TcbsButton
        title="No Border"
        variant="no_border"
        onPress={() => setThemeModalVisible(true)}
        iconName="home"
        iconPosition="left"
      />
      <ThemeModal
        visible={themeModalVisible}
        onClose={() => setThemeModalVisible(false)}
      />
    </>
  );
};