Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet for index.html is provided below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src="cordova.js"></script>-->
<!-- your app's js -->
<script src="js/app_courses.js"></script>
<script src="js/controllers_2_courses.js"></script>
<script src="js/services_courses.js"></script>
</head>
<body ng-app="CITC">
<ion-nav-view></ion-nav-view>
<script>
// Get references to the elements
const paneElements = document.querySelectorAll('.pane');
const viewElements = document.querySelectorAll('.view');
// Update the background color for each element
paneElements.forEach((element) => {
element.style.backgroundColor = '#111D12';
});
viewElements.forEach((element) => {
element.style.backgroundColor = '#111D12';
});
</script>
</body>
</html>