Mahmoud Mahmoud - 3 months ago 46
Sass (Sass) Question

How to define two mode (night/day) for AngularJS Application

I am working on an application using Angularjs. I am struck with one issues Animations.

I want to add to my application the way that make here be displayed in two mode (night and day mode). i saw that i can use the theme provider to change the theme every time i change the mode. but is there any else solution for this? for example using cascading style sheet and how is it used.

Can any one please help me and suggest the Best way to do this Solution.

Thanks

Answer

All you need is to toggle css class on the body element depending on the day/night condition.

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

In css you define default theme and the night alternative:

body div {
    background-color: gray;
}

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

Inside angularjs controller define function checking night-mode conditions:

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

That's an example of course ;)

Comments