Cómo configurar un logo para el modo oscuro en tu sitio web

Para configurar un logo específico para el modo oscuro en tu sitio web, puedes seguir los siguientes pasos:

1. Crea dos versiones del logo, una para el modo claro y otra para el modo oscuro. Asegúrate de que ambas versiones tengan el mismo tamaño y formato.
2. Agrega ambas versiones del logo como imágenes en tu proyecto.
3. Crea una clase para el modo oscuro en tu hoja de estilos CSS. Por ejemplo:

.dark-mode {
    filter: invert(100%);
}

4. Utiliza JavaScript para detectar el modo de tema actual del navegador y aplicar la clase “dark-mode” al logo correspondiente. Por ejemplo:

const logo = document.getElementById("logo");

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    logo.classList.add("dark-mode");
} else {
    logo.classList.remove("dark-mode");
}

5. Utiliza JavaScript para detectar el cambio de modo de tema del navegador y aplicar la clase “dark-mode” al logo correspondiente. Por ejemplo:

const logo = document.getElementById("logo");
const observer = new MediaQueryList();

observer.addListener((e) => {
    if (e.matches) {
        logo.classList.add("dark-mode");
    } else {
        logo.classList.remove("dark-mode");
    }
});
observer.addEventListener("change", (e) => {
    if (e.matches) {
        logo.classList.add("dark-mode");
    } else {
        logo.classList.remove("dark-mode");
    }
});

Con estos pasos, tu logo se mostrará en su versión oscura cuando el usuario tenga habilitado el modo oscuro en su navegador y en su versión clara cuando el usuario tenga habilitado el modo claro.

Cómo configurarlo en WordPress

En WordPress, puedes configurar un logo específico para el modo oscuro utilizando un plugin o editando tu tema directamente.

1. Utilizando un plugin: Puedes utilizar un plugin de WordPress como “Dark Mode” o “Dark Mode Switcher” para activar el modo oscuro en tu sitio web. Estos plugins te permiten configurar un logo específico para el modo oscuro. Una vez instalado y configurado el plugin, busca en las opciones del plugin donde puedas subir un logo específico para el modo oscuro.
2. Editando tu tema: Si prefieres editar tu tema directamente, puedes crear una clase en tu hoja de estilos CSS para el modo oscuro y utilizar JavaScript para detectar el modo de tema actual del navegador y aplicar la clase al logo correspondiente.

• Crea dos versiones del logo, una para el modo claro y otra para el modo oscuro y agrega ambas versiones del logo como imágenes en tu proyecto.
• Crea una clase para el modo oscuro en tu hoja de estilos CSS. Por ejemplo:

.dark-mode {
    filter: invert(100%);
}

Utiliza JavaScript para detectar el modo de tema actual del navegador y aplicar la clase “dark-mode” al logo correspondiente. Por ejemplo:

const logo = document.getElementById("logo");

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    logo.classList.add("dark-mode");
} else {
    logo.classList.remove("dark-mode");
}

Utiliza JavaScript para detectar el cambio de modo de tema del navegador y aplicar la clase “dark-mode” al logo correspondiente. Por ejemplo:

const logo = document.getElementById("logo");
const observer = new MediaQueryList();

observer.addListener((e) => {
    if (e.matches) {
        logo.classList.add("dark-mode");
    } else {
        logo.classList.remove("dark-mode");
}
});
observer.addEventListener("change", (e) => {
if (e.matches) {
logo.classList.add("dark-mode");
} else {
logo.classList.remove("dark-mode");
}
});

Ten en cuenta que el código anterior es solo un ejemplo, puedes adaptarlo a tus necesidades y puedes utilizar diferentes metodos para detectar el modo de tema del navegador. Una vez que hayas configurado el logo específico para el modo oscuro, asegúrate de incluir tu código JavaScript en tu archivo functions.php o en un archivo javascript externo y inclúyelo en tu sitio web a través de wp_enqueue_script().

Lee también: Cómo crear un botón con CSS, HTML y JavaScript