Basculer automatiquement entre les thèmes clairs et sombres


Dans ce tutoriel rapide, je vais vous montrer comment définir automatiquement un thème sombre ou clair dans une application Web en fonction de la configuration de l’utilisateur dans son système d’exploitation:

définition de thèmes clairs et sombres

Si vous préférez, voici une version vidéo de ce tutoriel:

Thèmes sombres et clairs automatiques dans les documents HTML avec CSS

Les étapes suivantes montrent comment activer les thèmes sombres et clairs automatiques dans les documents HTML à l’aide de CSS.

Étape 1: créer un document HTML

Créer un demo.html fichier avec le contenu suivant:

Voici une capture d’écran:

bonjour thème sombre du monde

Étape 2: implémenter un thème sombre

Ajoutez ce qui suit au head section de la demo.html fichier:

Voici le résultat:

Bonjour thème sombre du monde

Étape 3: Utilisez une requête multimédia pour appliquer le thème sombre

Modifiez le code de l’étape précédente pour inclure les styles sombres dans un requête média qui utilise un fonction multimédia:

Étape 4: Testez le Spp

Ouvrez le document HTML dans le navigateur et utilisez les paramètres de votre système d’exploitation pour modifier le thème préféré. Les modifications doivent être automatiquement reflétées dans le navigateur.

Thèmes automatiques foncés et clairs dans les composants Web et les applications Vaadin Flow

Les étapes suivantes montrent comment activer les thèmes sombres et clairs automatiques à l’aide de JavaScript. Ceci est utile si votre application utilise des composants Web qui nécessitent des configurations spéciales ou si vous utilisez Vaadin Flow.

Étape 1: créer une nouvelle application Web Java avec des composants Web

Aller à https://start.vaadin.com et générer une nouvelle application. Vous pouvez laisser toutes les valeurs par défaut ou les modifier à votre guise en ajoutant et en supprimant des vues ou en modifiant l’apparence. Suivez les instructions et les liens sur la page pour importer le projet Maven généré dans votre IDE de votre choix.

Étape 2: implémenter une requête multimédia en JavaScript

Créer un nouveau os-theme-switcher.js fichier dans le PROJECT_ROOT / frontend / répertoire avec le contenu suivant:

Étape 3: Chargez le fichier JavaScript

Ajoutez l’annotation suivante au MainView Classe Java:

Étape 4: Testez l’application

Exécutez l’application avec Maven:

Aller à http: // localhost: 8080 et utilisez les paramètres de votre système d’exploitation pour modifier le thème préféré. Les modifications doivent être automatiquement reflétées dans le navigateur.

Close Menu