info:htmly:htmlydarkmode

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
info:htmly:htmlydarkmode [2026/03/31 06:20] – supprimée - modification externe (Date inconnue) 127.0.0.1info:htmly:htmlydarkmode [2026/03/31 06:20] (Version actuelle) – ↷ Page déplacée et renommée de info:htmly_darkmode à info:htmly:htmlydarkmode radeff
Ligne 1: Ligne 1:
 +====== HTMLy thème tailwind -> darkmode ======
  
 +si on veut aller au plus simple, prendre p. ex. tailwind et si on veut du darkmode, éditer
 +
 +layout.html.php
 +
 +et ajouter dans le code: class=dark..."
 +<code html>
 +<html lang="<?php echo blog_language();?>" class="dark __variable_space scroll-smooth light" id="html-id">
 +</code>
 +puis juste en dessous
 +<code html>
 +
 +<head>
 + <script>
 +  // Ce script doit être placé le plus tôt possible dans le <head>
 +  (function() {
 +    // Vérifie dans le localStorage si l'utilisateur a choisi le dark mode
 +    // OU si le système d'exploitation préfère le dark mode (si pas de choix explicite)
 +    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
 +      document.documentElement.classList.add('dark');
 +    } else {
 +      document.documentElement.classList.remove('dark');
 +    }
 +  })();
 +</script>
 +</code>
 +
 +doc tailwind
 +
 +https://tailwindcss.com/docs/dark-mode
 +
 +{{tag>htmly}}