Gseller Theme Color

Componente criado para realizar as mudanças entre modo claro, escuro e sistema

Dependências

Certifique-se de ter as seguintes dependências instaladas:

• @radix-ui/react-dropdown-menu
• @gseller-monorepo/button
• next-themes
• tailwindcss
• postcss
• autoprefixer
• tailwind-merge
• clsx

Instalação

  yarn add @gseller-monorepo/theme
  or
  npm install @gseller-monorepo/theme
  or
  pnpm add @gseller-monorepo/theme

Estrutura de Pastas e Arquivos

A estrutura do projeto é organizada para facilitar a compreensão e manutenção.

Pasta src

Arquivo index.ts

Responsável pela exportação de todos os arquivos necessários para utilização do componente

Arquivo global.css

Arquivo que define os resets e css base para utilização do tailwindcss

Arquivo theme.tsx

Arquivo que contém toda a lógica do componente de tema

Pasta components

Arquivo dropdown-menu.tsx

Arquivo que contém o componente da biblioteca radix-ui e uishadcn

Pasta utils

Arquivo index.ts

Possui a função cn que utiliza da biblioteca clsx e tailwind-merge, para que possamos fazer a interpolação de css, utilizando o classname, sem que haja conflito de classes