Thèmes de La Suite Meet (marque blanche)

Ce dépôt contient les thèmes de La Suite Meet (version 1.34.0) : logo, icônes, couleurs, police, nom de l'application. Un thème appliqué remplace l'apparence d'origine de Meet ; sans thème, Meet reste d'origine. Le dépôt est public : n'y mettre que des logos et des couleurs, rien de secret.

Ce document est la charte : il dit ce qu'on peut changer, dans quel format, et comment procéder. Il s'adresse au graphiste qui prépare les fichiers comme à l'administrateur qui les applique.

Organisation du dépôt

README.md     cette charte
_modele/      modèle à copier pour un nouveau thème (tous les fichiers, commentés, valeurs d'origine de Meet)
nimesys/      thème Nîmesys (exemple réel)
<client>/     un dossier par client

• Un dossier par client ; son nom ne contient que [a-z0-9-] (minuscules, chiffres, tiret).
• Tout est facultatif : un fichier absent = l'élément d'origine de Meet.
• Aucun autre fichier ni sous-dossier que ceux de la charte (sauf fonts/ et un README* à la racine du thème).

Images

Fichier	Où il apparaît	Format exact
logo.svg	en-tête de toutes les pages, fenêtre des réglages, page « Mes réunions »	SVG affiché à 40 px de haut (30 px sur mobile) ; largeur conseillée ≤ 200 px (origine 160×31) ; fond transparent ; texte converti en tracés
favicon.ico	onglet (anciens navigateurs)	ICO contenant 16×16 et 32×32 (contrôlé)
favicon-16x16.png	onglet	PNG 16×16 (contrôlé)
favicon-32x32.png	onglet	PNG 32×32 (contrôlé)
apple-touch-icon.png	écran d'accueil iPhone / iPad	PNG 180×180, fond plein (contrôlé)
android-chrome-192x192.png	appli installée (Android)	PNG 192×192 (contrôlé)
android-chrome-512x512.png	écran de démarrage de l'appli installée	PNG 512×512 (contrôlé)
email-logo.png	en-tête des e-mails de Meet (invitation, enregistrement prêt)	PNG, largeur conseillée ≤ 600 px, ≤ 100 Ko

Le fichier icon.png de Meet n'est utilisé nulle part : hors charte.

Couleurs et police : custom.css

Principe

Le thème redéfinit les variables CSS de Meet dans un bloc :root { … }. Le fichier _modele/custom.css liste chaque variable avec sa valeur d'origine en commentaire : pour changer une couleur, on retire le commentaire de la ligne et on met la nouvelle valeur ; on supprime les lignes qu'on ne change pas. Le thème l'emporte sur Meet car les variables de Meet sont dans une couche CSS de priorité basse (@layer tokens).

Règles

• Police : fichier .woff2 dans fonts/, déclaré par @font-face avec un chemin relatif, puis --fonts-sans :

  @font-face { font-family: "MaPolice"; src: url(fonts/mapolice.woff2) format("woff2"); font-display: swap; }
  :root { --fonts-sans: "MaPolice", sans-serif; }
  

  Si l'utilisateur choisit une police d'accessibilité (Lexend, Atkinson, OpenDyslexic), elle passe devant : c'est voulu.
• Ressources : uniquement des fichiers du dossier du thème, en chemin relatif (contrôlé).
• Contraste texte / fond d'au moins 4,5:1 (RGAA / WCAG AA), y compris pour le focus et les états.
• Non supporté : cibler les classes internes de Meet (générées, elles changent à chaque version).

Groupes de variables

Groupe	Variables	Usage
Couleur principale	--colors-primary, -hover, -active, -text, -warm, -subtle, -subtle-text	boutons principaux, liens, états
Palette principale	--colors-primary-50 … -950, -action	nuances
Palette sombre (salle)	--colors-primary-dark-50 … -950, -action	interface pendant la réunion
Palettes de base	séries blue (base de primary) et gray (fonds et bordures de la salle)	à changer pour une salle cohérente
Neutres	--colors-greyscale-000 … -1000	fonds, textes, séparateurs
Texte, fonds, boîtes	série default, --colors-box-text, -bg, -border	pages claires
Contrôles	--colors-control, -hover, -active, -text, -border, -subtle	boutons secondaires, champs
États	--colors-danger*, --colors-success*, --colors-warning*, --colors-alert, -alert-notification, série error	erreurs, alertes
Focus	--colors-focus-ring	contour clavier (contraste fort)
Police	--fonts-sans	police du texte

Les autres variables (palettes Tailwind : rouge, vert, etc.) existent mais servent rarement directement.

Liste complète des variables (Meet 1.34.0, générée)

Générée par conf/theme_vars.py du paquet à partir du build de Meet ; ne pas modifier à la main.

Variable	Valeur d'origine
--colors-alert	var(--colors-blue-700)
--colors-alert-notification	var(--colors-red-600)
--colors-amber-100	#fef3c7
--colors-amber-200	#fde68a
--colors-amber-300	#fcd34d
--colors-amber-400	#fbbf24
--colors-amber-50	#fffbeb
--colors-amber-500	#f59e0b
--colors-amber-600	#d97706
--colors-amber-700	#b45309
--colors-amber-800	#92400e
--colors-amber-900	#78350f
--colors-amber-950	#451a03
--colors-black	#000
--colors-blue-100	#dbeafe
--colors-blue-200	#bfdbfe
--colors-blue-300	#93c5fd
--colors-blue-400	#60a5fa
--colors-blue-50	#eff6ff
--colors-blue-500	#3b82f6
--colors-blue-600	#2563eb
--colors-blue-700	#1d4ed8
--colors-blue-800	#1e40af
--colors-blue-900	#1e3a8a
--colors-blue-950	#172554
--colors-box-bg	var(--colors-white)
--colors-box-border	var(--colors-gray-300)
--colors-box-text	var(--colors-default-text)
--colors-control	var(--colors-gray-100)
--colors-control-active	var(--colors-gray-300)
--colors-control-border	var(--colors-gray-500)
--colors-control-hover	var(--colors-gray-200)
--colors-control-subtle	var(--colors-gray-400)
--colors-control-text	var(--colors-default-text)
--colors-current	currentColor
--colors-cyan-100	#cffafe
--colors-cyan-200	#a5f3fc
--colors-cyan-300	#67e8f9
--colors-cyan-400	#22d3ee
--colors-cyan-50	#ecfeff
--colors-cyan-500	#06b6d4
--colors-cyan-600	#0891b2
--colors-cyan-700	#0e7490
--colors-cyan-800	#155e75
--colors-cyan-900	#164e63
--colors-cyan-950	#083344
--colors-danger	var(--colors-red-600)
--colors-danger-100	#fee2e2
--colors-danger-200	#fecaca
--colors-danger-300	#fca5a5
--colors-danger-400	#f87171
--colors-danger-50	#fef2f2
--colors-danger-500	#ef4444
--colors-danger-600	#dc2626
--colors-danger-700	#b91c1c
--colors-danger-800	#991b1b
--colors-danger-900	#7f1d1d
--colors-danger-950	#450a0a
--colors-danger-active	var(--colors-red-800)
--colors-danger-hover	var(--colors-red-700)
--colors-danger-subtle	var(--colors-red-100)
--colors-danger-subtle-text	var(--colors-red-700)
--colors-danger-text	var(--colors-white)
--colors-default-bg	white
--colors-default-subtle	var(--colors-gray-100)
--colors-default-subtle-text	var(--colors-gray-600)
--colors-default-text	var(--colors-greyscale-1000)
--colors-emerald-100	#d1fae5
--colors-emerald-200	#a7f3d0
--colors-emerald-300	#6ee7b7
--colors-emerald-400	#34d399
--colors-emerald-50	#ecfdf5
--colors-emerald-500	#10b981
--colors-emerald-600	#059669
--colors-emerald-700	#047857
--colors-emerald-800	#065f46
--colors-emerald-900	#064e3b
--colors-emerald-950	#022c22
--colors-error-100	#261212
--colors-error-200	#6c302e
--colors-error-300	#983533
--colors-error-400	#ca3632
--colors-error-500	#ef413d
--colors-error-600	#ee6a66
--colors-error-700	#f28d8a
--colors-error-800	#f6afad
--colors-error-900	#fad2d1
--colors-error-950	#fff4f4
--colors-focus-ring	#4a79c7
--colors-fuchsia-100	#fae8ff
--colors-fuchsia-200	#f5d0fe
--colors-fuchsia-300	#f0abfc
--colors-fuchsia-400	#e879f9
--colors-fuchsia-50	#fdf4ff
--colors-fuchsia-500	#d946ef
--colors-fuchsia-600	#c026d3
--colors-fuchsia-700	#a21caf
--colors-fuchsia-800	#86198f
--colors-fuchsia-900	#701a75
--colors-fuchsia-950	#4a044e
--colors-gray-100	#f3f4f6
--colors-gray-200	#e5e7eb
--colors-gray-300	#d1d5db
--colors-gray-400	#9ca3af
--colors-gray-50	#f9fafb
--colors-gray-500	#6b7280
--colors-gray-600	#4b5563
--colors-gray-700	#374151
--colors-gray-800	#1f2937
--colors-gray-900	#111827
--colors-gray-950	#030712
--colors-green-100	#dcfce7
--colors-green-200	#bbf7d0
--colors-green-300	#86efac
--colors-green-400	#4ade80
--colors-green-50	#f0fdf4
--colors-green-500	#22c55e
--colors-green-600	#16a34a
--colors-green-700	#15803d
--colors-green-800	#166534
--colors-green-900	#14532d
--colors-green-950	#052e16
--colors-greyscale-000	#fff
--colors-greyscale-100	#eee
--colors-greyscale-1000	#161616
--colors-greyscale-200	#e5e5e5
--colors-greyscale-250	#ddd
--colors-greyscale-300	#cecece
--colors-greyscale-400	#929292
--colors-greyscale-50	#f6f6f6
--colors-greyscale-500	#7c7c7c
--colors-greyscale-600	#666
--colors-greyscale-700	#3a3a3a
--colors-greyscale-750	#353535
--colors-greyscale-800	#2a2a2a
--colors-greyscale-900	#242424
--colors-greyscale-950	#1e1e1e
--colors-indigo-100	#e0e7ff
--colors-indigo-200	#c7d2fe
--colors-indigo-300	#a5b4fc
--colors-indigo-400	#818cf8
--colors-indigo-50	#eef2ff
--colors-indigo-500	#6366f1
--colors-indigo-600	#4f46e5
--colors-indigo-700	#4338ca
--colors-indigo-800	#3730a3
--colors-indigo-900	#312e81
--colors-indigo-950	#1e1b4b
--colors-lime-100	#ecfccb
--colors-lime-200	#d9f99d
--colors-lime-300	#bef264
--colors-lime-400	#a3e635
--colors-lime-50	#f7fee7
--colors-lime-500	#84cc16
--colors-lime-600	#65a30d
--colors-lime-700	#4d7c0f
--colors-lime-800	#3f6212
--colors-lime-900	#365314
--colors-lime-950	#1a2e05
--colors-neutral-100	#f5f5f5
--colors-neutral-200	#e5e5e5
--colors-neutral-300	#d4d4d4
--colors-neutral-400	#a3a3a3
--colors-neutral-50	#fafafa
--colors-neutral-500	#737373
--colors-neutral-600	#525252
--colors-neutral-700	#404040
--colors-neutral-800	#262626
--colors-neutral-900	#171717
--colors-neutral-950	#0a0a0a
--colors-orange-100	#ffedd5
--colors-orange-200	#fed7aa
--colors-orange-300	#fdba74
--colors-orange-400	#fb923c
--colors-orange-50	#fff7ed
--colors-orange-500	#f97316
--colors-orange-600	#ea580c
--colors-orange-700	#c2410c
--colors-orange-800	#9a3412
--colors-orange-900	#7c2d12
--colors-orange-950	#431407
--colors-pink-100	#fce7f3
--colors-pink-200	#fbcfe8
--colors-pink-300	#f9a8d4
--colors-pink-400	#f472b6
--colors-pink-50	#fdf2f8
--colors-pink-500	#ec4899
--colors-pink-600	#db2777
--colors-pink-700	#be185d
--colors-pink-800	#9d174d
--colors-pink-900	#831843
--colors-pink-950	#500724
--colors-primary	var(--colors-blue-700)
--colors-primary-100	#ececfe
--colors-primary-200	#e3e3fb
--colors-primary-300	#cacafb
--colors-primary-400	#8585f6
--colors-primary-50	#f5f5fe
--colors-primary-500	#6a6af4
--colors-primary-600	#313178
--colors-primary-700	#272747
--colors-primary-800	#000091
--colors-primary-900	#21213f
--colors-primary-950	#1b1b35
--colors-primary-action	#1212ff
--colors-primary-active	var(--colors-blue-900)
--colors-primary-dark-100	#2d2d46
--colors-primary-dark-200	#43436a
--colors-primary-dark-300	#5a5a8f
--colors-primary-dark-400	#7070b3
--colors-primary-dark-50	#161622
--colors-primary-dark-500	#8787d7
--colors-primary-dark-600	#9d9ddf
--colors-primary-dark-700	#b3b3e7
--colors-primary-dark-75	#222234
--colors-primary-dark-800	#c9c9ee
--colors-primary-dark-900	#dfdff6
--colors-primary-dark-950	#f5f5fe
--colors-primary-dark-action	#c1c1fb
--colors-primary-hover	var(--colors-blue-800)
--colors-primary-subtle	var(--colors-blue-100)
--colors-primary-subtle-text	var(--colors-blue-700)
--colors-primary-text	var(--colors-white)
--colors-primary-warm	var(--colors-blue-300)
--colors-purple-100	#f3e8ff
--colors-purple-200	#e9d5ff
--colors-purple-300	#d8b4fe
--colors-purple-400	#c084fc
--colors-purple-50	#faf5ff
--colors-purple-500	#a855f7
--colors-purple-600	#9333ea
--colors-purple-700	#7e22ce
--colors-purple-800	#6b21a8
--colors-purple-900	#581c87
--colors-purple-950	#3b0764
--colors-red-100	#fee2e2
--colors-red-200	#fecaca
--colors-red-300	#fca5a5
--colors-red-400	#f87171
--colors-red-50	#fef2f2
--colors-red-500	#ef4444
--colors-red-600	#dc2626
--colors-red-700	#b91c1c
--colors-red-800	#991b1b
--colors-red-900	#7f1d1d
--colors-red-950	#450a0a
--colors-rose-100	#ffe4e6
--colors-rose-200	#fecdd3
--colors-rose-300	#fda4af
--colors-rose-400	#fb7185
--colors-rose-50	#fff1f2
--colors-rose-500	#f43f5e
--colors-rose-600	#e11d48
--colors-rose-700	#be123c
--colors-rose-800	#9f1239
--colors-rose-900	#881337
--colors-rose-950	#4c0519
--colors-sky-100	#e0f2fe
--colors-sky-200	#bae6fd
--colors-sky-300	#7dd3fc
--colors-sky-400	#38bdf8
--colors-sky-50	#f0f9ff
--colors-sky-500	#0ea5e9
--colors-sky-600	#0284c7
--colors-sky-700	#0369a1
--colors-sky-800	#075985
--colors-sky-900	#0c4a6e
--colors-sky-950	#082f49
--colors-slate-100	#f1f5f9
--colors-slate-200	#e2e8f0
--colors-slate-300	#cbd5e1
--colors-slate-400	#94a3b8
--colors-slate-50	#f8fafc
--colors-slate-500	#64748b
--colors-slate-600	#475569
--colors-slate-700	#334155
--colors-slate-800	#1e293b
--colors-slate-900	#0f172a
--colors-slate-950	#020617
--colors-stone-100	#f5f5f4
--colors-stone-200	#e7e5e4
--colors-stone-300	#d6d3d1
--colors-stone-400	#a8a29e
--colors-stone-50	#fafaf9
--colors-stone-500	#78716c
--colors-stone-600	#57534e
--colors-stone-700	#44403c
--colors-stone-800	#292524
--colors-stone-900	#1c1917
--colors-stone-950	#0c0a09
--colors-success	var(--colors-green-700)
--colors-success-100	#dcfce7
--colors-success-200	#bbf7d0
--colors-success-300	#86efac
--colors-success-400	#4ade80
--colors-success-50	#f0fdf4
--colors-success-500	#22c55e
--colors-success-600	#16a34a
--colors-success-700	#15803d
--colors-success-800	#166534
--colors-success-900	#14532d
--colors-success-950	#052e16
--colors-success-active	var(--colors-green-900)
--colors-success-hover	var(--colors-green-800)
--colors-success-subtle	var(--colors-green-100)
--colors-success-subtle-text	var(--colors-green-800)
--colors-success-text	var(--colors-white)
--colors-teal-100	#ccfbf1
--colors-teal-200	#99f6e4
--colors-teal-300	#5eead4
--colors-teal-400	#2dd4bf
--colors-teal-50	#f0fdfa
--colors-teal-500	#14b8a6
--colors-teal-600	#0d9488
--colors-teal-700	#0f766e
--colors-teal-800	#115e59
--colors-teal-900	#134e4a
--colors-teal-950	#042f2e
--colors-transparent	#0000
--colors-violet-100	#ede9fe
--colors-violet-200	#ddd6fe
--colors-violet-300	#c4b5fd
--colors-violet-400	#a78bfa
--colors-violet-50	#f5f3ff
--colors-violet-500	#8b5cf6
--colors-violet-600	#7c3aed
--colors-violet-700	#6d28d9
--colors-violet-800	#5b21b6
--colors-violet-900	#4c1d95
--colors-violet-950	#2e1065
--colors-warning	var(--colors-amber-700)
--colors-warning-active	var(--colors-amber-900)
--colors-warning-hover	var(--colors-amber-800)
--colors-warning-subtle	var(--colors-amber-100)
--colors-warning-subtle-text	var(--colors-amber-700)
--colors-warning-text	var(--colors-white)
--colors-white	#fff
--colors-yellow-100	#fef9c3
--colors-yellow-200	#fef08a
--colors-yellow-300	#fde047
--colors-yellow-400	#facc15
--colors-yellow-50	#fefce8
--colors-yellow-500	#eab308
--colors-yellow-600	#ca8a04
--colors-yellow-700	#a16207
--colors-yellow-800	#854d0e
--colors-yellow-900	#713f12
--colors-yellow-950	#422006
--colors-zinc-100	#f4f4f5
--colors-zinc-200	#e4e4e7
--colors-zinc-300	#d4d4d8
--colors-zinc-400	#a1a1aa
--colors-zinc-50	#fafafa
--colors-zinc-500	#71717a
--colors-zinc-600	#52525b
--colors-zinc-700	#3f3f46
--colors-zinc-800	#27272a
--colors-zinc-900	#18181b
--colors-zinc-950	#09090b
--fonts-mono	Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
--fonts-sans	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
--fonts-serif	ui-serif, Georgia, Cambria, "Times New Roman", Times, serif

Textes : theme.conf

Format cle = valeur, une par ligne ; # en début de ligne = commentaire ; UTF-8 ; sans guillemets. Les valeurs ne peuvent pas contenir les caractères " $ ` \ < > (refusé par le contrôle). Clés inconnues refusées.

Clé	Défaut	Où	Format
title	LaSuite Meet	onglet, en-tête (texte alternatif du logo), salle, page d'enregistrement, permissions, nom et nom court de l'appli installée, « Mes réunions »	texte, conseillé ≤ 30 caractères
theme_color	#ffffff	barre de titre de l'appli installée	#rrggbb (contrôlé)
background_color	#ffffff	écran de démarrage de l'appli installée	#rrggbb (contrôlé)
email_brand	LaSuite Meet	nom de la marque dans les e-mails ; recopié dans le réglage du panneau	texte
email_support	vide	e-mail « enregistrement prêt » seulement (pas l'invitation)	adresse e-mail (contrôlé)

Hors charte (non modifiable sans modifier le code de Meet)

Illustrations et textes de la page d'accueil, textes des e-mails, mise en page, sons, arrière-plans virtuels, pied de page « gouv » (désactivé), balise theme-color du navigateur (absente de Meet).

Créer un thème

1. Copier _modele/ sous le nom du client : cp -r _modele mon-client (nom en [a-z0-9-]+).
2. Supprimer ce qu'on ne change pas ; remplacer les images ; décommenter et adapter les clés de theme.conf et les variables de custom.css.
3. Vérifier le contraste (4,5:1 minimum) sur les couleurs de texte et de fond choisies.
4. Contrôler le dossier avec le script du paquet (conf/theme_check.py) : python3 theme_check.py mon-client depuis le dossier conf/ du paquet. Code de sortie 0 = conforme.

Publier

1. git add mon-client && git commit -m "thème mon-client".
2. Poser un tag par client, une fois le thème validé : <client>-AAAA.MM, par exemple nimesys-2026.10 (git tag nimesys-2026.10).
3. Pousser la branche et le tag. Corriger un thème = nouveau commit + nouveau tag.

Appliquer chez le client

Dans le panneau de configuration de l'application YunoHost :

• réglage « thème » : nom du dossier (ex. nimesys) ; vide = Meet d'origine ;
• réglage « version du thème » : le tag du client (ex. nimesys-2026.10) — recommandé plutôt que main, qui atteindrait le client à la prochaine mise à jour ;
• bouton « Appliquer le thème » : récupère le dépôt, contrôle le thème, puis recompile l'interface (plusieurs minutes, sans coupure de Meet ; en cas d'échec l'ancienne interface reste servie).

À l'installation, la question « Thème » propose le même choix. Pour revenir à l'origine : vider « thème » puis « Appliquer le thème ».

Contrôles automatiques et leurs limites

Le contrôle (theme_check.py, dans le paquet) vérifie :

• Noms : seuls les fichiers de la charte (+ fonts/*.woff2, README*) ; nom de thème en [a-z0-9-]+.
• PNG / ICO : signature et dimensions.
• SVG : liste blanche d'éléments et d'attributs de dessin ; refus de <script>, <foreignObject>, de <style> contenant url(, des attributs on* et de tout lien qui n'est pas une ancre interne #….
• CSS : refus de @import, @namespace, expression(, behavior: et de toute URL qui n'est pas un chemin relatif.
• theme.conf : clés connues, couleurs #rrggbb, adresse e-mail valide, caractères interdits.

Limites : le script ne juge ni le contraste, ni la lisibilité, ni le contenu visuel. Un thème peut toujours tromper visuellement (bandeau, texte ajouté en CSS) : ce sont la revue du dépôt et le tag par client qui en protègent.

Mise à jour de Meet

Une nouvelle version de Meet peut renommer ou supprimer des variables. À chaque changement de version, comparer la liste du build avec cette charte : python3 theme_vars.py <dossier_build> --compare README.md signale les variables disparues ; mettre ensuite à jour _modele/custom.css et la liste ci-dessus (--format md et --format css).