Themes
Theme sombre, theme clair, faite votre choix !"Dark" ou "Light"
SassSwing fournit 2 thèmes de couleur. Par défaut le thème clair est utilisé. Le thème Dark est automatiquement utilisé en fonction des préférences du système de l'utilisateur.
Les thèmes peuvent être forcés au niveau du document <html data-theme='light'> ou sur n'importe quel élément HTML comme par exemple : <article data-theme='dark'>
Mode sombre appliqué localement
Mode clair appliqué localement
Pour personnaliser les couleurs voir la section Personnalisation
Interaction
Sass Swing fournit également un classe javascript ThemeSwitcher en tant que module ES6. Ainsi qu'une classe CSS .theme-switcher pour afficher un bouton stylisé propre à SassSwing.
Pour automatiser le changement de thème dynamiquement il suffit, de lier le fichier javascript sass-swing.min.js. Veuillez-vous référez à la section Javascript pour connaitre la procédure de mise en place.
Puis, dans votre page, il vous suffira d'ajouter l'attribut data-js-themeSwitcher à un élément HTML cliquable de préférence. Pensez également, à ajouter également l'attribut aria-label pour renforcer l'accessibilité pour les lecteurs d'écran.