Cómo aplicar modo oscuro y cambiar el color del navegador en móviles usando snippet PHP en WordPress

por

Cómo aplicar modo oscuro y cambiar el color del navegador en móviles usando snippet PHP en WordPress.

¿Te gustaría que tu sitio WordPress tenga fondo negro, texto claro y que además el navegador móvil muestre una interfaz oscura? Aunque no tengas acceso a editar los archivos del tema o instalar plugins, puedes lograr un efecto visual bastante completo usando solo un snippet PHP que se coloca en el archivo functions.php o a través del plugin Code Snippets.

Este método:

✅ Cambia el color del navegador en móviles Android (Chrome, Samsung).
✅ Aplica un modo oscuro visual en tu sitio (fondo negro, cabecera y pie oscuros).
⚠️ No afecta la apariencia del navegador en Windows, salvo que el sitio se instale como PWA (eso requiere pasos adicionales).

💡 ¿Dónde colocar el código?

Puedes:

  • Pegarlo al final del archivo functions.php de tu tema hijo.
  • O usar el plugin gratuito Code Snippets (recomendado).

✅ Código PHP para modo oscuro + navegador móvil

phpCopiarEditar function modo_oscuro_completo() {
    ?>
    <!-- Colores de navegador móvil -->
    <meta name="theme-color" content="#000000">
    <meta name="msapplication-navbutton-color" content="#000000">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <!-- Estilos para forzar modo oscuro básico -->
    <style>
        body {
            background-color: #000000 !important;
            color: #ffffff !important;
        }

        a, p, h1, h2, h3, h4, h5, h6, span, div {
            color: #ffffff !important;
        }

        header, footer, nav {
            background-color: #000000 !important;
        }

        img, svg {
            filter: brightness(0.8) contrast(1.2);
        }
    </style>
    <?php
}
add_action('wp_head', 'modo_oscuro_completo');

📱 ¿Qué verás?

  • En dispositivos móviles Android, la interfaz del navegador (barra de direcciones y/o barra inferior) se pondrá negra al cargar tu sitio.
  • En el sitio web, el fondo será negro, y el texto e íconos se verán en blanco para una experiencia visual más cómoda de noche.

❗ Recomendación final

Este es un método rápido y funcional si no puedes modificar tu tema directamente. Si más adelante deseas una solución más robusta o personalizada, puedes considerar temas con soporte para modo oscuro nativo o instalar un plugin de estilo dinámico.

Páginas de mi sitio:

Servicios o productos disponibles:

Categorías de la tienda:

Entradas de blog:

100 entradas:

Otras 100:

Otras 100 entradas:

Otras 100 entradas:

Categorías de blog:

Deja un comentario

1