web background color change on network status

config.xml

@@ -3,7 +3,7 @@
     <name>gabinete digital</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
-    <content original-src="index.html" src="http://localhost:8100" />
+    <content src="index.html" />
     <access origin="*" />
     <allow-navigation href="http://*/*" />
     <allow-navigation href="https://*/*" />

src/app/services/network.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NetworkService } from './network.service';
+
+describe('NavigationService', () => {
+  let service: NetworkService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NetworkService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/network.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Network } from '@ionic-native/network/ngx';
+import { Platform } from '@ionic/angular';
+import { fromEvent, merge, of, Observable } from 'rxjs';
+import { mapTo } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NetworkService {
+
+    constructor(
+        private network: Network) { }
+
+    checkNetworkConnection(){
+        this.network.onConnect().subscribe((value) => {
+            
+            document.body.style.setProperty(`--color`, "#0782C9");
+            
+            console.log('network connected!',value);
+          });
+    }
+
+    checkNetworkDisconnection(){
+        this.network.onDisconnect().subscribe((value) => {
+            document.body.style.setProperty(`--color`, "#eeeb30");
+            console.log('network was disconnected :-('),value;
+      
+          });
+    }
+}

src/app/services/socket/synchro.service.ts

@@ -56,6 +56,10 @@ export class SynchroService {
 
 	private onopen = () =>{
     document.body.style.setProperty(`--color`, "#0782C9");
+    document.body.style.setProperty(`--color2`, "#45BAFF");
+    document.body.style.setProperty(`--color3`, "#0782C9");
+    document.body.style.setProperty(`--color4`, "#0782c9f0");
+    document.body.style.setProperty(`--color5`, "#45BAFF");
     console.log('open ======================= welcome to socket server')
 
 	}
@@ -86,7 +90,11 @@ export class SynchroService {
 				// event.code is usually 1006 in this case
 				console.log('[close] Connection died');
         console.log('Reconnect')
-        document.body.style.setProperty(`--color`, "#eeeb30");
+        document.body.style.setProperty(`--color`, "#ffb703");
+        document.body.style.setProperty(`--color2`, "#ffb703");
+        document.body.style.setProperty(`--color3`, "#ffb703");
+        document.body.style.setProperty(`--color4`, "#ffb703");
+        document.body.style.setProperty(`--color5`, "#ffb703");
         this.connect()
 			}
 		}, 100);

src/global.scss

@@ -731,7 +731,11 @@ app-header-no-search  .ion-toolbar{
 } */
 
 :root {
-    --color : #0782C9;
+    --color : hsl(202, 93%, 41%);
+    --color2: #45BAFF;
+    --color3: #0782C9;
+    --color4: #0782c9f0;
+    --color5: #45BAFF;
     }
 
 body, .blue-background{ background: var(--color) !important;}
@@ -739,7 +743,7 @@ body, .blue-background{ background: var(--color) !important;}
 @media only screen and (min-width: 1365px) {
 
     body{
-        background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
+        background: linear-gradient(270deg, var(--color2) 0%, var(--color3) 23.44%, var(--color4) 78.13%, var(--color5) 100%) !important;
     }
     .blue-background {
         background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;