for #15 add light/dark color schema handler

slaclab · Jan 16, 2025 · 13c579b · 13c579b
1 parent b0c8eef
commit 13c579b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 
 @Component({
     selector: 'app-root',
@@ -10,4 +10,18 @@ import { Component } from '@angular/core';
     styles: [],
 })
 export class AppComponent {
+    constructor(private renderer: Renderer2) {
+        // respond to system color preference changes (light vs dark)
+        const p = window.matchMedia('(prefers-color-scheme: dark)');
+        p.addEventListener('change', this.handleColorScheme.bind(this));
+        this.handleColorScheme(p);
+    }
+
+    handleColorScheme(event: MediaQueryList | MediaQueryListEvent) {
+        this.renderer.setAttribute(
+            document.querySelector('html'),
+            'data-bs-theme',
+            event.matches ? 'dark' : 'light',
+        );
+    }
 }
diff --git a/ui/src/app/screen/screen.component.ts b/ui/src/app/screen/screen.component.ts
@@ -41,7 +41,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
               <button [disabled]="! isAcquiring || ! form.value.pv" class="btn btn-danger" type="button" (click)="stopAcquiringImages()">Stop</button>
             </div>
             <div class="col-sm-4">
-              <button [disabled]="isAcquiring || ! form.value.pv" class="btn btn-outline-dark" type="button" (click)="getSingleImage()">Single</button>
+              <button [disabled]="isAcquiring || ! form.value.pv" class="btn btn-outline-info" type="button" (click)="getSingleImage()">Single</button>
             </div>
           </div>
         </div>

diff --git a/ui/src/index.html b/ui/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Profile Monitor</title>
+  <title></title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">