Thématisation

Vous pouvez exploiter la puissance de notre thème pour personnaliser l'interface du panier. Il s'agit d'un moyen simple et efficace de modifier en toute confiance une partie fréquemment personnalisée de l'interface de Snipcart.

Cette fonctionnalité a été introduite dans la version 3.2.0 de Snipcart. Elle n'est pas disponible dans les versions précédentes.

Comment ça marche

Nous utilisons maintenant un ensemble de propriétés CSS personnalisées (variables) dans le style de notre application. Ces variables ont toutes une valeur par défaut qui est utilisée comme valeur de remplacement (thème par défaut) si vous ne l'avez pas déclarée dans vos propres styles.

Ex. : color: var(--color-link, blue); sera blue si aucun --color-link n'est déclaré.

Couleurs

Les couleurs sont l'une des parties les plus fréquemment personnalisées de notre application. Notre thème offre un ensemble complet de variables de couleur permettant de modifier l'ensemble du schéma de couleurs de l'application. Comme vous le verrez ci-dessous, les composants essentiels de l'application, tels que les entrées, les boutons et les liens, bénéficient d'un contrôle accru.

Liste des variables de couleur (par composant) :

Boutons
Liens
Entrées
Badges
Global

Boutons

Il y a 3 styles de boutons :

Primaire
Secondaire
Danger

Chaque type de bouton possède 7 états :

Défaut
Survolé
Actif
Focus
Désactivé
Succès
Erreur

Il est possible de personnaliser la couleur, la couleur de la bordure et la couleur de fond pour chaque style et chaque état. Quelques états disposent également d'une propriété shadow pour personnaliser l'ombre de la boîte du bouton.

Voici un exemple avec le bouton primaire :

/* Default */
--color-buttonPrimary
--borderColor-buttonPrimary
--bgColor-buttonPrimary

/* Hover */
--color-buttonPrimary-hover
--borderColor-buttonPrimary-hover
--bgColor-buttonPrimary-hover
--shadow-buttonPrimary-hover

/* Active */
--color-buttonPrimary-active
--borderColor-buttonPrimary-active
--bgColor-buttonPrimary-active
--shadow-buttonPrimary-active

/* Focus */
--color-buttonPrimary-focus
--borderColor-buttonPrimary-focus
--bgColor-buttonPrimary-focus
--shadow-buttonPrimary-focus

/* Disabled */
--color-buttonPrimary-disabled
--borderColor-buttonPrimary-disabled
--bgColor-buttonPrimary-disabled

/* Success */
--color-buttonPrimary-success
--borderColor-buttonPrimary-success
--bgColor-buttonPrimary-success

/* Error */
--color-buttonPrimary-error
--borderColor-buttonPrimary-error
--bgColor-buttonPrimary-error

Ces mêmes variables sont disponibles pour les autres styles de boutons en remplaçant buttonPrimary par buttonSecondary ou buttonDanger.

Liens

Le composant lien a 4 états :

Défaut
Survolé
Actif
Focus

Il est possible de personnaliser la couleur, la couleur de la bordure et la couleur de l'arrière-plan pour chaque état. L'état focus possède également une propriété shadow pour personnaliser l'ombre de la boîte du lien.

/* Default */
--color-link
--borderColor-link
--bgColor-link

/* Hover */
--color-link-hover
--borderColor-link-hover
--bgColor-link-hover

/* Active */
--color-link-active
--borderColor-link-active
--bgColor-link-active

/* Focus */
--color-link-focus
--borderColor-link-focus
--bgColor-link-focus
--shadow-link-focus

Entrées

Il y a 4 parties dans nos composants d'entrée :

Entrée
Étiquette
Icône
Valeur de remplacement

Ils partagent tous ces états, ou un sous-ensemble de ceux-ci :

Défaut
Survolé
Focus
Désactivé
Vérifié
Erreur
Remplissage automatique

/* ----------------------- 
    PART: Input
----------------------- */

--color-input
--borderColor-input
--bgColor-input

/* Hover */
--color-input-hover
--borderColor-input-hover
--bgColor-input-hover
--shadow-input-hover

/* Focus */
--color-input-focus
--borderColor-input-focus
--bgColor-input-focus
--shadow-input-focus

/* Checked */
--color-input-checked
--borderColor-input-checked
--bgColor-input-checked
--shadow-input-checked

/* Disabled */
--color-input-disabled
--borderColor-input-disabled
--bgColor-input-disabled

/* Error */
--color-input-error
--borderColor-input-error
--bgColor-input-error

/* Autofill */
--bgColor-input-autofill

/* ----------------------- 
    PART: Label
----------------------- */

--color-inputLabel

/* Hover */
--color-inputLabel-hover

/* Focus */
--color-inputLabel-focus

/* ----------------------- 
    PART: Icon
----------------------- */

--color-inputIcon

/* Hover */
--color-inputIcon-hover

/* Focus */
--color-inputIcon-focus

/* Checked */
--color-inputIcon-checked

/* Disabled */
--color-inputIcon-error

/* -----------------------
    PART: Placeholder
----------------------- */

--color-inputPlaceholder

Badges

Les badges ont 3 états :

Défaut (terminé)
Actif
Désactivé

Il est possible de modifier la couleur, la couleur de la bordure et la couleur de l'arrière-plan pour chacun de ces états.

/* Default (completed) */
--color-badge
--borderColor-badge
--bgColor-badge

/* Active */
--color-badge-active
--borderColor-badge-active
--bgColor-badge-active

/* Disabled */
--color-badge-disabled
--borderColor-badge-disabled
--bgColor-badge-disabled

Global

Quelques autres variables sont utilisées pour appliquer des couleurs au reste de l'application. Plus la fonction de thème est intégrée à notre application, plus ces variables seront organisées.

/* Default */
--color-default
--borderColor-default
--bgColor-default

/* Alt */
--color-alt
--bgColor-alt

/* Icon */
--color-icon

/* Success */
--color-success
--bgColor-success

/* Error */
--color-error
--borderColor-error
--bgColor-error

/* Info */
--bgColor-info

/* Modal */
--bgColor-modal
--bgColor-modalVeil

Exemple (thème sombre)

Voici un exemple de personnalisation du thème de couleur pour une version sombre de notre application. Il utilise toutes les variables actuellement disponibles.

#snipcart {
    /* ----------------- 
        Colors
    ----------------- */
    --color-default: hsl(0, 0%, 90%);
    --color-alt: hsl(0, 0%, 50%);
    --color-icon: hsl(200, 90%, 40%);
    --color-success: hsl(144, 50%, 55%);
    --color-error: hsl(6, 55%, 60%);

    --color-link: hsl(220, 70%, 55%);
    --color-link-hover: hsl(220, 70%, 65%);
    --color-link-active: var(--color-link);
    --color-link-focus: var(--color-link);

    --color-input: var(--color-default);
    --color-input-hover: var(--color-input);
    --color-input-focus: var(--color-input);
    --color-input-checked: var(--color-input);
    --color-input-disabled: var(--color-alt);
    --color-input-error: var(--color-error);
    --color-inputLabel: var(--color-default);
    --color-inputLabel-hover: var(--color-inputLabel);
    --color-inputLabel-focus: var(--color-inputLabel);
    --color-inputIcon: var(--color-alt);
    --color-inputIcon-hover: var(--color-default);
    --color-inputIcon-focus: var(--color-inputIcon);
    --color-inputIcon-checked: var(--color-default);
    --color-inputIcon-error: var(--color-error);
    --color-inputPlaceholder: var(--color-alt);

    --color-buttonPrimary: var(--color-default);
    --color-buttonPrimary-hover: hsl(0, 0%, 100%);
    --color-buttonPrimary-active: var(--color-buttonPrimary);
    --color-buttonPrimary-focus: var(--color-buttonPrimary);
    --color-buttonPrimary-disabled: var(--color-alt);
    --color-buttonPrimary-success: var(--color-buttonPrimary);
    --color-buttonPrimary-error: var(--color-buttonPrimary);

    --color-buttonSecondary: var(--color-icon);
    --color-buttonSecondary-hover: hsl(200, 90%, 50%);
    --color-buttonSecondary-active: var(--color-buttonSecondary);
    --color-buttonSecondary-focus: var(--color-buttonSecondary);
    --color-buttonSecondary-disabled: hsl(210, 10%, 25%);
    --color-buttonSecondary-success: var(--color-success);
    --color-buttonSecondary-error: var(--color-error);

    --color-buttonDanger: var(--color-error);
    --color-buttonDanger-hover: hsl(6, 55%, 70%);
    --color-buttonDanger-active: var(--color-buttonDanger);
    --color-buttonDanger-focus: var(--color-buttonDanger);
    --color-buttonDanger-disabled: hsl(210, 10%, 25%);
    --color-buttonDanger-success: var(--color-default);
    --color-buttonDanger-error: var(--color-default);

    --color-badge: var(--color-link);
    --color-badge-active: var(--color-link);
    --color-badge-disabled: var(--color-alt);

    /* ----------------- 
        Border colors
    ----------------- */
    --borderColor-default: hsla(0, 0%, 100%, 10%);
    --borderColor-error: hsl(6, 55%, 30%);

    --borderColor-link: currentColor;
    --borderColor-link-hover: currentColor;
    --borderColor-link-active: currentColor;
    --borderColor-link-focus: currentColor;

    --borderColor-input: hsla(0, 0%, 100%, 10%);
    --borderColor-input-hover: hsl(200, 90%, 40%);
    --borderColor-input-focus: var(--borderColor-input-hover);
    --borderColor-input-checked: var(--borderColor-input-hover);
    --borderColor-input-disabled: hsl(210, 10%, 20%);
    --borderColor-input-error: var(--borderColor-error);

    --borderColor-buttonPrimary: transparent;
    --borderColor-buttonPrimary-hover: transparent;
    --borderColor-buttonPrimary-focus: transparent;
    --borderColor-buttonPrimary-disabled: transparent;
    --borderColor-buttonPrimary-success: transparent;
    --borderColor-buttonPrimary-error: transparent;

    --borderColor-buttonSecondary: transparent;
    --borderColor-buttonSecondary-hover: transparent;
    --borderColor-buttonSecondary-focus: transparent;
    --borderColor-buttonSecondary-disabled: transparent;
    --borderColor-buttonSecondary-success: transparent;
    --borderColor-buttonSecondary-error: transparent;

    --borderColor-badge: transparent;
    --borderColor-badge-active: transparent;
    --borderColor-badge-disabled: transparent;

    /* ----------------- 
        Background colors
    ----------------- */
    --bgColor-default: hsl(210, 10%, 11%);
    --bgColor-alt: hsl(210, 10%, 9%);
    --bgColor-success: hsl(144, 70%, 15%);
    --bgColor-error: hsl(6, 50%, 15%);
    --bgColor-info: hsl(210, 55%, 15%);

    --bgColor-modal: hsl(210, 10%, 7%);
    --bgColor-modalVeil: hsla(210, 10%, 7%, .75);

    --bgColor-link: none;
    --bgColor-link-hover: none;
    --bgColor-link-active: none;
    --bgColor-link-focus: hsl(210, 55%, 10%);

    --bgColor-input: hsl(210, 10%, 10%);
    --bgColor-input-hover: var(--bgColor-input);
    --bgColor-input-focus: var(--bgColor-input);
    --bgColor-input-checked: var(--borderColor-input-hover);
    --bgColor-input-disabled: hsl(210, 10%, 14%);
    --bgColor-input-error: var(--bgColor-input);
    --bgColor-input-autofill: hsl(210, 60%, 15%);

    --bgColor-buttonPrimary: hsl(220, 70%, 22%);
    --bgColor-buttonPrimary-hover: hsl(220, 70%, 30%);
    --bgColor-buttonPrimary-active: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-focus: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-disabled: hsl(210, 10%, 25%);
    --bgColor-buttonPrimary-success: hsl(144, 66%, 30%);
    --bgColor-buttonPrimary-error: hsl(6, 60%, 35%);

    --bgColor-buttonSecondary: var(--bgColor-info);
    --bgColor-buttonSecondary-hover: hsl(210, 60%, 18%);
    --bgColor-buttonSecondary-active: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-focus: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonSecondary-success: var(--bgColor-success);
    --bgColor-buttonSecondary-error: var(--bgColor-error);

    --bgColor-buttonDanger: var(--bgColor-error);
    --bgColor-buttonDanger-hover: hsl(6, 50%, 18%);
    --bgColor-buttonDanger-active: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-focus: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonDanger-success: hsl(144, 66%, 30%);
    --bgColor-buttonDanger-error: hsl(6, 60%, 35%);

    --bgColor-badge: hsl(210, 55%, 10%);
    --bgColor-badge-active: hsl(210, 60%, 15%);
    --bgColor-badge-disabled: hsl(210, 10%, 11%);

    /* ----------------- 
        Shadows
    ----------------- */

    --shadow-default: 0px 20px 24px -20px hsla(0, 0%, 0%, .5);
    --shadow-tooltip: 0px 8px 16px hsla(220, 70%, 22%, .5);

    --shadow-link-focus: 0px 6px 4px -3px hsla(200, 90%, 40%, .5);

    --shadow-input-hover: none;
    --shadow-input-focus: 0px 5px 10px -3px hsla(200, 90%, 40%, .3);
    --shadow-input-checked: none;

    --shadow-buttonPrimary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .5);
    --shadow-buttonPrimary-active: none;
    --shadow-buttonPrimary-focus: 0px 0px 6px 2px hsl(200, 90%, 40%);

    --shadow-buttonSecondary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .2);
    --shadow-buttonSecondary-active: none;
    --shadow-buttonSecondary-focus: 0px 0px 6px 2px hsla(200, 90%, 40%, .8);

    --shadow-buttonDanger-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .25);
    --shadow-buttonDanger-active: none;
    --shadow-buttonDanger-focus: 0px 0px 6px 2px hsla(6, 55%, 60%);
}

La suite

Les couleurs étaient notre priorité pour le thème. Nous sommes impatients d'ajouter d'autres types de personnalisation en fonction de vos commentaires.

Support des navigateurs

Tous les principaux navigateurs prennent en charge les variables CSS. Notre implémentation se rabat sur notre thème par défaut lorsque les variables CSS ne sont pas prises en charge. Les utilisateurs des anciens navigateurs pourront toujours profiter de l'expérience par défaut.