---
title: "Colores y temas en React"
slug: "react-theme"
category: "Themes"
hosts: "react"
locale: "es"
reactExample: "recipe-table-look.tsx"
---

# Colores y temas en React

Deriva los colores del widget del tema de tu aplicación React. Los campos de estilo disponibles cambian por widget: Table usa entre otros `styles`, `header` y colores de celda; Button usa colores directos en `data`.

## Un conjunto de color compartido

```tsx
import { useState } from 'react';
import { ArcWidgetTable } from '@arcrider/arcwidgets-react';
export default function Example() {
  const [dark, setDark] = useState(false);
  return (
    <>
      <button onClick={() => setDark((d) => !d)}>Farbschema wechseln</button>
      <ArcWidgetTable
        data={{
          height: '260px',
          styles: {
            backgroundColor: dark ? '#202124' : '#ffffff',
            fontColor: dark ? '#ffffff' : '#202124',
            borders: {
              outer: true,
              columns: false,
              rows: true,
              color: '#737373',
            },
          },
          header: {
            columns: [
              {
                title: 'Aufgabe',
                width: 'fraction',
              },
            ],
          },
          table: [
            {
              id: 'a',
              columns: [
                {
                  value: 'Entwurf prüfen',
                  width: 'fraction',
                },
              ],
            },
          ],
        }}
      />
    </>
  );
}
```

## Superficies combinadas

Pasa el mismo conjunto de color también a contenidos JSX como badges, botones y barras de progreso. Un interruptor de modo oscuro exterior no sobrescribe automáticamente todos los colores explícitos del widget. Revisa contraste y estados de hover, selección y vacío.

La colección histórica de temas para otras plataformas no es un conjunto de componentes React importables. Este patrón funciona sin exports extra de tema.