Thématisation avec Tailwind et variables CSS

Dans cet article, nous explorerons l’impact des principes d’architecture propre dans la thématique, y compris la manière dont ils influencent et impactent les applications Web. Nous nous concentrerons sur l’utilisation des variables CSS dans CSS vent arrière pour rendre les thèmes faciles à maintenir.

La thématique a un impact direct sur la façon dont les utilisateurs perçoivent et interagissent avec une application, ce qui en fait un aspect crucial pour offrir des expériences utilisateur positives et mémorables. Le thème contribue non seulement à renforcer l’identité de la marque, mais joue également un rôle crucial dans la formation des perceptions des utilisateurs.

Tailwind utilise des variables CSS pour améliorer considérablement les capacités de création de thèmes dans le développement Web. Il fournit également aux développeurs les outils nécessaires pour gérer les thèmes. Cela facilite un style flexible et dynamique. La combinaison permet une gestion efficace des thèmes et des options de style adaptables.

À la conclusion de cet article, vous aurez acquis des compétences pratiques dans l’utilisation des variables CSS. C’est dans React et Tailwind CSS pour créer des thèmes dynamiques. De plus, les lecteurs auront un aperçu des variations à deux et plusieurs thèmes.

Comprendre l’architecture propre dans la thématique

Lors du développement d’applications, les principes fondamentaux tels que les principes de codage SOLID et DRY s’avèrent cruciaux. Ces principes façonnent non seulement la structure du code, mais influencent également les thèmes et l’intégration de la conception de l’interface utilisateur.

Les principes SOLID permettent aux développeurs de s’assurer que chaque composant a un rôle spécifique. Cela facilite la mise en œuvre de thèmes et de conceptions d’interface utilisateur plus faciles. De même, le principe DRY met l’accent sur la réutilisabilité, conduisant à une architecture thématique propre.

Comprendre le lien entre ces principes et la thématique implique d’examiner leurs rôles. Cela inclut des rôles dans la création d’applications adaptables avec des stratégies thématiques bien structurées. Ces principes servent de piliers directeurs aux développeurs, permettant la création d’applications robustes qui répondent efficacement aux exigences changeantes en matière de thématiques.

Tirer parti des variables CSS pour le thème dans Tailwind

Les variables CSS jouent un rôle central dans Tailwind. Ils offrent une approche dynamique pour gérer efficacement les thèmes. Leur flexibilité permet des modifications rapides sans modifications importantes du code, améliorant ainsi la capacité de Tailwind à gérer divers thèmes.

L’utilisation de variables CSS dans Tailwind offre des avantages inhérents. En particulier, il aide à organiser les valeurs du thème telles que les couleurs, les polices et l’espacement. Cette approche centralisée rationalise la gestion des thèmes, garantissant des mises à jour systématiques et organisées.

Les avantages des variables CSS pour les thèmes dynamiques sont divers, notamment :

• ajustements de thème rapides pour les thèmes doubles et multiples
• création et gestion efficaces de plusieurs thèmes au sein de projets
• un processus de thème simplifié pour une personnalisation et une adaptation faciles
• facilitation de diverses exigences de conception sans modifications importantes du code

Dans un prochain exemple de projet, nous montrerons la convergence de ces éléments. Cette démonstration intègre les principes d’architecture propre et leur application aux applications de thématisation.

Mise en œuvre pratique : configuration du projet

Nous commençons par créer un Réagir application utilisant Viteet en ajoutant Manuscrit. Vous pouvez choisir d’utiliser Créer une application React si tu préfères. Nous installons Tailwind CSS pour le style et la thématique.

Pour démarrer le projet, nous allons mettre en place Réagir à Vite, un outil ultra-rapide pour les applications React. Si vous ne l’avez pas déjà fait, installez-le globalement en utilisant soit npm ou fil.

yarn install

yarn global add create-vite

Utilisez React Vite pour créer un nouveau projet avec la prise en charge de TypeScript. Vous pouvez renommer variables-theme-app avec le nom de votre projet préféré. Vous pouvez également sélectionner les fonctionnalités dont vous avez besoin lorsque Vite vous y invite dans la ligne de commande :

create-vite variables-theme-app .

Ensuite, accédez au répertoire du projet à l’aide de cette commande :

cd variables-theme-app

Vous pouvez démarrer le serveur de développement maintenant pour prévisualiser votre application :

yarn run dev

Accédez à l’URL de développement local dans votre navigateur. Suivre CSS vent arrière installation à partir de son guide officiel.

Construire l’interface utilisateur

Créons maintenant un exemple de page de destination utilisateur. C’est là que nous implémenterions des thèmes avec Tailwind CSS et des variables CSS.

Configuration du CSS et des feuilles de style Tailwind

Tout d’abord, nous configurons nos variables Tailwind sur tailwind.config.js. Ensuite, nous mettons à jour notre index.css feuille de style :

export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {

      

      colors: {
        accent: {
          1: "var(--accent1)",
        },
        baseOne: "var(--baseOne)",
        baseTwo: "var(--baseTwo)",
        baseThree: "var(--baseThree)",
        baseFour: "var(--baseFour)",
      },
    },
  },
  plugins: [],
}

Du tailwind.config.js objet colours, nous définissons des variables de couleur personnalisées. À chaque variable est associé un nom et une valeur spécifiques. Par exemple, accent est un groupe de couleurs avec une nuance notée 1, auquel est attribuée une valeur provenant d’une variable CSS --accent1.

D’autres variables de couleur se voient attribuer directement des valeurs à partir des variables CSS respectives. Ceux-ci sont --baseOne, --baseTwoet ainsi de suite, pour une utilisation dans la feuille de style.

Nous définissons ces variables de couleur à l’aide de propriétés personnalisées CSS (variables) pour permettre une thématique flexible. Cela donne également accès à des ajustements de couleurs faciles dans toute la feuille de style. Ils agissent comme des espaces réservés faisant référence à des valeurs de couleur spécifiques. Cela permet ainsi une utilisation cohérente des couleurs dans l’ensemble de l’application. Ils appliquent également des modifications à ces couleurs à partir de l’emplacement central qui est index.css.

Ces variables sont ensuite définies sur le index.css feuille de style :

//index.css

@layer base {
  :root {
    --baseOne: hsl(0, 0%, 100%);
    --baseTwo: hsl(252, 2%, 51%);
    --baseThree: hsl(0, 0%, 96%);
    --baseFour: hsl(0, 0%, 100%);
    --accent1: hsl(6, 100%, 80%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --baseOne: hsl(229, 57%, 11%);
      --baseTwo: hsl(243, 100%, 93%);
      --baseThree: hsl(228, 56%, 26%);
      --baseFour: hsl(229, 57%, 11%);
      --accent1: hsl(6, 100%, 80%);
    }
  }

  :root[data-theme="dark"] {
    --baseOne: hsl(229, 57%, 11%);
    --baseTwo: hsl(243, 100%, 93%);
    --baseThree: hsl(228, 56%, 26%);
    --baseFour: hsl(229, 57%, 11%);
    --accent1: hsl(6, 100%, 80%);
  }

  :root[data-theme="light"] {
    --baseOne: hsl(0, 0%, 100%);
    --baseTwo: hsl(252, 2%, 51%);
    --baseThree: hsl(0, 0%, 96%);
    --baseFour: hsl(0, 0%, 100%);
    --accent1: hsl(6, 100%, 80%);
  }

  :root[data-theme="third"] {
    --baseOne: hsl(167, 56%, 22%);
    --baseTwo: hsl(140, 69%, 40%);
    --baseThree: hsl(0, 0%, 0%);
    --baseFour: hsl(0, 3%, 13%);
    --accent1: hsl(6, 100%, 80%);
  }

Ce code CSS définit des variables de couleur pour différents thèmes : par défaut, sombre, clair et tiers. Il utilise des propriétés personnalisées CSS (--baseOne, --baseTwo, etc.) pour attribuer des valeurs de couleur spécifiques. Les thèmes changent en fonction des préférences de jeu de couleurs de l’appareil ou de l’attribut de données (data-theme). Ils sont également appliqués à l’élément de document.

Interface utilisateur de la page de destination

Ensuite, nous créons les composants nécessaires pour constituer l’interface utilisateur de la page de destination. Voici les Header.tsx et Hero.tsx Composants:

const Header = () => {
    return (
        <header className='flex items-center justify-between py-4 shadow shadow-gray-200 bg-baseOne transition-colors duration-300 lg:px-[160px] sm:px-[40px] px-[16px]'>
            <div>
                <img className="w-[40px]" src={heroIcon} alt="icon" />
            </div>
            <nav className="sm:block hidden">
                <ul className='flex items-center space-x-5'>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
            <div>
                <button><strong>Select Theme</strong></button>
            </div>
        </header>
    );
};

export default Header;

Depuis Header.tsx ci-dessus, nous créons la section d’en-tête de la page de destination. Ceci est rempli de liens factices et d’un déclencheur pour afficher ou masquer les modèles de thème.

Vient ensuite le Hero.tsx section. Nous le stylisons avec Tailwind et fournissons quelques informations sur le sujet de l’article :

import heroIcon from '../assets/png/hero.png'

const Hero = () => {
  return (
    <section className="lg:px-[160px] sm:px-[40px] px-[16px]">
      <div className='flex sm:flex-row flex-col items-start justify-between sm:pt-32 pt-12 sm:text-left text-center'>
        <aside className='max-w-[550px]'>
          <h2 className='sm:text-5xl text-3xl'>Theming With CSS Variables</h2>
          <p className='pt-5'>Customizing themes using CSS Variables alongside Tailwind CSS offers a flexible way to style web applications. CSS Variables enable easy theme adjustments, while Tailwind CSS's utility classes simplify and speed up the styling process for consistent designs.</p>
        </aside>
        <aside className='sm:w-auto w-full sm:block flex items-center justify-center sm:pt-0 pt-10'>
          <img className='min-w-[300px]' src={heroIcon} alt="icon" />
        </aside>
      </div>
    </section>
  )
}

export default Hero

Ensuite, nous importons ces composants dans notre fichier de base App.tsx. Ainsi, notre page de destination statique se présente comme une mise en page de base sans aucune fonction ni thème supplémentaire :

import Header from "./components/Header"
import Hero from "./components/Hero"

function App() {
  return (
    <main>
      <Header />
      <Hero />
    </main>
  )
}
export default App

Interface utilisateur et fonctions du modèle de sélecteur de thème

Ici, nous construisons l’interface utilisateur des modèles de thème et ajoutons leurs fonctions respectives. L’objectif de ce composant est de permettre aux utilisateurs d’accéder à des thèmes sélectionnés.

Dans un premier temps, nous créons le ThemeSwitcher.tsx Composant de l’interface utilisateur :

import { useState } from 'react';
import light from '../assets/svg/light.svg';
import dark from '../assets/svg/dark.svg';
import third from '../assets/svg/third.svg';

type Theme = {
  src: string;
  alt: string;
  name: string;
};

const themes: Theme[] = [
  { src: light, alt: 'Light', name: 'light' },
  { src: dark, alt: 'Dark', name: 'dark' },
  { src: third, alt: 'Third', name: 'third' },
];

const ThemeSwitcher = () => {
  const [selectedTheme, setSelectedTheme] = useState('');

  const handleThemeChange = (themeName: string) => {
    setSelectedTheme(themeName);
  };

  return (
    <section className='bg-baseThree px-5 py-4 absolute lg:right-36 sm:right-12 right-4 top-24'>
      <div className='grid sm:grid-cols-3 grid-cols-1 gap-10'>
        {themes.map((theme, index) => (
          <div className={`max-w-[150px] p-1 ${selectedTheme === theme.name && 'border-2 border-green-500 rounded-md'}`} key={index}>
            <label>
              <input
                type='radio'
                name='theme'
                value={theme.name}
                checked={selectedTheme === theme.name}
                onChange={() => handleThemeChange(theme.name)}
                className='hidden'
              />
              <img className='rounded-md cursor-pointer' src={theme.src} alt={theme.alt} />
              <div className='flex items-center justify-between mt-2'>
                <h5 className='capitalize text-sm text-baseTwo'>{theme.name} Mode</h5>
                <div className='bg-green-500 rounded-full w-[20px] flex items-center justify-center text-white text-sm'>{selectedTheme === theme.name && <span>&#10003;</span>}</div>
              </div>
            </label>
          </div>
        ))}
      </div>
    </section>
  );
};

export default ThemeSwitcher;

Dans l’extrait de code ci-dessus, légende ThemeSwitcher.tsx définit une structure appelée Theme. Cette structure comporte trois parties : src, altet name. Ce type vise la sécurité des types, en spécifiant la structure de l’objet pour les thèmes :

• src: string
• alt: string
• name: string

Ces propriétés garantissent un format cohérent pour les objets de thème dans la base de code.

Après avoir défini cette structure pour la sécurité de type, nous avons le themes tableau initialisé. Celui-ci contient des objets conformes à cette définition Theme structure des types. Cela garantit que chaque objet de thème suit le format spécifié dans l’application :

• src: l’emplacement de l’image ou de la ressource liée à ce thème
• alt: une description de l’image utilisée dans le thème
• name: un nom distinct pour chaque thème

Quand nous réitérons cela themes array, nous obtenons le résultat suivant sur le DOM.

Ensuite, nous ajoutons les fonctions de mise à jour du thème. C’est toujours à l’intérieur ThemeSwitcher.tsx:

 useEffect(() => {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    const prefersLight = window.matchMedia('(prefers-color-scheme: light)');

    const updateTheme = () => {
      const storedTheme = localStorage.getItem('selectedTheme');
      const setTheme = (theme: string) => {
        document.documentElement.setAttribute('data-theme', theme);
        setSelectedTheme(theme);
      };

      if (storedTheme !== null) {
        setTheme(storedTheme);
      } else {
        switch (true) {
          case prefersDark.matches:
            setTheme('dark');
            break;
          case prefersLight.matches:
            setTheme('light');
            break;
          default:
            break;
        }
      }
    };

    updateTheme();

    prefersDark.addEventListener('change', updateTheme);
    prefersLight.addEventListener('change', updateTheme);

    return () => {
      prefersDark.removeEventListener('change', updateTheme);
      prefersLight.removeEventListener('change', updateTheme);
    };
  }, []);

C’est là que la magie opère. Ce useEffect La fonction gère la logique du thème en fonction du jeu de couleurs préféré. Il initialise deux MediaQueryList objets – prefersDark et prefersLight. Ceux-ci ciblent les combinaisons de couleurs sombres et claires.

La partie cruciale est l’invocation de setTheme(). Ceci définit le data-theme attribut sur le document.documentElement. Cet attribut modifie le thème de l’application pour correspondre aux préférences de l’utilisateur.

Nous appelons updateTheme() pour définir le thème. Les écouteurs d’événements sont ensuite ajoutés à prefersDark et prefersLight. Le but est de suivre les changements dans les préférences de palette de couleurs. Lorsque ces préférences changent, le updateTheme() la fonction se déclenche en conséquence.

Enfin, la fonction de nettoyage supprime les écouteurs d’événements lors du démontage du composant. Cela garantit une gestion propre des mises à jour de thème en fonction des préférences de jeu de couleurs.

Ce composant est importé dans le Header.tsx, là où se trouve sa bascule d’affichage. Lors de la sélection d’un thème, les thèmes de couleurs respectifs sont mis à jour. Nous pouvons donc choisir de faire uniquement des sélections de thèmes doubles ou de plusieurs thèmes.

Comparaison

C’est ce qui arrive lorsque nous ne suivons pas les principes d’architecture propre dont nous avons discuté. En regardant l’extrait de code ci-dessous, il est clair que la première option est bien meilleure.

Pensez maintenant à appliquer la deuxième option à un grand projet :

//With clean architecture
<div className="bg-baseOne text-baseThree">
    Comparison
</div>

//Without
<div className="bg-gray-100 dark:bg-gray-600 third:bg-yellow-500 text-gray-800 dark:text-gray-200 third:text-red-500">
    Comparison
</div>

Les meilleures pratiques

Voici quelques directives utiles pour rendre le travail plus facile et plus efficace. Ces suggestions peuvent améliorer la façon dont nous créons et gérons les projets, en simplifiant leur maintenance et en garantissant de meilleures performances :

• Dénomination claire. Améliorez la lisibilité grâce à des conventions de dénomination cohérentes.
• Modularisation. Divisez le code en modules réutilisables pour plus d’évolutivité.
• Des actifs optimisés. Accélérez les temps de chargement avec des médias optimisés.
• Normes d’accessibilité. Assurez-vous que la conception correspond aux besoins d’accessibilité.
• Tests multi-navigateurs. Confirmez la cohérence entre les navigateurs et les appareils.
• Révisions régulières du code. Garantissez la qualité grâce à des évaluations de routine du code.

Conclusion

Pour résumer, la combinaison de principes d’architecture épurée avec Tailwind CSS crée des applications flexibles. Cela rend les applications faciles à gérer avec des variables CSS. Cette méthode garantit une expérience utilisateur fluide et simplifie le processus de développement de thèmes.

Pour voir ce projet en action, regardez la démonstration en direct sur Vercel. Vous pouvez également trouver des conseils utiles pour le code sur le Dépôt GitHub.