Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:themes [2025/10/01 09:39] – [Faire un fichier thème] paolofront:themes [2025/10/01 10:07] (Version actuelle) – [Faire un fichier thème] paolo
Ligne 11: Ligne 11:
 ### Organiser les principaux fichiers CSS ### 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. +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:+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.+  * ''theme.css'' dans lequel les variables css sont définies.
  
 ``` ```
-/* assets/styles/theme.css */+/* src/assets/styles/theme.css */
  
 @theme { @theme {
Ligne 26: Ligne 26:
 ``` ```
  
-  * ''base.css'' où les règles **CSS** générales de notre application sont définies.+  * ''base.css'' où les règles css générales de notre application sont définies.
  
 ``` ```
-/* assets/styles/base.css */+/* src/assets/styles/base.css */
  
 @layer base { @layer base {
Ligne 45: Ligne 45:
 ``` ```
  
-  * ''style.css'' qui joue le rôle de point d'entrée de tous les fichiers **CSS**.+  * ''style.css'' qui joue le rôle de point d'entrée de tous les fichiers css.
  
 ``` ```
-/* assets/styles/style.css */+/* src/assets/styles/style.css */
  
 @import "tailwindcss"; @import "tailwindcss";
Ligne 62: Ligne 62:
 ### Faire un fichier thème ### 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.+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"; @import "tailwindcss";
  
 @theme { @theme {
-    --color-primary: #5fbabf; +    --color-primary: var(--color-blue-500); 
-    --color-secondary: #fc8c8c;+    --color-secondary: var(--color-red-500);
 } }
  
Ligne 77: Ligne 79:
     }     }
 } }
 +```
 +
 +### 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".