Comment configurer le thème du site avec des variables CSS

Sep 15, 2025
Comment
laptop [dix] [dix] [dix]
[dix]

Les propriétés personnalisées CSS, communément appelées variables CSS, sont désormais prises en charge par tous les grands navigateurs modernes. Cela signifie que pour les projets qui ne sont pas chargés de prendre en charge les navigateurs hérités tels que Internet Explorer, des variables CSS peuvent être considérées - à toutes fins utiles - à toutes fins utiles - sans danger à utiliser.

[dix]

De nombreux développeurs utilisent déjà des variables avec des préprocesseurs tels que Sass ou Moins comme moyen de réduire la répétition de code. Les variables Native CSS fonctionnent en grande partie de la même manière, mais ne nécessitent aucune étape de construction supplémentaire, Cascade comme une propriété CSS régulière, et surtout, sont disponibles au moment de l'exécution. (Pour que votre site fonctionne bien, assurez-vous que vous avez choisi le droit hébergement Web un service.)

  • Qu'est-ce que Sass?

Ces avantages donnent des variables de CSS natives un avantage sur leurs frères et sœurs de préprocesseur et ouvre la porte pour les développeurs à faire beaucoup de choses intéressantes avec beaucoup moins de code. Intéressé aux options de code zéro pour votre site? Voici notre guide au sommet Générateur de site Web .

Dans ce tutoriel, nous explorerons comment nous pouvons utiliser des variables CSS pour implémenter le thème du site Web dans une application Web simulée appelée NOTAPEP. Cela impliquera une écriture CSS et Javascript Pour permettre à l'utilisateur de changer la palette de couleurs et de basculer la quantité de colonnes affichées. Nous utiliserons ensuite l'API de stockage Web pour vous assurer que toute modification est enregistrée pour les futures sessions.

Obtenez les fichiers de tutoriels

[dix]

Tout d'abord, téléchargez les fichiers de projet de WEB DESIGNER'S FILESILO (numéro 264). Remarque: la première fois que les utilisateurs devront s'inscrire pour utiliser FileSilo.

01. Configurez l'espace de travail

Dans le / Modèle de site Web Répertoire Vous trouverez la page Web statique NOTAPEP dans laquelle nous mettrons en œuvre le thème du site Web à l'aide de variables CSS et de l'API de stockage Web. Ouvrez le répertoire dans votre éditeur de texte préféré.

02. Configurez nos variables CSS

Dans Main.css , vous trouverez une grande partie du CSS du projet. En haut, créez un bloc ciblant la racine pseudo-classe. À l'intérieur, définissez des variables comme dans l'extrait de l'extrémité ci-dessous. Ce bloc racine contient des variables globales qui se cachent dans notre feuille de style comme toute propriété CSS normale. 

: root {
  --prima: # 2f353e;
  --Secondaire: # 2B9BCA;
  --Tertiary: # F3583F;
  --Quaternaire: # E0E1E2;
  --quinaire: #ffffff;
}

03. Remplacez les couleurs avec des variables

Passez à travers la feuille de style, manuellement ou en utilisant Rechercher / Remplacer et échanger des codes hexagonaux de couleur statiques avec leur variable correspondante du bloc racine. Pour ce faire, utilisez le via fonctionner et transmettre le nom de la variable. Cela indique au navigateur de faire référence à la valeur de la variable. Par exemple: 

 .C-Header {
  Couleur arrière-plan: var (- primaire);
  Couleur: var (- quinaire);
}

04. Localiser Inline SVG pour les icônes

Ouvert index.html Et l'une des premières choses que vous remarquez est un grand élément SVG. Ceci contient les chemins de toutes les icônes de la page, chacun enveloppé dans un élément de symbole et donné un identifiant unique. Ces symboles sont ensuite référencés si nécessaire avec le utilisation élément, permettant la réutilisation des icônes sans aucune duplication du code SVG.

05. Ajouter des variables CSS au SVG

Un bénéfice de l'utilisation d'un fichier SVG en ligne au lieu d'un fichier .svg est que CSS peut accéder à sa structure interne. Cela signifie que nos variables CSS peuvent-elles alors que les variables CSS (vérifiez le support du navigateur ici ). Dans index.html , remplacez le bloc de style de SVG avec le snippet ci-dessous. Maintenant, chacune des couleurs du SVG est liée aux valeurs de nos variables CSS. 

 & lt; style & gt;
  .Primary {
  remplir: var (-primary, # 2f353e);
  }
  .secondaire {
  remplir: var (-secondary, # 2b9bca);
  }
& lt; / style & gt;

06. Créer une variable de colonnes

Nous pouvons également utiliser des variables CSS pour des propriétés autres que la couleur. Créez une nouvelle variable dans le bloc racine, appelez-la Colonnes et donnez-lui une valeur de 3. Cela devrait correspondre à la valeur par défaut de la Colonnes Composant UI sur la page. Lorsque fonctionnel, ce composant bascule le nombre de colonnes. 

: root {
  --prima: # 2f353e;
  --Secondaire: # 2B9BCA;
  --Tertiary: # F3583F;
  --Quaternaire: # E0E1E2;
  --quinaire: #ffffff;
  --Columns: 3;
}

07. Mettre en œuvre une bascule

En utilisant notre nouvelle variable de colonnes et la Calc () Fonction, nous allons maintenant calculer la manière dont chaque composant de note devrait être large pour créer le nombre correct de colonnes. Par exemple, si les colonnes sont définies sur 4, chaque note doit avoir une largeur de 25%. 

 .c-note {
  largeur: calc (100% / var (- colonnes));
}

08. Ajouter des classes JS et des attributs de données

Lors de l'application du comportement JS sur un élément DOM, raccrochez-vous via une classe avec un préfixe JS. Cela découle les aspects fonctionnels d'un élément de CSS. Ajoutons un JS-Update-variable classe à toutes les entrées de couleur et de radio ainsi que d'un attribut de données référencer la variable correspondante à la mise à jour. 

 & lt; type d'entrée = "couleur" valeur = "# 2f353e"
Classe = "JS-Update-Update-Variable U-Hidden-visuellement"
variable de données = "primaire" & gt;

09. Ajouter JS pour mettre à jour les variables CSS

Ouvert Main.js et ajoutez l'extrait ci-dessous. Cela boucle à travers tous nos JS-Update-variable Entrées et ajoute la logique, ainsi de suite, la variable référencée dans son attribut variable de données est mise à jour avec la valeur des entrées. Les échantillons de couleur et la basculaire doivent maintenant fonctionner! 

 var vartrig = document
.Queryselectorallall (". JS-Update-variable");
pour (var i = 0; i & lt; vartrig.length; i ++) {
vartrig [i]
.addeventlistener ("changement", fonction () {
document.documentation.style
.setProperty ("-" + this.dataset.variable,
cela.value);
});
}

10. Joignez une classe JS au bouton Enregistrer

Il est logique de sauvegarder uniquement la palette de couleurs de l'utilisateur lorsqu'il cliquez sur le bouton Enregistrer, car cela leur permet d'expérimenter avec des thèmes autant qu'ils souhaitaient sans remplacer automatiquement le courant actuel. Pour commencer, ajoutez .js-sauvegarde-couleurs à la Sauvegarder bouton pour fonctionner comme crochet JS. 

 & lt; class de bouton = "bouton C-Button JS-SAVE-COULEURS"
Données-modal = "JS-MODAL" DONNALE-MODAL
-Content = "Contenu JS-Colors-Modal" & GT;
Enregistrer & lt; / Button & GT;

11. Créer des couleurs

[dix]

En arrière Main.js , déclarez une nouvelle variable appelée couleurs Et assignez-lui un nouveau tableau contenant toutes les variables de couleur que nous voulons être enregistrées une fois que le bouton Enregistrer a été cliqué. 

 Var Colors = [
  "primaire",
  "secondaire",
  "tertiaire",
  "quaternaire",
  "quinaire"
];

12. Construire l'écouteur d'événement de sauvegarde

En dessous du tableau COULEURS, créez un écouteur d'événement de clic pour le JS-SAVE-COULEURS classe que nous avons précédemment ajoutée au bouton Enregistrer. À l'intérieur, il crée une nouvelle variable appelée htmlstyles et attribuez-le les propriétés calculées de l'élément HTML racine. Nous allons utiliser cela pour accéder à nos variables CSS. 

 Document.QuerySelector (". JS-SAVE-COULEURS")
.addeventlistener ("Cliquez sur", fonction () {
var htmlstyles = fenêtre
.getComp députétyle (document
.Queryselector ("html")),
}),

13. Record Variables de couleur CSS

Ensuite, au sein de l'auditeur de l'événement, créez une nouvelle variable appelée colorstosave et attribuez-lui un objet vide. Ensuite, créez un POUR boucle en utilisant le couleurs Array à partir de l'étape 11. En cela, nous ajouterons une clé de clé / valeur complète des variables mentionnées dans le couleurs tableau à la colorstosave objet. 

 Array à l'objet "Coloursosave".
colourstosave = nouvel objet;
pour (var i = 0; i & lt; colours.length; i ++) {
colourstosave [couleurs [i]] = htmlstyles
.getpropertyvalue ("-" + couleurs [i]);
}

14. Envoyer Coloursosave à LocalStorage

Maintenant, nous avons toutes les variables de couleur enregistrées dans colorstosave Nous l'enverrons à une composante de l'API de stockage Web appelée localStorage. C'est essentiellement un objet qui persiste à travers les sessions. Nous pouvons stocker d'autres objets en utilisant son Settitem () méthode. Envoyons-le notre colorstosave objet. 

 localtstorage.settitem ("couleurs",
Json.stringify (colourstosave));

15. Ajouter une classe JS aux colonnes

En plus des couleurs, nous voulons également nous assurer que notre numéro de colonne choisi persiste également entre les sessions. Le premier pas vers cela serait d'ajouter js-update-colonnes à toutes les entrées radio dans le composant de colonnes. 

 & lt; Type d'entrée = "Radio" Nom = "Colonnes" classe
= "JS-Update-Variable JS-Update-colonnes-colonnes
u-caché-visuellement "valeur =" 1 "
variable de données = "colonnes" & gt;

16. Envoyer des colonnes à localStorage

Pour chaque js-update-colonnes , nous assignerons ensuite aux auditeurs d'événements à surveiller les modifications. Sur la détection, nous enverrons ensuite la valeur actuelle de la Colonnes variable à stockage local , à nouveau en utilisant son Settitem () méthode. Contrairement aux couleurs, nous n'avons pas besoin de régler cette valeur car ce n'est pas un objet. 

 var colinputs = document
.Queryselectorallall (". JS-Update-colonnes");
pour (var i = 0; i & lt; colinuts; i ++) {
colinuts [i] .addeventlistener ("changement",
fonction () {var htmlstyles = fenêtre
.getComp députétyle (document
.Queryselector ("HTML"));
localtstorage.settitem ("colonnes",
HTMLSTYLES.GETPROPERTYVALUE ("- COLONNES"));
});}

17. gérer de nouvelles sessions

Si l'utilisateur revient après avoir déjà choisi une préférence de couleur et de colonne, nous devons créer une logique afin que ces données sauvegardées soient retournées en variables CSS. La première étape consiste à définir un DomcontentOaré auditeur d'événements, puis un si déclaration à vérifier les données sauvegardées dans localStorage en utilisant son obtenir l'article() méthode. 

 Document.addeventlistener
("DomcontentOached", fonction () {
Si (localtstorage.getem ("couleurs")) {
}
Si (localStorage.getem ("colonnes"))) {
}
});

18. Modification des variables de couleur

Dans les couleurs si déclaration, créez une nouvelle variable appelée sauvécolours et attribuer la valeur d'un objet de couleurs analysé de stockage local . Utilisant un En boucle sauvécolours , saisissez chaque couple de couleur / paire de valeur et appendez-la à l'élément HTML racine en tant que variable CSS. 

 var savedcolours = json.parse
(localtstorage.getem ("couleurs"));
Pour (couleur dans SavedColours) {
documenter.documentation.style.seproperty
("-" + couleur, sauvegardées [couleur]); }

19. Rassemblez les données de variables de colonne

Avant de pouvoir modifier la variable de colonnes, nous devons d'abord saisir des références aux données enregistrées dans stockage local et aussi les entrées radio dans le Colonnes composant. Ce dernier est donc nous pouvons mettre à jour son état pour s'assurer que le nombre correct est présélectionné. 

 Var colonnes = localStorage
.GetTitem ("colonnes"),
Columntriggers = document.
queryselectorall (". JS-Update-colonnes");

20. Modifier la variable et l'état

Enfin, nous mettrons à jour la variable CSS Colonnes avec son enregistrement. stockage local contrepartie et définissez l'attribut coché de l'entrée radio correspondante dans le Colonnes composant à vrai. Le Colonnes - 1 est de compenser le fait que les colonnes Nodéliste est basé sur zéro. 

 Document.documentation.style
.setProperty ("- colonnes", colonnes);
Columntriégers [colonnes - 1] .Checked = TRUE;

21. Testez le produit fini

NoteApp page

[dix] [dix]
Le produit fini: Tout sur la page de note de note de maquette devrait maintenant fonctionner

C'est tout! Tout sur la page de note de marque ne devrait maintenant fonctionner. Vous pouvez créer votre propre palette de couleurs en cliquant sur les échantillons, puis de l'engager à stockage local via le bouton Enregistrer. Si vous souhaitez basculer la quantité de colonnes affichées, cliquez sur le numéro approprié dans le composant Colonnes.

Et rappelez-vous, il vaut toujours la peine de mettre à niveau votre stockage en ligne En avance sur un nouveau projet afin qu'il puisse gérer les fichiers que vous lancez.

Cet article est apparu à l'origine dans Web Designer Magazine Numéro 264. S'abonner ici .

Lire la suite:

  • 15 Tutoriels de conception Web réactifs vraiment utiles
  • Comment commencer avec Sass
  • 7 conseils pour mieux gérer la couleur sur le Web
[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment utiliser l'esquisse de gravité

Comment Sep 15, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Croquis de gravité) [DIX] Esquisse de gra..

Portrait Photographie: Comment prendre des portraits parfaits

Comment Sep 15, 2025

La photographie de portrait est UNY ATE D'ÉQUILIBRE - Il y un déclencheur de Choses à garder à l'Esprit. Communiqueur AEC VOCT SUJET ET VOUS QU'ILS SE SE SEDENT À L'AISE SONTUTUX. ET à ..

Comment créer une peinture à l'huile numérique utilisant Artrage

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Peindre numériquement en utilisant un tablette de dessin ..

Commencez avec diffuse

Comment Sep 15, 2025

L'un des moyens les plus simples d'apporter une certaine vie supplémentaire à n'importe quel morceau de Art 3D est d'ajouter de la couleur et de la texture. Il existe une var..

Commencez avec l'impression monotype

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Parfois vous avez besoin de secouer les choses avec votre des..

Trois étapes pour un ciel nocturne étincelante à l'aquarelle

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] L'aquarelle est un moyen incroyable qui, avec la droite Techn..

Comment prendre votre logo vectoriel de 2D à 3D

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Dans ce tutoriel, nous examinons comment vous pouvez prendre vos logos basés..

Le Guide de la création de textures 3D

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Cinq artistes remarquables démontrent les astuces de leur métier, expliquan..

Catégories