theme: added Tokyo Night by https://github.com/wojciech-zurek

.gitignore

@@ -9,10 +9,10 @@ build/linux/arch/*
 !build/linux/arch/install.sh
 *.css
 *.css.map
-!src/themes/**/**.css
 
 # JetBrains IDE configuration
 .idea
 ts-dist/**
 ts-dist
 themes
+!src/themes

package.json

@@ -8,7 +8,8 @@
     "compile": "tsc && npm run sass-and-copy",
     "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
     "copy-files": "copyfiles -u 1 --exclude './src/**/*.ts' --exclude './src/**/*.scss' \"./src/**/*\" ts-dist",
-    "sass-and-copy": "npm run sass && npm run copy-files",
+    "copy-themes-dev": "copyfiles -u 1 \"./themes/*\" node_modules/electron/dist/resources",
+    "sass-and-copy": "npm run sass && npm run copy-files && npm run copy-themes-dev",
     "build": "npm run builder -- -c ./build/electron-builder.yml",
     "build-deb": "npm run builder -- -c ./build/electron-builder.deb.yml",
     "build-unpacked": "npm run builder -- -c ./build/electron-builder.unpacked.yml",

src/constants/settings.ts

@@ -33,6 +33,7 @@ export const settings = {
   singleInstance: "singleInstance",
   skipArtists: "skipArtists",
   skippedArtists: "skippedArtists",
+  theme: "theme",
   trayIcon: "trayIcon",
   updateFrequency: "updateFrequency",
   windowBounds: {

src/pages/settings/preload.ts

@@ -22,14 +22,19 @@ let adBlock: HTMLInputElement,
   singleInstance: HTMLInputElement,
   skipArtists: HTMLInputElement,
   skippedArtists: HTMLInputElement,
+  theme: HTMLSelectElement,
   trayIcon: HTMLInputElement,
   updateFrequency: HTMLInputElement;
 
 function getThemeFiles() {
   const selectElement = document.getElementById("themesList") as HTMLSelectElement;
-  const fileNames = fs.readdirSync(process.resourcesPath).filter((file) => file.endsWith(".css"));
+  const fileNames = fs
+    .readdirSync(process.resourcesPath)
+    .filter((file) => file.endsWith(".css"))
+    .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+
   const options = fileNames.map((name) => {
-    return new Option(name, name);
+    return new Option(name.replace(".css", ""), name);
   });
 
   // empty old options
@@ -75,6 +80,7 @@ function refreshSettings() {
   port.value = settingsStore.get(settings.apiSettings.port);
   singleInstance.checked = settingsStore.get(settings.singleInstance);
   skipArtists.checked = settingsStore.get(settings.skipArtists);
+  theme.value = settingsStore.get(settings.theme);
   skippedArtists.value = settingsStore.get<string, string[]>(settings.skippedArtists).join("\n");
   trayIcon.checked = settingsStore.get(settings.trayIcon);
   updateFrequency.value = settingsStore.get(settings.updateFrequency);
@@ -106,8 +112,8 @@ function restart() {
  * Bind UI components to functions after DOMContentLoaded
  */
 window.addEventListener("DOMContentLoaded", () => {
-  function get(id: string): HTMLInputElement {
-    return document.getElementById(id) as HTMLInputElement;
+  function get<T = HTMLInputElement>(id: string): T {
+    return document.getElementById(id) as T;
   }
 
   getThemeFiles();
@@ -139,6 +145,13 @@ window.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  function addSelectListener(source: HTMLSelectElement, key: string) {
+    source.addEventListener("change", () => {
+      settingsStore.set(key, source.value);
+      ipcRenderer.send(globalEvents.storeChanged);
+    });
+  }
+
   ipcRenderer.on("refreshData", () => {
     refreshSettings();
   });
@@ -161,6 +174,7 @@ window.addEventListener("DOMContentLoaded", () => {
   notifications = get("notifications");
   playBackControl = get("playBackControl");
   port = get("port");
+  theme = get<HTMLSelectElement>("themesList");
   trayIcon = get("trayIcon");
   skipArtists = get("skipArtists");
   skippedArtists = get("skippedArtists");
@@ -186,6 +200,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(skipArtists, settings.skipArtists);
   addTextAreaListener(skippedArtists, settings.skippedArtists);
   addInputListener(singleInstance, settings.singleInstance);
+  addSelectListener(theme, settings.theme);
   addInputListener(trayIcon, settings.trayIcon);
   addInputListener(updateFrequency, settings.updateFrequency);
 });

src/pages/settings/settings.html

@@ -291,7 +291,7 @@
                 <p>
                   Select a theme below or "Tidal - Default" to return to the original Tidal look.
                 </p>
-                <select id="themesList" name="themesList">
+                <select class="select-input" id="themesList" name="themesList">
 
                 </select>
               </div>

src/pages/settings/settings.scss

@@ -230,8 +230,6 @@ html {
         border-color: $tidal-blue;
         color: $white;
       }
-
-      // --- Switch slider component ---
     }
   }
 }
@@ -415,3 +413,26 @@ html {
     outline: none;
   }
 }
+
+.select-input {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 5px 0;
+  transition: 0.2s;
+  border: 0;
+  border-bottom: solid 1px $grey-333;
+  outline: none;
+  background: transparent;
+  color: $tidal-grey;
+  font-size: 14px;
+
+  &:focus {
+    border-color: $tidal-blue;
+    color: $white;
+  }
+
+  option {
+    background-color: $tidal-grey-darkest;
+  }
+}

src/scripts/settings.ts

@@ -30,6 +30,7 @@ export const settingsStore = new Store({
     singleInstance: true,
     skipArtists: false,
     skippedArtists: [""],
+    theme: "none",
     trayIcon: true,
     updateFrequency: 500,
     windowBounds: { width: 800, height: 600 },

src/themes/Tokyo Night.scss

@@ -0,0 +1,82 @@
+:root {
+  --footer-player-background: #1a1b26;
+  --sidebar-background: #1a1b26;
+  --sidebar-hover-background: #414868;
+  --sidebar-menu-top-text: #565f89;
+  --sidebar-menu-playlist-text: #565f89;
+  --search-background: #1a1b26;
+  --main-background: #16161e;
+  --main-navigation-control-background: #1a1b26;
+  --main-feed-button-background: #1a1b26;
+  --player-control-background: #24283b;
+  --player-control-active-button: #ff9e64;
+  --player-progress-bar: #ff9e64;
+  --indicator-hifi-background: #9ece6a;
+  --indicator-hifi-span: #1a1b26;
+  --player-control-favorite: #f7768e;
+  --search-dialog-background: #24283b;
+  --right-queue-background: #24283b;
+}
+.player--fNPGt.notFullscreen--ugyc2 {
+  background-color: var(--footer-player-background);
+}
+.sidebar--WvRg_ {
+  background-color: var(--sidebar-background);
+  contain: strict;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+.item--VTpWS:hover {
+  background-color: var(--sidebar-hover-background);
+}
+.main--LUnJp {
+  background-color: var(--main-background);
+}
+button.button--ncJwL {
+  background-color: var(--main-navigation-control-background);
+}
+.player--fNPGt.lossLess--g5Jss button.withBackground[aria-checked="true"] path {
+  fill: var(--player-control-active-button);
+}
+.player--fNPGt.lossLess--g5Jss button.withBackground[aria-checked="true"] {
+  background-color: var(--player-control-background);
+}
+.activeItem--qV6eL .activeItem--qV6eL .playlistItem--YARJh .section--FI41E.playingItem--eWkYS {
+  color: #565f89;
+}
+.progressBarWrapper--WZfox {
+  color: var(--player-progress-bar);
+}
+.playbackControls--FLeZA button .tidal-ui__icon {
+  transform: scale(1);
+}
+.css-11m9iw3 {
+  background-color: var(--indicator-hifi-background);
+}
+.css-11m9iw3 span {
+  color: var(--indicator-hifi-span);
+}
+.activeItem--qV6eL {
+  color: var(--sidebar-menu-top-text);
+}
+.activeItem--qV6eL .playlistItem--YARJh {
+  color: var(--sidebar-menu-playlist-text);
+}
+button.feedBell--B8anb {
+  background-color: var(--main-feed-button-background);
+}
+.baseContainer--cbf17 {
+  background-color: var(--search-dialog-background);
+}
+.favoriteButton--TtBlM.is-favorite path {
+  fill: var(--player-control-favorite);
+}
+.container--mkEWd {
+  background-color: var(--right-queue-background);
+}
+.container--vJVjO {
+  background-color: var(--search-background);
+}
+.searchFieldHighlighted--Fitvs {
+  color: var(--snow-white);
+}