Apercu
Technology est un theme concu en mode sombre par defaut pour les entreprises technologiques, les startups et les developpeurs. Il adopte une philosophie de design "sombre d'abord" avec une palette de couleurs compatible OLED, des accents lumineux bleus et une combinaison de polices associant des titres geometriques, du texte courant efficace et une police monospace distinctive pour le code et les etiquettes.
Avec 42 sections reutilisables, 22 modeles de pages et la version la plus legere de tous les themes Larapen (25 fichiers SCSS, 5 fichiers JS), Technology offre une identite visuelle percutante tout en maintenant des temps de chargement rapides et une maintenance facilitee.
Caracteristiques principales
- Mode sombre par defaut : Le design principal utilise une palette sombre riche avec des surfaces sureleves. Le mode sombre est le mode par defaut ; le mode clair est secondaire et entierement supporte.
- Effets de lueur et de degrade : Des effets de lueur bleue subtils sur les elements interactifs et des mises en valeur par degrade ajoutent de la profondeur sans surcharger le contenu.
- Accents monospace : Fira Code est utilisee pour les etiquettes, les badges, les metadonnees et les blocs de code, renforcant l'esthetique orientee developpeur.
- Compatible OLED : La couleur sombre de base (#111119) est presque noire mais evite le noir pur, reduisant le maculage OLED tout en preservant un contraste profond.
- 42 sections reutilisables : Construisez des pages a partir de 42 sections preconcues couvrant les heros, les fonctionnalites, les appels a l'action, les tarifs, les temoignages, les galeries, et plus.
- Version la plus legere : Avec seulement 25 fichiers SCSS et 5 fichiers JS, Technology est le theme le plus leger de la collection.
- Systeme de niveaux de surface : Des surfaces superposees creent une profondeur visuelle sans recourir aux ombres.
- 22 modeles de pages : Des modeles dedies pour toutes les pages principales et les modules.
Details du design
Typographie
Le theme Technology utilise trois polices soigneusement choisies pour creer une identite technologique distinctive :
| Police | Utilisation | Details |
|---|---|---|
| Space Grotesk | Tous les titres | Geometrique et technologique avec des formes de caracteres distinctives |
| Inter | Texte courant | Moderne et tres lisible a toutes les tailles, optimisee pour la lecture sur ecran |
| Fira Code | Code, etiquettes, badges, metadonnees | Ajoute l'esthetique developpeur/terminal a travers tout le theme |
Chaque police peut etre modifiee dans les Parametres du theme.
Palette de couleurs
| Couleur | Code hexadecimal | Utilisation |
|---|---|---|
| Primaire / Bleu arctique | #3b82f6 | Couleur interactive principale, effets de lueur et degrades |
| Secondaire / Bleu | #2563eb | Boutons secondaires et accents |
| Accent / Bleu profond | #3159a1 | Accents plus profonds et etats de survol |
| Sombre / Arriere-plan | #111119 | Fond de page (presque noir, compatible OLED) |
| Surface Niveau 1 | #18181f | Cartes, panneaux, blocs de code |
| Surface Niveau 2 | #222230 | Cartes imbriquees, menus deroulants, etats de survol |
| Sureleve | #2a2a3a | Modales, popovers, superpositions de niveau superieur |
Toutes les couleurs utilisent des proprietes CSS personnalisees prefixees par --tc-. Modifier la couleur
primaire dans les Parametres du theme met automatiquement a jour tous les effets de lueur, degrades, bordures,
etats de survol et anneaux de focus sur tous les composants.
Systeme de niveaux de surface
Le theme utilise des surfaces superposees pour creer une profondeur visuelle sans recourir aux ombres. Chaque niveau est une nuance legerement plus claire de la couleur sombre de base, permettant de distinguer visuellement les elements imbriques.
| Niveau | Couleur | Utilisation |
|---|---|---|
| Base | #111119 | Fond de page, corps |
| Surface 1 | #18181f | Cartes, panneaux, blocs de code |
| Surface 2 | #222230 | Cartes imbriquees, menus deroulants, etats de survol |
| Sureleve | #2a2a3a | Modales, popovers, superpositions de niveau superieur |
Personnalisation
Tous les aspects visuels peuvent etre configures depuis le panneau d'administration sous Apparence → Parametres du theme. Les modifications s'appliquent immediatement sans necessite de reconstruction.
- Couleurs primaire, secondaire et d'accent
- Polices de titre, de texte courant et monospace
- Largeur de mise en page et style de conteneur
- Style d'en-tete (fixe ou statique)
- Mode sombre par defaut et comportement de basculement
- Intensite de l'effet de lueur
Effets de lueur et de degrade
Le theme Technology utilise des effets de lueur bleue subtils pour attirer l'attention sur les elements interactifs et des mises en valeur par degrade pour l'accentuation visuelle.
- Etats de survol : Les cartes, boutons et liens acquierent une lueur subtile au survol pour un retour interactif.
- Etats actif/focus : Les champs de formulaire et les elements interactifs affichent un anneau lumineux lorsqu'ils sont en focus.
- Fonds hero : Des lueurs en degrade radial creent des effets de lumiere ambiante derriere le contenu hero.
- Texte en degrade : Les titres principaux utilisent un remplissage en degrade bleu pour un accent visuel saisissant.
Les niveaux d'intensite de lueur vont de subtil (portee de 20px) a moyen (40px) puis intense (60px).
Accents monospace
Fira Code est utilisee a travers tout le theme pour renforcer l'esthetique developpeur/terminal :
- Etiquettes de section : De petites etiquettes en majuscules au-dessus des titres de section utilisent Fira Code pour un aspect inspire du terminal.
- Badges et tags : Les tags de categorie, les badges de statut et les puces de metadonnees utilisent tous la police monospace.
- Blocs de code : Le code en ligne et les blocs de code delimites utilisent Fira Code avec le support des ligatures active.
- Compteurs et chiffres : Les compteurs de statistiques et les valeurs numeriques utilisent la police monospace pour un aspect oriente donnees.
Modeles de pages
Le theme Technology comprend 22 modeles de pages pour la plateforme principale et tous les modules supportes. Chaque modele suit le langage de design "sombre d'abord".
Modeles disponibles : Page, Pleine largeur, Sectionne, Portfolio, Contact, Blog, Boutique, FAQ, Tarifs, Equipe, Partenaires, Evenements, Reservation, Carrieres, Petites annonces, Forum, Glossaire, Centre d'aide, Licences, Compte, Demande de devis et Envato.
Sections de contenu
Construisez des pages d'atterrissage en combinant les 42 sections preconcues. Chaque section est responsive et suit le systeme de design Technology. Utilisez le modele de page "Sectionne" dans le panneau d'administration pour glisser-deposer les sections.
Les sections comprennent des variantes hero (Par defaut, Divise, Video, Anime), des fonctionnalites (Grille, Liste, Alternees), a propos et services, portfolio (Grille, Masonry, Carrousel), temoignages, tarifs (Tableau, Bascule), appels a l'action et newsletter, statistiques (Compteur, Barre), chronologie et etapes du processus, FAQ (Accordeon, Deux colonnes), formulaires de contact, logos partenaires (Logo, Defilement), galeries (Grille, Visionneuse), cartes et video, onglets et contenu en accordeon, et des sections uniques au theme Technology comme Vitrine de Code et Bloc Terminal.
En-tete fixe
Le theme Technology utilise un en-tete a position fixe qui reste visible lors du defilement des utilisateurs. Il utilise un fond translucide avec flou pour un rendu moderne et soigne.
| Propriete | Valeur | Description |
|---|---|---|
| Position | Fixe | Reste en haut de la fenetre en permanence |
| Hauteur | 72px | Espace pour le logo, la navigation et les boutons d'action |
| Fond | blur(16px) | Effet verre depoli laissant transparaitre le contenu |
L'en-tete se reduit automatiquement en menu hamburger sur les ecrans mobiles avec une animation de glissement hors ecran fluide.
Pied de page sombre
Le pied de page utilise le niveau de surface le plus sombre pour ancrer la page, avec une disposition multi-colonnes pour la navigation, les liens sociaux et les informations legales. Il comprend une integration optionnelle d'inscription a la newsletter lorsque le module Newsletter est actif, et une section inferieure compacte avec copyright, liens legaux et selecteur de langue.
Mode sombre
Contrairement aux autres themes ou le mode sombre est optionnel, Technology est concu en mode sombre par defaut. La palette sombre est l'experience principale, et la variante claire est construite par-dessus.
- Pourquoi le mode sombre d'abord : Les publics technologiques preferent les interfaces sombres. Le mode sombre reduit la fatigue oculaire, a un aspect professionnel sur les ecrans de developpeurs et rend les effets de lueur plus percutants.
- Support du mode clair : Un mode clair complet est inclus et peut etre bascule par les visiteurs. Toutes les surfaces, couleurs de texte et effets ont des equivalents en mode clair.
- Compatible OLED : Le fond de base utilise #111119 au lieu du noir pur pour eviter les artefacts de maculage OLED tout en maintenant un contraste profond.
- Basculement administrateur : Configurez si le mode sombre est le mode par defaut, si les visiteurs peuvent le basculer, et s'il faut respecter la preference systeme de l'utilisateur.
Le theme utilise l'attribut data-bs-theme de Bootstrap pour le basculement sombre/clair. Le mode sombre
ne necessite aucun attribut (c'est le mode par defaut). Le mode clair est active en definissant data-bs-theme="light".
Design responsive
Chaque section, modele et composant est entierement responsive avec une approche mobile-first. L'en-tete se reduit en menu hamburger, les grilles se reorganisent en colonnes uniques, et les zones tactiles sont dimensionnees de maniere appropriee pour les appareils mobiles.
Support des modules complementaires
Le theme Technology comprend des vues preconcues pour tous les modules Larapen. Chaque modele de module suit le design "sombre d'abord" avec des effets de lueur et des accents monospace.
Les modules principaux avec des designs dedies incluent Blog, Boutique, Portfolio, FAQ, Tarifs et Equipe. Des modeles supplementaires sont fournis pour Evenements, Reservation, Carrieres, Petites annonces, Forum, Glossaire, Centre d'aide, Licences, Partenaires et Newsletter.