ForcedSkinForcedSkin
Boutique de thèmesGuide de création

🎨 Guide de création de thèmes

Découvrez le schéma JSON des thèmes ForcedSkin et les règles des champs de palette — concevez des palettes pour n'importe quel site et soumettez-les à la communauté.

Démarrage rapide

Choisissez un mode

Décidez si le thème s'exécute en light (palettes claires) ou dark (palettes sombres).

Renseignez les couleurs

Suivez la spécification des champs ci-dessous — au minimum, toutes les clés requises doivent figurer dans votre JSON.

Soumettre pour validation

Sur la page Thèmes , cliquez sur « Soumettre un thème ». Les admins valident avant publication pour tous.

Champs de couleur

Toutes les entrées de palette doivent être des chaînes hex (#RRGGBB) ou des valeurs CSS rgba(...).

backgroundObligatoire

Fond principal de la page — les thèmes clairs restent proches du blanc, les sombres des neutres profonds. Variable CSS : --color-background

Exemple : #F8FFF8 / #101410

foregroundObligatoire

Texte principal — contraste lisible avec le fond. Variable CSS : --color-foreground

Exemple : #2C3E2C / #E0E0E0

surfaceObligatoire

Remplissage des cartes / panneaux / conteneurs — légèrement relevé par rapport au fond. Variable CSS : --color-surface

Exemple : #F0FFF0 / #1E221E

surfaceMutedFacultatif

Survols atténués / sous-conteneurs décalés par rapport à surface. Variable CSS : --color-surface-muted

Exemple : #F5FDF5 / #161816

borderObligatoire

Filets et séparateurs — généralement des gris peu saturés / tons semi-transparents. Variable CSS : --color-border

Exemple : #D8E8D8 / #333633

mutedObligatoire

Texte secondaire et espaces réservés. Variable CSS : --color-muted

Exemple : #6C7E6C / #A0A0A0

primaryObligatoire

Échelle de marque principale pour boutons / liens / focus — couleur unique ou rampe (50–950). Requiert au moins les teintes 500/600/700. Correspond aux variables CSS --color-primary- plus les jetons de teinte (50–950)

Exemple : { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryFacultatif

Échelles d'accent secondaires pour puces / boutons ghost — structure identique à primary — correspond à --color-secondary- plus les jetons de teinte

Exemple : { "500": "#AAA", ... }

accentFacultatif

Mises en avant, badges, couleurs d'accent — structure identique à primary — correspond à --color-accent- plus les jetons de teinte

Exemple : { "500": "#FFEB3B", ... }

varsFacultatif

Propriétés CSS personnalisées arbitraires — les clés omettent « -- » ; les valeurs sont appliquées telles quelles sur :root

Exemple : { "custom-radius": "8px" }

Échelles de couleur

Les clés JSON primary, secondary et accent acceptent chacun des deux styles d'écriture ci-dessous :

Compact (trois teintes principales)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

Le moteur promeut la teinte 500 comme teinte par défaut ; 600/700 couvrent les états survol/actif.

Échelle complète (50 → 950, onze paliers)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

Publier l'échelle complète donne des transitions tonales plus fluides partout.

Astuce : Les identifiants de teinte suivent les échelles de type Tailwind : 50 est le plus clair, 950 le plus foncé. Les thèmes clairs utilisent surtout 500/600/700 ; les thèmes sombres s'appuient souvent sur 400/500/600.

Exemples complets

🌿 Exemple clair (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 Exemple sombre (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

Variables personnalisées (vars)

Si les jetons par défaut ne suffisent pas, ajoutez des variables CSS supplémentaires sous un nœud vars — omettez le préfixe -- dans chaque clé.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Règles d'identifiant (name)

  • Uniquement des lettres ASCII minuscules, des chiffres et le tiret ( a-z 0-9 - ).
  • Préférez des paires concises « mode-style » comme « dark-ocean » ou « light-sakura ».
  • Les identifiants doivent être uniques globalement — ils ne peuvent plus changer après publication, vérifiez bien avant.
  • Longueur maximale : 50 caractères.

Soumission et validation

🔐 Connectez-vous avant de soumettre.

⏳ Les soumissions sont mises en file — l'équipe répond généralement sous 1 à 3 jours ouvrés.

✅ Les thèmes approuvés apparaissent dans la boutique pour que chacun puisse les ajouter aux favoris.

❌ Couleurs invalides, noms en conflit ou non-respect des règles : rejet — supprimez et soumettez une version corrigée.

🚫 Pas de code malveillant, de contenus haineux ni de palettes visiblement contrefaites.

Prêt ? Rendez-vous dans la boutique de thèmes et publiez votre palette.

🎨 Soumettre un thème