# Thèmes

Documentation [Tailwind CSS](https://tailwindcss.com/)

Vous avez dû le remarquer mais tous les composants qui vous ont été présentés sont stylisés avec des classes utilitaires. Celles-ci proviennent de la lib **Tailwind CSS**. C’est grâce à cet outil que nous allons construire et personnaliser le thème de notre application

Si vous ne connaissez pas cette lib, nous vous conseillons vivement d'aller jeter un coup d'oeil à la documentation avant toute chose.

Si vous souhaitez ne pas utiliser **Tailwind CSS**, veuillez vous référer à la documentation de l'astuce **Retirer Tailwind CSS du projet**.
.
### Organiser les principaux fichiers CSS

Les principaux fichiers css sont stockés dans ''assets/styles''. Ils seront "la base" de notre stylisation (variables css, classes, éléments, règle générale, ..., par défaut). Quant aux thèmes, ils rajoutent une couche à ces fichiers et les modifient. 

Nous pourrions avoir dans le dossier style un seul fichier css mais il vaut mieux organiser tout ça, comme ci-dessous par exemple:

  * ''theme.css'' dans lequel les variables css sont définies.

```
/* src/assets/styles/theme.css */

@theme {
    --color-primary: #5fbabf;
    --color-secondary: #fc8c8c;
}
```

  * ''base.css'' où les règles css générales de notre application sont définies.

```
/* src/assets/styles/base.css */

@layer base {
    * {
        @apply box-border p-0 m-0;
        -ms-overflow-style: none;
        scrollbar-width: none;

    }

    *::-webkit-scrollbar {
         display: none;
    }
}
```

  * ''style.css'' qui joue le rôle de point d'entrée de tous les fichiers css.

```
/* src/assets/styles/style.css */

@import "tailwindcss";

@layer theme, base;

@import "./theme.css" layer(theme);
@import "./base.css" layer(base);
```

Ceci est une organisation comment une autre mais qui reste conventionnelle. Vous serez sûrement amené à la modifier selon vos besoins
.
### Faire un fichier thème

Les thèmes sont rangés dans ''assets/themes''. De la même manière que la "base" css, un "thème" peut se décliner en plusieurs fichiers ou en un seul.

```
/* src/assets/themes/smart-maker.theme.css */

@import "tailwindcss";

@theme {
    --color-primary: var(--color-blue-500);
    --color-secondary: var(--color-red-500);
}

@layer base {
    button {
        @apply shadow-md;
    }
}
```

### Importer les fichiers CSS

Les fichiers css sont importés dans ''main.jsx''.

```
// src/main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import "./assets/styles/style.css";
import "./assets/themes/smart-maker.theme.css";

import { App } from "./App";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

Dans cet exemple, le fichier thème est importé en second afin qu'il puisse influé sur le style de "base".