Différences

Ci-dessous, les différences entre deux révisions de la page.

--- front:themes [2025/10/01 10:06] – [Organiser les principaux fichiers CSS] paolo
+++ front:themes [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-# 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".