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">My simple app</Title>
<Alert appearance="primary" title="Hello world">
This is a simple alert to show Nimbus components
<Button onClick={onClickButton}>Click me</Button>
</Alert>
<Card>
<Text fontSize="base">
This is a sample paragraph inside a Card component.
</Text>
</Card>
</Box>
</ThemeProvider>
);
};
export default MyApp;