Dark Mode

Le dark mode (mode sombre) est devenu un standard du web. De plus en plus de visiteurs naviguent avec le mode sombre active sur leur appareil, et s'attendent à ce que les sites web s'adaptent. Scale Theme propose un dark mode intelligent qui respecte les preferences de vos visiteurs, avec un toggle élégant pour basculer à tout moment.

Pourquoi activer le dark mode ?

Le dark mode n'est pas qu'une question d'esthétique. Il a des avantages concrets :

• Confort visuel : Reduit la fatigue oculaire en navigation nocturne
• Économie de batterie : Sur les écrans OLED/AMOLED (la majorité des smartphones modernes), le dark mode consomme significativement moins de batterie
• Preference utilisateur : Environ 80% des utilisateurs de smartphone utilisent le dark mode au moins une partie du temps
• Impression premium : Un dark mode bien exécute donne une impression de qualité et d'attention au détail

Activation

Le dark mode est désactivé par défaut. Pour l'activer :

1. Allez dans Paramètres du thème (icône engrenage)
2. Cliquez sur Dark Mode
3. Cochez Dark mode active

Comportement par défaut

Ce réglage déterminé quel mode est affiché quand un nouveau visiteur arrive sur votre boutique pour la première fois.

System (recommande)

Le thème détecte automatiquement les preferences du système d'exploitation du visiteur via la media query CSS prefers-color-scheme. Si le visiteur a active le mode sombre sur son appareil (macOS, Windows, iOS, Android), votre boutique s'affiche automatiquement en dark mode.

Avantage : Le visiteur retrouve une expérience cohérente avec le reste de ses apps et sites. Inconvenient : Vous ne contrôlez pas quel mode le visiteur voit en premier.

Light

La boutique s'affiche toujours en mode clair par défaut, quel que soit le réglage système du visiteur. Le toggle reste disponible pour que le visiteur puisse basculer manuellement s'il le souhaite.

Avantage : Vous êtes sur que le visiteur voit d'abord votre design clair (qui est souvent le design principal). Inconvenient : Un visiteur en mode sombre système devra manuellement basculer.

Quand l'utiliser : Si votre identité de marque est fortement associée à une esthétique claire et que vous voulez que tout le monde la voie en premier.

Dark

La boutique s'affiche toujours en mode sombre par défaut. Le toggle reste disponible pour basculer en mode clair.

Avantage : Idéal si votre marque à une identité sombre (mode nocturne, luxe, tech). Inconvenient : Certains visiteurs peuvent être surpris.

Quand l'utiliser : Boutiques de luxe, tech, gaming, ou toute marque dont l'identité visuelle est fondamentalement sombre.

Le toggle dans le header

Quand le dark mode est active, un bouton toggle apparaît dans le header de votre boutique. Il utilise une icône soleil/lune pour permettre au visiteur de basculer à tout moment.

Le toggle est anime avec une transition douce. L'icône pivote et change de forme lors du basculement, créant une micro-interaction agreable.

Persistance du choix

Le choix du visiteur est sauvegarde dans le localStorage de son navigateur. A sa prochaine visite, le mode choisi est restaure automatiquement, même si son réglage système a change entre-temps.

Comportement détaillé :

1. Première visite : Le mode affiché dépend du réglage "Comportement par défaut" (System/Light/Dark)
2. Le visiteur clique sur le toggle : Le mode bascule et le choix est sauvegarde
3. Visites suivantes : Le choix sauvegarde est restaure automatiquement
4. Le visiteur supprime ses cookies/localStorage : Retour au comportement par défaut

Conversion des couleurs

C'est la partie la plus importante : comment Scale Theme convertit vos palettes claires en palettes sombres. Deux modes sont disponibles.

Mode Auto (simple et rapide)

Le mode Auto est le plus simple. Vous définissez une seule palette cible (typiquement une palette sombre), et le thème remplacé automatiquement TOUTES vos palettes par cette palette unique en dark mode.

Comment ça marché :

Mode clair :                    Mode sombre (auto) :
Section 1 : Palette 1 (claire) → Palette 3 (sombre)
Section 2 : Palette 2 (sombre) → Palette 3 (sombre)
Section 3 : Palette 1 (claire) → Palette 3 (sombre)
Section 4 : Palette 4 (accent) → Palette 3 (sombre)
Section 5 : Palette 1 (claire) → Palette 3 (sombre)

Avantages :

• Configuration en 30 secondes : il suffit de créer une belle palette sombre
• Resultat homogene garanti

Inconvenients :

• Toutes les sections ont le même fond sombre : plus de rythme d'alternance
• Pas de nuances entre les sections

Mode Manuel (contrôle total)

Le mode Manuel vous permet de mapper chaque palette claire vers une palette sombre spécifique. Vous gardez ainsi le rythme d'alternance des couleurs en dark mode.

Comment ça marché :

Mode clair :                    Mode sombre (manuel) :
Section 1 : Palette 1 (claire)   → Palette 3 (sombre fonce)
Section 2 : Palette 2 (gris)     → Palette 4 (sombre moyen)
Section 3 : Palette 1 (claire)   → Palette 3 (sombre fonce)
Section 4 : Palette 5 (accent)   → Palette 6 (accent sombre)
Section 5 : Palette 1 (claire)   → Palette 3 (sombre fonce)

Avantages :

• Le rythme visuel d'alternance des palettes est conserve en dark mode
• Vous pouvez créer des nuances de sombre (fond sombre foncé, fond sombre moyen, fond sombre accent)
• Controle total sur chaque section

Inconvenients :

• Configuration plus longue : vous devez créer plusieurs palettes sombres
• Necessite de planifier vos palettes en amont

Comparaison Auto vs Manuel

Bonnes pratiques pour le dark mode

1. Testez vos images

Les images de produits sur fond blanc peuvent sembler "flottantes" sur un fond sombre. Si beaucoup de vos images produit ont un fond blanc, pensez a :

• Utiliser des images avec un fond transparent (PNG)
• Ajouter une bordure subtile autour des images en dark mode (la décoration de medias "Outlined" est parfaite pour ça)

2. Ajustez vos accents

Les couleurs d'accent qui fonctionnent bien sur fond clair peuvent manquer de contraste sur fond sombre. Testez et ajustez :

• Augmentez la saturation de vos accents en dark mode
• Augmentez la luminosite si nécessaire
• Vérifiez toujours le ratio de contraste (minimum 4.5:1 pour le texte)

3. Attention au gradient

Si vous utilisez des degradés de fond, vérifiez qu'ils fonctionnent bien en dark mode. Un degradé blanc vers gris clair n'aura aucun sens sur fond sombre.

4. Le logo

Votre logo est-il lisible en dark mode ? Si votre logo est sombre, il peut devenir invisible sur fond sombre. Solutions :

• Utilisez un logo avec une version claire (Shopify permet de définir un logo transparent)
• Ajoutez un fond ou un contour à votre logo

Configuration complète étape par étape

Setup rapide (mode Auto)

1. Créez une palette sombre (par exemple Palette 3) :

• Background : #121212
• Background secondary : #1E1E1E
• Text : #F0F0F0
• Text secondary : #999999
• Accent 1 : couleur de marque (vive)
• Accent 2 : couleur secondaire (vive)

1. Allez dans Paramètres du thème > Dark Mode

1. Cochez Dark mode active

1. Laissez le comportement sur System

1. En mode de conversion, gardez Auto

1. Sélectionnez votre palette sombre comme Palette cible (Scheme 3)

1. Testez en cliquant sur le toggle dans le header

Setup avance (mode Manuel)

1. Créez 3 palettes sombres (Palettes 3, 4, 6) avec des niveaux de sombre différents

1. Allez dans Paramètres du thème > Dark Mode

1. Cochez Dark mode active

1. Sélectionnez le mode de conversion Manuel

1. Mappez chaque palette :

• Palette 1 (claire) → Palette 3 (sombre foncé)
• Palette 2 (gris) → Palette 4 (sombre moyen)
• Palette 3 → Palette 3 (garde la même)
• Palette 4 → Palette 4 (garde la même)
• Palette 5 (accent) → Palette 6 (accent sombre)
• Palette 6 → Palette 6 (garde la même)

1. Vérifiez chaque section en basculant avec le toggle

Prochaines étapes

• **Couleurs & palettes** — Créez les palettes claires et sombres utilisées par le dark mode
• **Palettes de couleurs (design)** — Comprenez comment les couleurs se propagent dans le thème
• **Typographie** — Vérifiez la lisibilité de vos polices sur fond sombre
• **Décoration des médias** — Ajustez les bordures d'images pour le dark mode