Как определить два режима (ночь / день) для приложения AngularJS

0

Я работаю над приложением, использующим Angularjs. Меня поразила одна проблема с анимацией.
Я хочу добавить в свое приложение способ отображения здесь в двух режимах (ночной и дневной режим). я видел, что я могу использовать поставщика тем для изменения темы каждый раз, когда меняю режим. но есть ли еще решение для этого? например, используя каскадную таблицу стилей и как она используется.
Может ли кто-нибудь помочь мне и предложить лучший способ сделать это решение.
благодаря

  • 1
    Вы можете добавить ng-class="{day: mode == 'day', night: mode == 'night'}" к корневому элементу и добавить другой стиль в css (или sass) в зависимости от класса. и используйте $scope.mode = 'day' или $scope.mode = 'night' в контроллере.
  • 0
    таким образом, я должен добавить нг-класс на каждый элемент правильно? я ищу что-то глобальное
Показать ещё 1 комментарий
Теги:
sass
angular-ui-router

1 ответ

3
Лучший ответ

Все, что вам нужно, - переключить класс css на элемент body в зависимости от дня/ночи.

<body ng-class="{'night-mode': isNight()}">
    <div>
        <p>Some</p>
        <p>content</p>
        <p>Inside</p>
    </div>
</body>

В css вы определяете тему по умолчанию и ночную альтернативу:

body div {
    background-color: gray;
}

body.night-mode div {
    background-color: blue;
}

Внутренний регулятор угловой функции определяет функцию проверки ночных режимов:

function controller($scope) {
    $scope.isNight = function() {
        var hours = new Date().getHours();
        return hours > 19 || hours < 8;
    };    
}

Это, конечно, пример;)

Поделиться
  • 0
    Большое спасибо, это хорошее решение для backgroud, но проблема в том, что если я хочу преобразовывать цветной текст и элемент в каждый раз, когда я меняю режим, как это можно сделать?
  • 0
    Когда мы переключаем класс css элемента body, мы можем указать стиль каждого элемента, который находится внутри. Например: body.night-mode p {color: red} изменяет цвет шрифта каждого абзаца внутри тела в ночном режиме. Все, что вам нужно, это не забывать добавлять каждое определение стиля с помощью: body.night-mode . Вам это ясно?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню