Styles et couleurs

Hyvor Talk est conçu pour être personnalisable. Tous les embeds utilisent les styles et couleurs que vous définissez dans Console → Paramètres → Apparence.

1. Palettes (clair et sombre)

Hyvor Talk facilite la configuration de deux palettes de couleurs pour les thèmes clair et sombre. Si votre site web n'a qu'un seul thème, utilisez simplement la palette claire et ignorez la palette sombre.

Une fois les deux palettes configurées, il existe deux façons de choisir celle à utiliser dans les embeds :

• Depuis la console (statique)
• Depuis l'embed (dynamique)

Depuis la console

Le moyen le plus simple de choisir un thème de couleurs par défaut est d'utiliser le paramètre de la console.

Depuis l'embed

Tous les embeds prennent en charge un attribut colors pour définir le thème de couleurs. Il est préférable de l'utiliser si vous souhaitez définir le thème de couleurs de façon dynamique.

<hyvor-talk-comments colors="dark"></hyvor-talk-comments>

Thème du système d'exploitation

Définir colors="os" choisira automatiquement le thème de couleurs en fonction du thème du système d'exploitation de l'utilisateur.

<hyvor-talk-comments colors="os"></hyvor-talk-comments>

Bouton de changement de thème

Si votre site web a un bouton de changement de thème, vous aurez besoin de JavaScript personnalisé pour demander à Hyvor Talk de changer de thème de couleurs lorsque l'utilisateur clique sur le bouton. Voici un exemple hypothétique (notez que ce code dépend fortement de la structure de votre site web) :

const button = document.querySelector('#theme-switch-button');
const comments = document.querySelector('hyvor-talk-comments');
button.addEventListener('click', () => {
	const colors = button.classList.contains('dark') ? 'light' : 'dark';
	comments.setAttribute('colors', colors);
});

2. Variables CSS

Lorsqu'un embed est chargé, Hyvor Talk convertit les couleurs que vous avez définies dans la console en variables CSS, comme indiqué ci-dessous :

:root {
	/* colors */
	--ht-color-text: #000000;
	--ht-color-accent: #000000;
	--ht-color-accent-text: #000000;
	--ht-color-box: #000000;
	--ht-color-box-text: #000000;
	--ht-color-box-text-light: #0000000;
	--ht-color-input: #000000;

	/* other styles */
	--ht-box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.05);
	--ht-box-radius: 10px;
	--ht-box-border: 1px solid transparent;
	--ht-button-radius: 10px;
}

Notez que ces variables sont globales. Elles seront donc utilisées par tous les embeds de la page, si vous avez plusieurs embeds.

Étendre les variables CSS

Vous pouvez étendre les variables CSS pour ajouter davantage de personnalisation. Vous pouvez ajouter ces styles au CSS de votre site web, car les variables traversent le shadow DOM.

hyvor-talk-comments {
	--ht-color-accent: #ffd969;
}

Styles hérités

Par défaut, Hyvor Talk hérite des styles suivants de votre site web pour que les embeds s'intègrent à votre site :

• color (couleur du texte)
• font-family
• font-size
• line-height

3. CSS personnalisé

Les embeds Hyvor Talk sont protégés par le shadow DOM. Il garantit que les styles de votre site web ne se propagent pas dans les embeds (à l'exception des styles hérités).

Vous pouvez définir du CSS personnalisé dans les embeds suivants, dans la console.

• <hyvor-talk-comments> : Paramètres → Commentaires → CSS personnalisé
• <hyvor-talk-newsletter> : Paramètres → Newsletter → CSS personnalisé

Utilisez @import si vous avez besoin de plus d'espace

Tous les champs de CSS personnalisé sont limités à un certain nombre de caractères. Si vous avez besoin de plus d'espace, n'hésitez pas à utiliser une instruction @import pour importer un fichier CSS externe.

Injecter du CSS personnalisé

Pour les embeds qui n'ont pas de champ de CSS personnalisé, vous pouvez injecter du CSS personnalisé dans le shadow DOM à l'aide de JavaScript.

const commentCount = document.querySelector('hyvor-talk-comment-count');
const style = document.createElement('style');
style.textContent = `
	/* your custom css */
`;
commentCount.shadowRoot.appendChild(style);