useThemeValue

This hook is used to get the value based on the current theme (light or dark). It takes two arguments: lightValue and darkValue, and returns the value based on the current theme.

Import

import { useThemeValue } from "@aeonkit/react";

Parameters

• lightValue: The value to return when the theme is light.
• darkValue: The value to return when the theme is dark.

Usage

const value = useThemeValue(lightValue, darkValue);

Heads up about the param types

Both lightValue and darkValue should be of the same type. For example, if lightValue is a string, darkValue should also be a string.

The example below shows how to use the useThemeValue hook to get the image based on the current theme of the application. You can pass in any value that you want to change based on the theme.

Example with image paths

const image = useThemeValue('/images/image_light.jpg', '/images/image_dark.jpg)');

Here is another example that shows how to use the useThemeValue hook to get a component based on the current theme of the application.

Example with React components

const color = useThemeValue(<ComponentOne />, <ComponentTwo />);

Returns

The value based on the current theme.