useTheme

The useTheme hook is a powerful tool for managing and accessing the current theme in your React application. It allows you to easily switch between different themes, apply a theme directly, and retrieve various theme-related properties. This hook is particularly useful in applications that support multiple themes, including light, dark, and system-preferred themes.

Usage

First, you need to import the useTheme hook from the kitchn package.

import { useTheme } from "kitchn";

Example

Here is an example of how to use the useTheme hook in a component:

import React from "react";
import { Button, Container, Text,useTheme } from "kitchn";
 
const ThemeSwitcher = () => {
  const { theme, setTheme, resolvedTheme, systemTheme } = useTheme();
 
  return (
    <Container>
      <Text>Current Theme: {resolvedTheme}</Text>
      <Text>System Theme: {systemTheme}</Text>
      <Button onClick={() => setTheme('light')}>Switch to Light Theme</Button>
      <Button onClick={() => setTheme('dark')}>Switch to Dark Theme</Button>
      <Button onClick={() => setTheme('system')}>Use System Theme</Button>
    </Container>
  );
};

Parameters

The useTheme hook does not accept any parameters.

Return Value

The useTheme hook returns an object containing the following properties and functions: