@nextui-org/theme

Custom Theme Creation

This feature allows developers to create custom themes by defining their own color schemes, typography, and other design tokens. The `createTheme` function is used to generate a theme object that can be applied to the application.

import { createTheme } from '@nextui-org/theme';

const myTheme = createTheme({
  type: 'dark',
  theme: {
    colors: {
      primary: '#ff4ecd',
      secondary: '#fefefe',
      background: '#000000'
    }
  }
});

Theme Provider

The `NextUIProvider` component is used to apply the custom theme to the entire application. By wrapping the application with `NextUIProvider` and passing the custom theme, all components within the application will adhere to the defined theme.

import { NextUIProvider } from '@nextui-org/react';
import { myTheme } from './myTheme';

function App() {
  return (
    <NextUIProvider theme={myTheme}>
      <YourComponent />
    </NextUIProvider>
  );
}

Using Theme Tokens

This feature allows developers to use theme tokens in their styled components. By using the `styled` function and referencing theme tokens (e.g., `$primary`, `$secondary`), developers can ensure that their components are consistent with the defined theme.

import { styled } from '@nextui-org/react';

const Button = styled('button', {
  backgroundColor: '$primary',
  color: '$secondary',
  padding: '10px 20px',
  borderRadius: '5px'
});