Just dipping my toes into Angular, so please bear with me. How can I create a 'Night Mode' feature where users can switch between two CSS styles that apply across all views?
For example:
View 1:
<ion-view>
<ion-nav-bar></ion-nav-bar>
<ion-content>
<ion-toggle toggle-class="toggle-positive" ng-click="activeButton();">Night Mode</ion-toggle>
</ion-content>
</ion-view>
View 2:
<ion-view>
<ion-nav-bar></ion-nav-bar>
<ion-content>
<div ng-class="'active' : isActive">Change Me!</div>
</ion-content>
</ion-view>
JS:
classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
CSS:
.active {
background: red;
}
This setup doesn't work as expected. It only applies changes within the same view, but what if I want to modify an element's style in one view from another? Even if they share the same controller, it seems challenging.
I've come across suggestions of using a service to pass variables between controllers, would this approach be relevant to my issue?
Appreciate any insights!