1

Estoy Aprendiendo PHP y tengo un Problema: quiero hacer un botón de Modo Noche o "Night Mode" para que cuando se presione, el estilo css de la pagina cambie a otro y viceversa.

El estilo "day",por decirlo, así es:

<link rel='stylesheet' id='color-scheme-css' href='http://www.onpelis.ml/wp-content/themes/dooplay/assets/css/colors.fusion.css' type='text/css' media='all' />

Y el estilo "night" seria este:

<link rel='stylesheet' id='color-scheme-css' href='http://www.onpelis.ml/wp-content/themes/dooplay/assets/css/colors.dark.css' type='text/css' media='all' />

(ambos stylesheet están en el head)

Existe alguna manera de que cuando se presione un botón o switch se cambie el "colors.fusion.css" a "colors.dark.css"?

2
  • Por favor replantea tu duda, esto es más de css y js que de PHP
    – user75901
    el 28 feb. 2019 a las 21:27
  • le aplicas la clase modoninja al body y que el css del nightmode dependa de eso el 28 feb. 2019 a las 23:33

1 respuesta 1

3

Hay varias formas de hacerlo, requires 3 elementos: HTML con el contenido de la página, que no vas a cambiar, estilos CSS para el tema claro y para el tema oscuro y javascript para realizar el cambio entre temas.

Si no hay mucho CSS relacionado con el cambio de tema de color puedes usar el método de añadir / quitar una clase a un elemento contenedor y hacer que uno de los dos esquemas de color dependa de esta clase, por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day And NightMode</title>
    <style type="text/css">
        * {
            margin    : 0;
            padding   : 0;
            box-sizing: border-box;
            -moz-box-sizing   : border-box;
            -webkit-box-sizing: border-box;
        }

        article {
            border-radius: 5px;
            margin-top: 1em;
            padding: 2% 5%;
        }
        article div {
            margin-top   : 50px;
            padding      : 1em;
        }
        button {
            padding: 5px;
        }
        ul {
            margin-left: 2em;
            margin-top : 1em;
        }

        .center {
            text-align: center;
        }
        .content {
            border       : 1px solid grey;
            border-radius: 5px;
            margin       : 2em 7em;
            padding      : 2em;
        }
        .contrastable {
            border-radius: 5px 5px 0 0;
        }
        .grid {
            border : none;
            margin : 1em auto;
            padding: 0;
            width  : 312px;
        }
        .grid div {
            border-radius: 5px;
            border       : none;
            display      : inline-block;
            height       : 150px;
            margin       : 0.1em;
            width        : 150px;
        }
    </style>
</head>
<body>

    <div class="content" id="content">
        <div class="center">
            <button onclick="swapDayAndNight()">Cambiar colores</button>
        </div>
        <article>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, harum nemo fugit corrupti sequi alias odit mollitia a nesciunt ipsa vero, saepe repellendus voluptas, debitis laborum dicta! Nobis quo, fuga.</p>
            </div>
            <div class="contrastable">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <ul>
                    <li>Uno</li>
                    <li>Dos</li>
                    <li>Tres</li>
                    <li>Cuatro</li>
                </ul>
            </div>
            <div class="grid">
                <div class="red-bg"></div>
                <div class="blue-bg"></div>
                <div class="blue-bg"></div>
                <div class="red-bg"></div>
            </div>
        </article>
    </div>

    <link rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
    <link rel='stylesheet' href='public/css/dark-theme.css' type='text/css'>

    <script type="text/javascript">
        function swapDayAndNight()
        {
            var element = document.getElementById('content');
            element.classList.toggle('dark-theme');
        }
    </script>
</body>
</html>

Ahora los ficheros con los estilos (puedes poner todos en uno si usas esta técnica):

/**********************************************************************/
/*** light-theme ******************************************************/

article div {
    border-bottom: 1px solid grey;
}

.blue-bg {
    background: blue;
}
.contrastable {
    background: #D9EC87;
}
.contrastable * {
    color: #740100;
}
.red-bg {
    background: red;
}


/**********************************************************************/
/*** dark-theme ******************************************************/

.dark-theme article div {
    border-color: white;
}
.dark-theme article {
    background: black;
    color     : white;
}
.dark-theme .blue-bg {
    background: darkblue;
}
.dark-theme .contrastable {
    background: #740100;
}
.dark-theme .contrastable * {
    color: #D9EC87;
}
.dark-theme .red-bg {
    background: darkred;
}


También y siguiendo lo que creo que querías hacer, puedes cambiar la hoja de estilo que se carga, para lo que debes quitar la clase .dark-theme de dark-theme.css:

<!DOCTYPE html>
<html>
<head>
    <title>Cambiar tema de color</title>
</head>
<body>

    <div class="content">
        <div class="center">
            <button onclick="swapDayAndNight()">Cambiar colores</button>
        </div>
        <article class="contrastable">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, esse, suscipit! Suscipit aspernatur, cupiditate quasi commodi blanditiis reiciendis quae quod aliquam natus omnis saepe voluptas deleniti, necessitatibus ipsum praesentium expedita!</p>
        </article>
    </div>

    <link id="color-theme" rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
    <script>
        var element = document.getElementById('color-theme');
        var light_styles = 'public/css/light-theme.css';
        var dark_styles  = 'public/css/dark-theme.css';

        var theme = 'light';

        function swapDayAndNight()
        {
            if (theme == 'light') {
                theme = 'dark';
                element.setAttribute('href', dark_styles);
            } else {
                theme = 'light';
                element.setAttribute('href', light_styles);
            }
        }
    </script>
</body>
</html>

Nota: esto último funciona perfectamente en local, pero si cargas los estilos remotamente, que será lo normal, solo cargas la primera hoja porque con javascript estás editando el DOM, no recargando la página, con lo que tienes que hackear el método que te indico, por ejemplo, cargas ambas hojas de estilo, mismos selectores y debajo la que debe aparecer por defecto (sera la que mande). Así ambas se descargan y solo tendrás que intercambiar su orden cuando toque cambiar el tema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.