feat: light mode option

angular.json

@@ -34,8 +34,8 @@
               "src/manifest.webmanifest"
             ],
             "styles": [
-              "src/assets/styles/purple-green.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/material.scss"
             ],
             "scripts": [
               "node_modules/marked/marked.min.js"

src/app/app.component.html

@@ -191,7 +191,7 @@
   <ng-container *ngIf="!settings.isTauri; else tauri">
     <button (click)="showContextMenu($event, true); $event.stopPropagation()"
             [matTooltip]="'MORE' | translate" [attr.aria-label]="'MORE' | translate"
-            matTooltipPosition="left" matTooltipShowDelay="1000"
+            matTooltipPosition="left" [matTooltipShowDelay]="1000"
             class="context-menu-button" mat-icon-button>
       <mat-icon>menu_open</mat-icon>
     </button>
@@ -200,7 +200,7 @@
     <button (click)="openFileDialog(); $event.stopPropagation()"
             [matTooltip]="'OPEN_FILE' | translate" [attr.aria-label]="'OPEN_FILE' | translate"
             class="context-menu-button" mat-icon-button matTooltipPosition="left"
-            matTooltipShowDelay="1000">
+            [matTooltipShowDelay]="1000">
       <mat-icon>file_open</mat-icon>
     </button>
   </ng-template>
@@ -245,6 +245,17 @@
       {{ 'ENABLE_DBL_CLICK_MODE' | translate }}
     </button>
 
+    <button *ngIf="!settings.lightMode" (click)="settings.lightMode = true" mat-menu-item
+            [attr.aria-label]="'ENABLE_LIGHT_MODE' | translate">
+      <mat-icon>light_mode</mat-icon>
+      {{ 'ENABLE_LIGHT_MODE' | translate }}
+    </button>
+    <button *ngIf="settings.lightMode" (click)="settings.lightMode = false" mat-menu-item
+            [attr.aria-label]="'ENABLE_DARK_MODE' | translate">
+      <mat-icon>dark_mode</mat-icon>
+      {{ 'ENABLE_DARK_MODE' | translate }}
+    </button>
+
     <ng-container *ngIf="settings.isTauri">
       <button *ngIf="!settings.alwaysOnTop" (click)="settings.alwaysOnTop = true" mat-menu-item
               [attr.aria-label]="'ENABLE_ALWAYS_ON_TOP' | translate">

src/app/app.component.scss

@@ -125,7 +125,7 @@
   animation: logo-animation cubic-bezier(.5, -.3, 0, 2) 6s;
   transform: translate(2em, -0.24em) scale(0.2);
   width: auto;
-  filter: drop-shadow(0 0 16px black);
+  filter: var(--drop-shadow-logo);
   z-index: 103;
 }
 

src/app/components/dialogs/edit-tab-dialog/edit-tab-dialog.component.scss

@@ -1,6 +1,6 @@
 .edit-dialog-content {
   padding: 16px;
-  background-color: #161616;
+  background-color: var(--color-background);
 }
 
 .color-button {

src/app/components/draggables/image/image.component.html

@@ -199,14 +199,14 @@
   <ng-container *ngFor="let item of dataService.tab.images">
     <button (click)="connectTo(item)" *ngIf="image !== item"
             mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
-            [style.background]="'#212121'">
+            [style.background]="'var(--color-note)'">
       <mat-icon>{{image.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
       {{DisplayValue.fromImage(item)}}
     </button>
   </ng-container>
   <button *ngIf="image.connectedTo"  (click)="connectTo(undefined)"
           mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
-          [style.background]="'#212121'">
+          [style.background]="'var(--color-note)'">
     <mat-icon>link_off</mat-icon>
     {{'CONNECT_TO_NOTHING' | translate}}
   </button>

src/app/components/draggables/note-list/note-list.component.html

@@ -229,14 +229,14 @@
   <ng-container *ngFor="let item of dataService.tab.images">
     <button (click)="connectTo(item)"
             mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
-            [style.background]="'#212121'">
+            [style.background]="'var(--color-note)'">
       <mat-icon>{{noteList.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
       {{DisplayValue.fromImage(item)}}
     </button>
   </ng-container>
   <button *ngIf="noteList.connectedTo"  (click)="connectTo(undefined)"
           mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
-          [style.background]="'#212121'">
+          [style.background]="'var(--color-note)'">
     <mat-icon>link_off</mat-icon>
     {{'CONNECT_TO_NOTHING' | translate}}
   </button>

src/app/components/draggables/note/note.component.html

@@ -250,15 +250,15 @@
   <ng-container *ngFor="let item of dataService.tab.images">
     <button (click)="connectTo(item)"
             mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
-            [style.background]="'#212121'">
+            [style.background]="'var(--color-note)'">
       <mat-icon>{{note.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
       {{DisplayValue.fromImage(item)}}
     </button>
   </ng-container>
 
   <button *ngIf="note.connectedTo" (click)="connectTo(undefined)"
           mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
-          [style.background]="'#212121'">
+          [style.background]="'var(--color-note)'">
     <mat-icon>link_off</mat-icon>
     {{'CONNECT_TO_NOTHING' | translate}}
   </button>

src/app/components/draggables/task-list/task-list.component.html

@@ -268,14 +268,14 @@
   <ng-container *ngFor="let item of dataService.tab.images">
     <button (click)="connectTo(item)"
             mat-menu-item [attr.aria-label]="'CONNECT_TO' | translate"
-            [style.background]="'#212121'">
+            [style.background]="'var(--color-note)'">
       <mat-icon>{{taskList.connectedTo?.includes(item.id) ? 'close' : 'link'}}</mat-icon>
       {{DisplayValue.fromImage(item)}}
     </button>
   </ng-container>
   <button *ngIf="taskList.connectedTo" (click)="connectTo(undefined)"
           mat-menu-item [attr.aria-label]="'CONNECT_TO_NOTHING' | translate"
-          [style.background]="'#212121'">
+          [style.background]="'var(--color-note)'">
     <mat-icon>link_off</mat-icon>
     {{'CONNECT_TO_NOTHING' | translate}}
   </button>

src/app/components/tab/tab.component.html

@@ -2,8 +2,8 @@
      (mousedown)="tabMouseDown($event)"
      (drop)="dropFile($event)"
      [style.background]="tab.url ? 'url('+tab.url+') no-repeat center center' : tab.color !== '#131313'
-       ? 'linear-gradient(to bottom, transparent, #131313), radial-gradient(' + tab.color + ', #131313)'
-       : '#131313'"
+       ? 'linear-gradient(to bottom, transparent, var(--color-background)), radial-gradient(' + tab.color + ', var(--color-background))'
+       : 'var(--color-background)'"
      data-cy="tab">
   <ng-container *ngFor="let from of dataService.getCurrentTabItems()">
     <ng-container *ngIf="from.connectedTo">

src/app/models/note-list.model.ts

@@ -7,9 +7,9 @@ import {Colored} from "./colored.model";
  */
 export class NoteList extends DraggableNoteBase implements Colored {
   /** The color of the text. */
-  foregroundColor: string = '#ffffff';
+  foregroundColor: string = 'var(--color-note-accent)';
   /** The color of the background. */
-  backgroundColor: string = '#212121';
+  backgroundColor: string = 'var(--color-note)';
   /** The color of the background gradient if specified. */
   backgroundColorGradient?: string;
 

src/app/models/note.model.ts

@@ -8,9 +8,9 @@ import {Reminder} from "./reminder.model";
  */
 export class Note extends DraggableNoteBase implements Colored {
   /** The color of the text. */
-  foregroundColor: string = '#ffffff';
+  foregroundColor: string = 'var(--color-note-accent)';
   /** The color of the background. */
-  backgroundColor: string = '#212121';
+  backgroundColor: string = 'var(--color-note)';
   /** The color of the background gradient if specified. */
   backgroundColorGradient?: string;
 

src/app/models/task-list.model.ts

@@ -7,9 +7,9 @@ import {Colored} from "./colored.model";
  */
 export class TaskList extends DraggableNoteBase implements Colored {
   /** The color of the text. */
-  foregroundColor: string = '#ffffff';
+  foregroundColor: string = 'var(--color-note-accent)';
   /** The color of the background. */
-  backgroundColor: string = '#212121';
+  backgroundColor: string = 'var(--color-note)';
   /** The color of the background gradient if specified. */
   backgroundColorGradient?: string;
 

src/app/services/settings.service.ts

@@ -34,6 +34,7 @@ export class SettingsService {
     lastLoadedFile: 'clipboard_last_loaded_file',
     alwaysOnTop: 'clipboard_always_on_top',
     dblClickMode: 'clipboard_dbl_click_mode',
+    lightMode: 'clipboard_light_mode',
   };
 
   /** Backing field */
@@ -144,9 +145,25 @@ export class SettingsService {
   set dblClickMode(value: boolean) {
     this._dblClickMode = value;
     if (value) {
-      localStorage.setItem(this.storageKeys.fontStyle, TRUE);
+      localStorage.setItem(this.storageKeys.dblClickMode, TRUE);
     } else {
-      localStorage.removeItem(this.storageKeys.fontStyle);
+      localStorage.removeItem(this.storageKeys.dblClickMode);
+    }
+  }
+
+  /** Backing field */
+  private _lightMode!: boolean;
+  /** Get whether the app is in light mode.*/
+  get lightMode(): boolean { return this._lightMode; }
+  /** Set the app into light mode. (Default is dark) */
+  set lightMode(value: boolean) {
+    this._lightMode = value;
+    if (value) {
+      SettingsService.setTheme('light');
+      localStorage.setItem(this.storageKeys.lightMode, TRUE);
+    } else {
+      SettingsService.setTheme('dark');
+      localStorage.removeItem(this.storageKeys.lightMode);
     }
   }
 
@@ -162,6 +179,7 @@ export class SettingsService {
     this.fontFamily = localStorage.getItem(this.storageKeys.fontFamily) ?? 'Roboto';
     this.fontStyle = localStorage.getItem(this.storageKeys.fontStyle) ?? 'normal';
     this.dblClickMode = localStorage.getItem(this.storageKeys.dblClickMode) === TRUE;
+    this.lightMode = localStorage.getItem(this.storageKeys.lightMode) === TRUE;
 
     this.isBeta = !isTauri && !window.location.href.includes('clipboardjesus.com');
     this.isWindows = navigator.platform.indexOf('Win') > -1;
@@ -174,15 +192,23 @@ export class SettingsService {
    * Sets the font family value property of the styles.scss
    */
   private static setFontFamily(value: string): void {
-    (document.querySelector(':root') as any)
+    document.querySelector<HTMLElement>(':root')!
       .style.setProperty('--font-family', value);
   }
 
   /**
    * Sets the font style value property of the styles.scss
    */
   private static setFontStyle(value: string): void {
-    (document.querySelector(':root') as any)
+    document.querySelector<HTMLElement>(':root')!
       .style.setProperty('--font-style', value);
   }
+
+  /**
+   * Sets the font style value property of the styles.scss
+   */
+  private static setTheme(value: 'dark' | 'light'): void {
+    document.querySelector<HTMLElement>(':root')!
+      .setAttribute('theme', value);
+  }
 }

src/assets/i18n/de.json

@@ -60,8 +60,10 @@
   "ENABLE_ALWAYS_ON_TOP": "Im Vordergrund bleiben aktivieren",
   "ENABLE_ANIMATIONS": "Animationen einschalten",
   "ENABLE_CODE_HIGHLIGHTING": "Codehervorhebung einschalten",
+  "ENABLE_DARK_MODE": "Darkmode aktivieren",
   "ENABLE_DBL_CLICK_MODE": "Dblclick-Modus deaktivieren",
   "ENABLE_DBL_CLICK_MODE_TOOLTIP": "Ein Doppelklick auf den Hintergrund ist nötig um Notizen zu erzeugen, wenn dieser Modus aktiv ist.",
+  "ENABLE_LIGHT_MODE": "Lightmode aktivieren",
   "EXPERIMENTAL": "Experimentell!",
   "FILENAME": "Dateiname",
   "FILE_TYPE_NOT_SUPPORTED": "Der Dateityp {{type}} wird nicht unterstützt",

src/assets/i18n/en.json

@@ -60,8 +60,10 @@
   "ENABLE_ALWAYS_ON_TOP": "Enable always on top",
   "ENABLE_ANIMATIONS": "Enable animations",
   "ENABLE_CODE_HIGHLIGHTING": "Enable code highlighting",
+  "ENABLE_DARK_MODE": "Enable dark mode",
   "ENABLE_DBL_CLICK_MODE": "Enable dbl-click mode",
   "ENABLE_DBL_CLICK_MODE_TOOLTIP": "Double click onto the background creates notes when this mode is enabled.",
+  "ENABLE_LIGHT_MODE": "Enable light mode",
   "EXPERIMENTAL": "Experimental!",
   "FILENAME": "Filename",
   "FILE_TYPE_NOT_SUPPORTED": "The file type {{type}} is not supported",

src/assets/i18n/ua.json

@@ -60,8 +60,10 @@
   "ENABLE_ALWAYS_ON_TOP": "Увімкнути залишатися на вершині",
   "ENABLE_ANIMATIONS": "Увімкнути анімацію",
   "ENABLE_CODE_HIGHLIGHTING": "Увімкнути підсвічування коду",
+  "ENABLE_DARK_MODE": "Увімкнути темний режим",
   "ENABLE_DBL_CLICK_MODE": "Режим подвійного кліку деактивований",
   "ENABLE_DBL_CLICK_MODE_TOOLTIP": "Коли цей режим активний, для створення нотаток потрібно подвійне клацання на фоні.",
+  "ENABLE_LIGHT_MODE": "Увімкнути світлий режим",
   "EXPERIMENTAL": "Експериментальний!",
   "FILENAME": "Ім'я файлу",
   "FILE_TYPE_NOT_SUPPORTED": "Тип файлу {{type}} не підтримується",

src/assets/screens/welcome.json

@@ -5,8 +5,8 @@
   "notes": [
     {
       "id": "welcome_note_1",
-      "foregroundColor": "#ffffff",
-      "backgroundColor": "#212121",
+      "foregroundColor": "var(--color-note-accent)",
+      "backgroundColor": "var(--color-note)",
       "posX": 0,
       "posY": 84,
       "posZ": 1,
@@ -15,8 +15,8 @@
     },
     {
       "id": "welcome_note_2",
-      "foregroundColor": "#ffffff",
-      "backgroundColor": "#212121",
+      "foregroundColor": "var(--color-note-accent)",
+      "backgroundColor": "var(--color-note)",
       "posX": 720,
       "posY": 359,
       "posZ": 4,
@@ -30,24 +30,24 @@
       "notes": [
         {
           "id": "welcome_note_3_1",
-          "foregroundColor": "#ffffff",
-          "backgroundColor": "#212121",
+          "foregroundColor": "var(--color-note-accent)",
+          "backgroundColor": "var(--color-note)",
           "posX": 0,
           "posY": 0,
           "content": "When you click me, I am saved to your clipboard 💥"
         },
         {
           "id": "welcome_note_list_3_2",
-          "foregroundColor": "#ffffff",
-          "backgroundColor": "#212121",
+          "foregroundColor": "var(--color-note-accent)",
+          "backgroundColor": "var(--color-note)",
           "posX": 0,
           "posY": 0,
           "content": "You can just add new notes from your clipboard by pressing the ➕ button"
         },
         {
           "id": "welcome_note_list_3_3",
-          "foregroundColor": "#ffffff",
-          "backgroundColor": "#212121",
+          "foregroundColor": "var(--color-note-accent)",
+          "backgroundColor": "var(--color-note)",
           "posX": 0,
           "posY": 0,
           "content": "It's also possible to order notes using drag drop ⚡"

src/material.scss

@@ -0,0 +1,32 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+// Define a light theme
+$light-primary: mat.define-palette(mat.$deep-purple-palette);
+$light-accent: mat.define-palette(mat.$teal-palette, A700);
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: $light-primary,
+    accent: $light-accent,
+  )
+));
+
+// Define a dark theme
+$dark-primary: mat.define-palette(mat.$purple-palette, 700);
+$dark-accent: mat.define-palette(mat.$green-palette, A200);
+$dark-theme: mat.define-dark-theme((
+  color: (
+    primary: $dark-primary,
+    accent: $dark-accent,
+  )
+));
+
+// Apply the dark theme by default
+@include mat.all-component-themes($dark-theme);
+
+// Apply the light theme only when the `.my-light-theme` CSS class is applied
+// to an ancestor element of the components (such as `body`).
+[theme="light"] {
+  @include mat.all-component-colors($light-theme);
+}