Back to flin
flin

Bascule de thème et mode sombre

Comment le système de thèmes de FLIN supporte les modes clair, sombre et préférence système -- avec des transitions fluides, des préférences persistantes et une intégration sans configuration à travers tous les composants FlinUI.

Juste A. Gnimavo (Thales) & Claude | March 26, 2026 1 min flin
EN/ FR/ ES
flinthemedark-modetoggle

Le mode sombre est passé d'une préférence de niche pour développeurs à une attente mainstream. FLIN a construit un système de thème complet : trois modes (clair, sombre, système), détection automatique de la préférence système, préférence utilisateur persistante via localStorage, transitions CSS fluides et application automatique à tous les plus de 365 composants FlinUI sans aucune configuration par composant.

Le ThemeProvider met à jour les CSS custom properties sur l'élément racine. Quand --flin-bg-primary change, chaque élément qui utilise var(--flin-bg-primary) dans ses styles se met à jour automatiquement. Le navigateur gère cela nativement -- pas d'itération JavaScript sur les éléments, pas de diffing de virtual DOM, pas de re-rendu de composants.

Zéro re-rendu de composants. Le moteur CSS du navigateur fait tout le travail.


Ceci est la partie 93 de la série "How We Built FLIN".

Navigation de la série : - [92] Attribute Reactivity - [93] Theme Toggle and Dark Mode (vous êtes ici) - [94] The Raw Tag: Escape Hatch for HTML - [95] 151 FlinUI Components Built by AI Agents

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude zerosuite

Ça marche, et ce n'est pas fini

Le dirigeant a parcouru lui-même tous les canaux de senndo — cinq canaux, à l'unité et en campagne, l'import, les statistiques, un remboursement, l'API — et tout a répondu. Le fichier de pilotage disait toujours non, et la seule ligne qui bloquait n'était pas du code : c'était un document qui avait discrètement cessé d'être vrai. Quatre affirmations vraies à l'écriture et fausses à la lecture, et les gardes lisibles par une machine qui attrapent désormais chacune de ces formes.

13 min Sep 14, 2026
senndocpaaslaunch-readinessdocumentation +8
Thales & Claude zerosuite

Le navigateur entre les mains de Claude : piloter le Chrome du dirigeant

Claude-in-Chrome permet à une session Claude Code de piloter le vrai navigateur du dirigeant — même profil, mêmes sessions ouvertes. Ce que l'outil fait réellement, pourquoi il vaut mieux que de demander à un humain de cliquer et de rapporter, et où l'humain garde l'avantage. Ancré dans le jour où Claude a conduit un parcours client complet dans la console de production de senndo, messages facturés compris.

9 min Aug 18, 2026
claude-in-chromebrowser-automationclaude-codeclaude-fable-5 +9
Thales & Claude deblo

Le segfault qui n'était pas le nôtre : livrer le tracking du jour de lancement de Déblo la nuit du lancement — analytics conditionnées par l'environnement, attribution native des stores, trois bugs que le compilateur ne pouvait pas voir, et un build à court de mémoire que nous avons diagnostiqué au lieu de le rétablir

Le 1er juillet 2026 — jour de lancement — le risque n'a jamais été le texte. C'était les campagnes payantes qui partaient à l'aveugle. Voici le build-log de la livraison des analytics et de l'attribution d'installation de Déblo sous forme de code, la nuit du lancement : des tags GA4, Meta et LinkedIn conditionnés par l'environnement, qui se déploient sans risque avant même que les comptes publicitaires existent ; une attribution routée par les canaux natifs des stores plutôt que par le pixel web ; un audit adverse qui a attrapé trois bugs que le typecheck et le build passaient tous les deux ; et un déploiement Easypanel qui a segfaulté au premier build — que nous avons prouvé ne pas venir de notre code avant d'en changer une seule ligne.

18 min Jul 1, 2026
deblolaunch-dayclaude-opus-4.8claude-code +26