Temas
Una guía para instalar el soporte de Nimbus para temas nativos.
Actualmente Nimbus ofrece dos temas de forma nativa: light y dark. Para poder utilizar los temas en una aplicación y poder alternar entre ellos es necesario utilizar el componente ThemeProvider que se encuentra en la librería de @nimbus-ds/styles. Este componente brinda la posibilidad de implementar temas en las aplicaciones, ofreciendo así la posibilidad de alternar entre los distintos temas que ofrece Nimbus.
En el caso de no utilizar el componente ThemeProvider, el tema default será el light. Para poder utilizar este tema no es necesario realizar ningún paso adicional, sólo seguir la guía que se encuentra en Getting Started.
Para implementar este componente en un proyecto, seguir los siguientes pasos:
npm install @nimbus-ds/stylesEs necesario importar las hojas de estilos de cada tema, para lograr alternar entre ellos.
// App.tsx
import React from "react";
import "@nimbus-ds/styles/dist/index.css";
import "@nimbus-ds/styles/dist/themes/dark.css"; // Importamos la hoja de estilos del tema 'dark'.
import { ThemeProvider } from "@nimbus-ds/styles"; // Importamos el componente ThemeProvider.
import { Title, Card, Text, Button, Alert, Box } from "@nimbus-ds/components";
const MyApp: React.FC = () => {
const onClickButton = () => {
alert("hello world!");
}
return (
<ThemeProvider theme="dark"> {/* Implementamos el componente con el tema que queremos usar. */}
<Box display="flex" flexDirection="column" gap={4}>
<Title as="h1">Mi app simple</Title>
<Alert appearance="primary" title="Hola mundo">
Esta es una alerta simple para mostrar componentes de Nimbus
<Button onClick={onClickButton}>Hacé clic</Button>
</Alert>
<Card>
<Text fontSize="base">
Este es un párrafo de ejemplo dentro de un componente Card.
</Text>
</Card>
</Box>
</ThemeProvider>
);
};
export default MyApp;