Temas

Um guia para instalar o suporte do Nimbus para temas nativos.

Implementando temas

Atualmente, Nimbus oferece dois temas nativamente: light e dark. Para utilizar os temas em uma aplicação e alternar entre eles, é necessário usar o componente ThemeProvider que se encontra na biblioteca @nimbus-ds/styles. Este componente permite a implementação de temas nas aplicações, oferecendo a possibilidade de alternar entre os diferentes temas oferecidos pelo Nimbus.

Se o componente ThemeProvider não for utilizado, o tema padrão será o light. Para usar este tema, não é necessário nenhum passo adicional, basta seguir o guia encontrado em Getting Started.

Para implementar este componente em um projeto, siga os passos a seguir:

Instalar os pacotes necessários

npm install @nimbus-ds/styles

Implementar os componentes e estilos

É necessário importar as folhas de estilo de cada tema, para poder alternar entre eles.

// App.tsx
import React from "react";
import "@nimbus-ds/styles/dist/index.css";
import "@nimbus-ds/styles/dist/themes/dark.css"; // Importamos a folha de estilo do tema 'dark'.

import { ThemeProvider } from "@nimbus-ds/styles"; // Importamos o 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 o componente com o 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;