darkmode now functional + refactoring

README.md

@@ -1,2 +1,2 @@
 # led_control_app
-android app for https://github.com/leoratte/led_control
+web and android app for https://github.com/leoratte/led_control

package.json

@@ -1,6 +1,6 @@
 {
   "name": "led_control",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Leonard Anderweit",
   "homepage": "https://leoratte.de/",
   "scripts": {

src/app/app.module.ts

@@ -16,10 +16,17 @@ import { ManageLedComponent } from './components/manage-led/manage-led.component
 import { FormsModule } from '@angular/forms';
 import { MenuComponent } from './components/menu/menu.component';
 import { AnimationCreationComponent } from './components/animation-creation/animation-creation.component';
+import { DarkmodeToggleComponent } from './components/darkmode-toggle/darkmode-toggle.component';
 
 
 @NgModule({
-  declarations: [AppComponent, ManageLedComponent, MenuComponent, AnimationCreationComponent],
+  declarations: [
+    AppComponent,
+    ManageLedComponent, 
+    MenuComponent, 
+    AnimationCreationComponent,
+    DarkmodeToggleComponent
+  ],
   entryComponents: [],
   imports: [
     BrowserModule,

src/app/components/darkmode-toggle/darkmode-toggle.component.html

@@ -0,0 +1 @@
+<ion-toggle (ionChange)="this.update($event.detail.checked)" [(checked)]="this.darkmode" slot="end"></ion-toggle>

src/app/components/darkmode-toggle/darkmode-toggle.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { DarkmodeToggleComponent } from './darkmode-toggle.component';
+
+describe('DarkmodeToggleComponent', () => {
+  let component: DarkmodeToggleComponent;
+  let fixture: ComponentFixture<DarkmodeToggleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DarkmodeToggleComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DarkmodeToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/darkmode-toggle/darkmode-toggle.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { StorageService } from 'src/app/services/storage.service';
+
+const DARKMODE_KEY = 'darkmode';
+@Component({
+  selector: 'app-darkmode-toggle',
+  templateUrl: './darkmode-toggle.component.html',
+  styleUrls: ['./darkmode-toggle.component.scss'],
+})
+export class DarkmodeToggleComponent implements OnInit {
+  public darkmode: boolean;
+  constructor(
+    private storageService: StorageService
+  ) {
+    this.load();
+  }
+
+  ngOnInit() {}
+
+  load(): void {
+    this.storageService
+    .load(DARKMODE_KEY)
+    .then((darkmode: boolean) =>{
+      if(darkmode != null) {
+        this.darkmode = darkmode;
+      } else {
+         this.darkmode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      }
+      this.apply();
+    });
+  }
+
+  storeDarkmode(): void {
+    this.storageService.store(DARKMODE_KEY, this.darkmode);
+  }
+
+  update(darkmode: boolean): void {
+    this.darkmode = darkmode;
+    this.storeDarkmode();
+    this.apply();
+  }
+
+  apply(): void {
+    if(this.darkmode){
+      document.body.setAttribute('data-theme', 'dark');
+    }
+    else{
+      document.body.setAttribute('data-theme', 'light');
+    }
+  }
+}

src/app/components/menu/menu.component.html

@@ -17,7 +17,7 @@
       <ion-item>
         <ion-icon name="moon" slot="start"></ion-icon>
         <ion-label>darkmode</ion-label>
-        <ion-toggle (ionChange)="onClick($event)" slot="end"></ion-toggle>
+        <app-darkmode-toggle></app-darkmode-toggle>
       </ion-item>
       <ion-item button (click)="manageLed()">
         <ion-icon name="settings-outline" slot="start"></ion-icon>

src/app/components/menu/menu.component.ts

@@ -12,7 +12,10 @@ export class MenuComponent implements OnInit {
 
   constructor(
     private websocketService: WebsocketService,
-    private selectLedService: SelectLedService) { }
+    private selectLedService: SelectLedService
+    ) { 
+
+    }
 
   ngOnInit() {}
 
@@ -24,11 +27,6 @@ export class MenuComponent implements OnInit {
     this.websocketService.connect();
   }
 
-  onClick(event: any) {
-    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-    // console.log(systemDark);
-  }
-
   manageLed(): void {
     this.selectLedService.presentManageLed();
   }

src/app/services/colors.service.ts

@@ -43,9 +43,12 @@ export class ColorsService {
 
   load(): void {
     this.storageService.load(COLOR_KEY).then((colors: string[]) => {
-      for (const iterator of colors) {
-        this.addColor(iterator);
+      if(colors != null){
+        for (const iterator of colors) {
+          this.addColor(iterator);
+        }
       }
+
     });
   }
 

src/app/services/select-led.service.ts

@@ -39,9 +39,12 @@ export class SelectLedService {
 
   load(): void {
     this.storageService.load(LEDMAP_KEY).then((ledmap: Led[]) => {
-      if (ledmap.length === 5) {
-        this.ledmap = ledmap;
+      if (ledmap != null) {
+        if (ledmap.length === 5) {
+          this.ledmap = ledmap;
+        }
       }
+
     });
   }
 

src/theme/variables.scss

@@ -121,13 +121,12 @@
   --ion-color-tint: var(--ion-color-blue-tint);
 }
 
-@media (prefers-color-scheme: dark) {
   /*
    * Dark Colors
    * -------------------------------------------
    */
 
-  body {
+  body[data-theme="dark"] {
     --ion-color-primary: #428cff;
     --ion-color-primary-rgb: 66,140,255;
     --ion-color-primary-contrast: #ffffff;
@@ -197,7 +196,7 @@
    * -------------------------------------------
    */
 
-  .ios body {
+  .ios body[data-theme="dark"] {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0,0,0;
 
@@ -236,7 +235,7 @@
    * -------------------------------------------
    */
 
-  .md body {
+  .md body[data-theme="dark"] {
     --ion-background-color: #121212;
     --ion-background-color-rgb: 18,18,18;
 
@@ -271,4 +270,4 @@
   ion-title.title-large {
     --color: white;
   }
-}
+