Change background and font color with angularjs

Question

Ok. So here is a noob question. I just started fooling around with angularjs and I was wondering if there is some sort of toggle function similar to ng-click or I have to build my own. What I want is to change the background and the font color of the body of my page, when the user checks the dark theme option.
I managed to change the color on the click function but I need it to come back to initial state when it is not checked. Any suggestions are welcome:)

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-style="myStyle">
<label><input type="checkbox" ng-click="myStyle={background:'black', color:'white'}">Dark theme</label>
<script>
app = angular.module('myApp', []);
</script>
</body>
</html>

Steve · Accepted Answer · 2018-01-30 01:22:42Z

3

You can use ng-class to apply new classes to elements. The docs are here: https://docs.angularjs.org/api/ng/directive/ngClass

I've done something similar in an app of my own, where selecting a theme from the options page applies a new class to the main content section of each page. I don't have the code available right now but I can post it in later if you would like.

answered Jan 30, 2018 at 1:22

Steve

1,9535 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maximilian Both Over a year ago

Ya, thanks, I managed to figure it out. I will post an answer with the updated solution, maybe another poor soul will need this.

DavidX · Accepted Answer · 2018-01-30 02:25:36Z

1

You'll want to add the style to the components .scss file or app.scss

.darkTheme {background:'black', color:'white'}

And then you could apply your style using the ng-class directive as Steve mentioned

<body ng-app="myApp" ng-class="{'darkTheme' : darkToggle}">

And add a model to the input

<input type="checkbox" ng-model="darkToggle">

edited Jan 30, 2018 at 2:25

answered Jan 30, 2018 at 2:00

DavidX

1,32911 silver badges16 bronze badges

Comments

Maximilian Both · Accepted Answer · 2018-01-30 02:03:24Z

0

Working solution

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.dark-theme {
    color: white;
    background: black;
}
</style>
<body ng-app="myApp" ng-class="{'dark-theme': dark}">
<label><input type="checkbox" ng-model="dark">Dark theme</label>
<script>
app = angular.module('myApp', []);
</script>
</body>
</html>

answered Jan 30, 2018 at 2:03

Maximilian Both

1913 silver badges11 bronze badges

Collectives™ on Stack Overflow

Change background and font color with angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related