add lighting mode option for terminal and log widgets

homebridge · Jan 24, 2025 · 0ce2493 · 0ce2493
1 parent ced39ab
commit 0ce2493
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,8 @@ Plugin developers:
 - add 'homebridge name' setting to settings page
 - migrate bootstrap from `v4` to `v5`
 - fix plugin config/bridge screens for certain plugins
+- add lighting mode option for terminal and log widgets
+  - only available when the UI is already in light mode
 
 ### Other Changes
 

diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.html b/ui/src/app/modules/status/widget-control/widget-control.component.html
@@ -83,7 +83,17 @@ <h5 class="modal-title">{{ 'status.widget.title_manage_widget' | translate }}</h
           </select>
         </div>
       </li>
-      } @case ('TerminalWidgetComponent') {
+      @if (this.isLightMode) {
+      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
+        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'settings.display.lighting_mode' | translate }}</label>
+        <div class="text-start text-md-end w-100 w-md-50">
+          <select class="custom-select" [(ngModel)]="widget.theme">
+            <option value="dark">{{ 'settings.display.dark' | translate }}</option>
+            <option value="light">{{ 'settings.display.light' | translate }}</option>
+          </select>
+        </div>
+      </li>
+      } } @case ('TerminalWidgetComponent') {
       <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
         <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.font_size' | translate }}</label>
         <div class="text-start text-md-end w-100 w-md-50">
@@ -104,7 +114,17 @@ <h5 class="modal-title">{{ 'status.widget.title_manage_widget' | translate }}</h
           </select>
         </div>
       </li>
-      } @case ('ClockWidgetComponent') {
+      @if (this.isLightMode) {
+      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
+        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'settings.display.lighting_mode' | translate }}</label>
+        <div class="text-start text-md-end w-100 w-md-50">
+          <select class="custom-select" [(ngModel)]="widget.theme">
+            <option value="dark">{{ 'settings.display.dark' | translate }}</option>
+            <option value="light">{{ 'settings.display.light' | translate }}</option>
+          </select>
+        </div>
+      </li>
+      } } @case ('ClockWidgetComponent') {
       <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
         <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.clock_timeformat' | translate }}</label>
         <div class="text-start text-md-end w-100 w-md-50">

diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -15,6 +15,7 @@ import {
 } from 'rxjs/operators'
 
 import { ApiService } from '@/app/core/api.service'
+import { SettingsService } from '@/app/core/settings.service'
 import { environment } from '@/environments/environment'
 
 @Component({
@@ -32,6 +33,7 @@ export class WidgetControlComponent implements OnInit {
   $activeModal = inject(NgbActiveModal)
   private $api = inject(ApiService)
   private $http = inject(HttpClient)
+  private $settings = inject(SettingsService)
   private $translate = inject(TranslateService)
 
   @Input() widget: any
@@ -72,6 +74,7 @@ export class WidgetControlComponent implements OnInit {
   ]
 
   public networkInterfaces: string[] = []
+  public isLightMode: boolean
 
   constructor() {}
 
@@ -96,13 +99,17 @@ export class WidgetControlComponent implements OnInit {
   public searchCountryCodeFormatter = (result: any) => `${result.name}, ${result.country}`
 
   ngOnInit() {
+    this.isLightMode = this.$settings.actualLightingMode === 'light'
     if (this.widget.component === 'HomebridgeLogsWidgetComponent' || this.widget.component === 'TerminalWidgetComponent') {
       if (!this.widget.fontWeight) {
         this.widget.fontWeight = '400'
       }
       if (!this.widget.fontSize) {
         this.widget.fontSize = 15
       }
+      if (!this.widget.theme) {
+        this.widget.theme = 'dark'
+      }
     }
     if (this.widget.component === 'NetworkWidgetComponent') {
       // Get a list of active network interfaces from the settings

diff --git a/...c/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html b/...c/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html
@@ -1,7 +1,14 @@
-<div #widgetcontainer class="flex-column d-flex align-items-stretch h-100 w-100" style="background-color: #2b2b2b">
+<div
+  #widgetcontainer
+  class="flex-column d-flex align-items-stretch h-100 w-100"
+  [ngStyle]="{ 'background-color': theme === 'dark' ? '#2b2b2b' : '' }"
+>
   <div
     #terminaltitle
-    style="color: #ffffff; background-color: #2b2b2b"
+    [ngStyle]="{
+      'color': theme === 'dark' ? '#ffffff' : '',
+      'background-color': theme === 'dark' ? '#2b2b2b': '',
+    }"
     class="drag-handler p-2"
     [ngClass]="{ 'widget-cursor': widget.draggable }"
   >

diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -5,6 +5,7 @@ import { Subject } from 'rxjs'
 import { ITerminalOptions } from 'xterm'
 
 import { LogService } from '@/app/core/log.service'
+import { SettingsService } from '@/app/core/settings.service'
 
 @Component({
   templateUrl: './homebridge-logs-widget.component.html',
@@ -17,6 +18,7 @@ import { LogService } from '@/app/core/log.service'
 })
 export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
   private $log = inject(LogService)
+  private $settings = inject(SettingsService)
 
   readonly widgetContainerElement = viewChild<ElementRef>('widgetcontainer')
   readonly titleElement = viewChild<ElementRef>('terminaltitle')
@@ -30,19 +32,32 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
 
   private fontSize = 15
   private fontWeight: ITerminalOptions['fontWeight'] = '400'
+  public theme: 'dark' | 'light' = 'dark'
 
   constructor() {}
 
   ngOnInit() {
     this.fontSize = this.widget.fontSize || 15
     this.fontWeight = this.widget.fontWeight || 400
+    if (this.$settings.actualLightingMode === 'dark') {
+      this.widget.theme = 'dark'
+    }
+    this.theme = this.widget.theme || 'dark'
 
     setTimeout(() => {
       this.$log.startTerminal(this.termTarget(), {
         cursorBlink: false,
-        theme: {
-          background: '#2b2b2b',
-        },
+        theme: this.theme !== 'light'
+          ? {
+              background: '#2b2b2b',
+            }
+          : {
+              background: '#00000000',
+              foreground: '#2b2b2b',
+              cursor: '#d2d2d2',
+              selection: '#d2d2d2',
+            },
+        allowTransparency: this.theme === 'light',
         fontSize: this.fontSize,
         fontWeight: this.fontWeight,
       }, this.resizeEvent)
@@ -56,11 +71,34 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
 
     this.configureEvent.subscribe({
       next: () => {
-        if (this.widget.fontSize !== this.fontSize || this.widget.fontWeight !== this.fontWeight) {
+        let changed = false
+        if (this.widget.fontSize !== this.fontSize) {
           this.fontSize = this.widget.fontSize
-          this.fontWeight = this.widget.fontWeight
           this.$log.term.options.fontSize = this.widget.fontSize
+          changed = true
+        }
+        if (this.widget.fontWeight !== this.fontWeight) {
+          this.fontWeight = this.widget.fontWeight
           this.$log.term.options.fontWeight = this.widget.fontWeight
+          changed = true
+        }
+        if (this.widget.theme !== this.theme) {
+          this.theme = this.widget.theme
+          this.$log.term.options.theme = this.theme !== 'light'
+            ? {
+                background: '#2b2b2b',
+              }
+            : {
+                background: '#00000000',
+                foreground: '#2b2b2b',
+                cursor: '#d2d2d2',
+                selection: '#d2d2d2',
+              }
+          this.$log.term.options.allowTransparency = this.theme === 'light'
+          changed = true
+        }
+
+        if (changed) {
           this.resizeEvent.next(undefined)
           setTimeout(() => {
             this.$log.term.scrollToBottom()

diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html
@@ -1,7 +1,14 @@
-<div #widgetcontainer class="flex-column d-flex align-items-stretch h-100 w-100" style="background-color: #2b2b2b">
+<div
+  #widgetcontainer
+  class="flex-column d-flex align-items-stretch h-100 w-100"
+  [ngStyle]="{ 'background-color': theme === 'dark' ? '#2b2b2b' : '' }"
+>
   <div
     #terminaltitle
-    style="color: #ffffff; background-color: #2b2b2b"
+    [ngStyle]="{
+      'color': theme === 'dark' ? '#ffffff' : '',
+      'background-color': theme === 'dark' ? '#2b2b2b': '',
+    }"
     class="drag-handler p-2"
     [ngClass]="{ 'widget-cursor': widget.draggable }"
   >

diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -4,6 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core'
 import { Subject } from 'rxjs'
 import { ITerminalOptions } from 'xterm'
 
+import { SettingsService } from '@/app/core/settings.service'
 import { TerminalService } from '@/app/core/terminal.service'
 
 @Component({
@@ -17,6 +18,7 @@ import { TerminalService } from '@/app/core/terminal.service'
 })
 export class TerminalWidgetComponent implements OnInit, OnDestroy {
   private $terminal = inject(TerminalService)
+  private $settings = inject(SettingsService)
 
   readonly widgetContainerElement = viewChild<ElementRef>('widgetcontainer')
   readonly titleElement = viewChild<ElementRef>('terminaltitle')
@@ -30,19 +32,32 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
 
   private fontSize = 15
   private fontWeight: ITerminalOptions['fontWeight'] = '400'
+  public theme: 'dark' | 'light' = 'dark'
 
   constructor() {}
 
   ngOnInit() {
     this.fontSize = this.widget.fontSize || 15
     this.fontWeight = this.widget.fontWeight || 400
+    if (this.$settings.actualLightingMode === 'dark') {
+      this.widget.theme = 'dark'
+    }
+    this.theme = this.widget.theme || 'dark'
 
     setTimeout(() => {
       this.$terminal.startTerminal(this.termTarget(), {
         cursorBlink: false,
-        theme: {
-          background: '#2b2b2b',
-        },
+        theme: this.theme !== 'light'
+          ? {
+              background: '#2b2b2b',
+            }
+          : {
+              background: '#00000000',
+              foreground: '#2b2b2b',
+              cursor: '#d2d2d2',
+              selection: '#d2d2d2',
+            },
+        allowTransparency: this.theme === 'light',
         fontSize: this.fontSize,
         fontWeight: this.fontWeight,
       }, this.resizeEvent)
@@ -56,11 +71,34 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
 
     this.configureEvent.subscribe({
       next: () => {
-        if (this.widget.fontSize !== this.fontSize || this.widget.fontWeight !== this.fontWeight) {
+        let changed = false
+        if (this.widget.fontSize !== this.fontSize) {
           this.fontSize = this.widget.fontSize
-          this.fontWeight = this.widget.fontWeight
           this.$terminal.term.options.fontSize = this.widget.fontSize
+          changed = true
+        }
+        if (this.widget.fontWeight !== this.fontWeight) {
+          this.fontWeight = this.widget.fontWeight
           this.$terminal.term.options.fontWeight = this.widget.fontWeight
+          changed = true
+        }
+        if (this.widget.theme !== this.theme) {
+          this.theme = this.widget.theme
+          this.$terminal.term.options.theme = this.theme !== 'light'
+            ? {
+                background: '#2b2b2b',
+              }
+            : {
+                background: '#00000000',
+                foreground: '#2b2b2b',
+                cursor: '#d2d2d2',
+                selection: '#d2d2d2',
+              }
+          this.$terminal.term.options.allowTransparency = this.theme === 'light'
+          changed = true
+        }
+
+        if (changed) {
           this.resizeEvent.next(undefined)
           setTimeout(() => {
             this.$terminal.term.scrollToBottom()