Как Могла бы делать Кнопка “Нигт Моде”?

Я Изучаю PHP и у меня есть Проблема: я хочу сделать кнопку Способа Ночью или "Нигт Моде" для того, чтобы, когда на него нажмут, стиль css страницу изменил другому и наоборот.

Стиль "day", из-за того, что это говорит, так:

<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' />

И стиль "night" был бы этим:

<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' />

(оба stylesheet находятся в head)

Существует какой-то способ, которого, когда нажмут на кнопку или переключатель изменил себе "colors.fusion.css" в "colors.dark.css"?

1
задан 28.02.2019, 13:54
1 ответ

Есть несколько способов это делать, requires 3 элемента: HTML с контентом ее pГЎgina, который ты не будешь менять, стили CSS для ясной темы и для темной темы и javascript, чтобы реализовывать изменение между темами.

, Если нет много CSS, связанного с изменением темы цвета, ты можешь использовать mГ©todo aГ±adir / снимать класс в элемент контейнер и способствовать тому, чтобы одна из двух схем цвета зависела от этого класса, например:

<!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>

Сейчас файлы со стилями (ты можешь помещать все в один, если ты используешь эту 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 и продолжая то, во что я верю, что querГ-схвати, делать, ты можешь менять таблицу стилей, которая загружает , для которого ты должен снимать класс .dark-theme 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>

Замечает: это Гєltimo функционируй верно в помещении, но если ты загружаешь стили удаленно, что serГЎ нормальное, ты только загружаешь первый лист, потому что с javascript estГЎs издавая DOM, не перезагружая ее pГЎgina, с которым у тебя есть, что подвергаться нападению хакеров mГ©todo, который я показываю тебе, например, ты загружаешь обе таблицы стилей, те же селекторы и внизу та, которая должна оказываться назначенной по умолчанию (это будет та, которая будет властвовать). AsГ - оба загружаются и только tendrГЎs, что обмениваться Вашей командой, когда он коснется менять тему.

2
ответ дан 19.11.2019, 22:45

Теги

Похожие вопросы