feat: Custom CSS now also applies to settings window

CHANGELOG.md

@@ -12,7 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added settings to customize the Discord rich presence information
   - Discord settings are now also collapsible like the ListenBrainz ones are
 - Restyled settings menu to include version number and useful links on the about page
+    ![The new about page](./docs/images/new-about.png)
 - The ListenBrainz integration has been extended with a configurable (5 seconds by default) delay in song reporting so that it doesn't spam the API when you are cycling through songs.
+- Custom CSS now also applies to settings window
+    ![Tokyo Night theme on settings window](./docs/images/customcss-menu.png)
 
 ## [5.6.0]
 

src/features/theming/theming.ts

@@ -0,0 +1,31 @@
+import fs from "fs";
+import { settings } from "../../constants/settings";
+import { settingsStore } from "../../scripts/settings";
+import { Logger } from "../logger";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function addCustomCss(app: any, logger: typeof Logger) {
+  window.addEventListener("DOMContentLoaded", () => {
+    const selectedTheme = settingsStore.get<string, string>(settings.theme);
+    if (selectedTheme !== "none") {
+      const userThemePath = `${app.getPath("userData")}/themes/${selectedTheme}`;
+      const resourcesThemePath = `${process.resourcesPath}/${selectedTheme}`;
+      const themeFile = fs.existsSync(userThemePath) ? userThemePath : resourcesThemePath;
+      fs.readFile(themeFile, "utf-8", (err, data) => {
+        if (err) {
+          logger.alert("An error ocurred reading the theme file.", err, alert);
+          return;
+        }
+
+        const themeStyle = document.createElement("style");
+        themeStyle.innerHTML = data;
+        document.head.appendChild(themeStyle);
+      });
+    }
+
+    // read customCSS (it will override the theme)
+    const style = document.createElement("style");
+    style.innerHTML = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
+    document.head.appendChild(style);
+  });
+}

src/pages/settings/preload.ts

@@ -4,6 +4,7 @@ import fs from "fs";
 import { globalEvents } from "../../constants/globalEvents";
 import { settings } from "../../constants/settings";
 import { Logger } from "../../features/logger";
+import { addCustomCss } from "../../features/theming/theming";
 import { settingsStore } from "./../../scripts/settings";
 import { getOptions, getOptionsHeader, getThemeListFromDirectory } from "./theming";
 
@@ -49,6 +50,8 @@ let adBlock: HTMLInputElement,
   discord_details_prefix: HTMLInputElement,
   discord_button_text: HTMLInputElement;
 
+addCustomCss(app, Logger.bind(this));
+
 function getThemeFiles() {
   const selectElement = document.getElementById("themesList") as HTMLSelectElement;
   const builtInThemes = getThemeListFromDirectory(process.resourcesPath);

src/preload.ts

@@ -1,6 +1,5 @@
 import { app, dialog, Notification } from "@electron/remote";
 import { clipboard, ipcRenderer } from "electron";
-import fs from "fs";
 import Player from "mpris-service";
 import { globalEvents } from "./constants/globalEvents";
 import { settings } from "./constants/settings";
@@ -12,6 +11,7 @@ import {
 import { StoreData } from "./features/listenbrainz/models/storeData";
 import { Logger } from "./features/logger";
 import { Songwhip } from "./features/songwhip/songwhip";
+import { addCustomCss } from "./features/theming/theming";
 import { MediaStatus } from "./models/mediaStatus";
 import { Options } from "./models/options";
 import { downloadFile } from "./scripts/download";
@@ -158,32 +158,6 @@ const elements = {
   },
 };
 
-function addCustomCss() {
-  window.addEventListener("DOMContentLoaded", () => {
-    const selectedTheme = settingsStore.get<string, string>(settings.theme);
-    if (selectedTheme !== "none") {
-      const userThemePath = `${app.getPath("userData")}/themes/${selectedTheme}`;
-      const resourcesThemePath = `${process.resourcesPath}/${selectedTheme}`;
-      const themeFile = fs.existsSync(userThemePath) ? userThemePath : resourcesThemePath;
-      fs.readFile(themeFile, "utf-8", (err, data) => {
-        if (err) {
-          Logger.alert("An error ocurred reading the theme file.", err, alert);
-          return;
-        }
-
-        const themeStyle = document.createElement("style");
-        themeStyle.innerHTML = data;
-        document.head.appendChild(themeStyle);
-      });
-    }
-
-    // read customCSS (it will override the theme)
-    const style = document.createElement("style");
-    style.innerHTML = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
-    document.head.appendChild(style);
-  });
-}
-
 /**
  * Get the update frequency from the store
  * make sure it returns a number, if not use the default
@@ -596,7 +570,8 @@ if (process.platform === "linux" && settingsStore.get(settings.mpris)) {
     console.log("player api not working");
   }
 }
-addCustomCss();
+
+addCustomCss(app, Logger.bind(this));
 addHotKeys();
 addIPCEventListeners();
 addFullScreenListeners();

src/themes/Tokyo Night.scss

@@ -74,7 +74,7 @@ button.feedBell--kvAbD {
 .container--PFTHk {
   background-color: var(--right-queue-background);
 }
-.container--cl4MJ{
+.container--cl4MJ {
   background-color: var(--search-background);
 }
 .searchFieldHighlighted--Fitvs {
@@ -83,3 +83,122 @@ button.feedBell--kvAbD {
 .searchField--EGBSq {
   background-color: var(--search-background);
 }
+
+// Settings window styling
+
+.settings-window {
+  color: var(--sidebar-menu-playlist-text);
+}
+.settings-window__wrapper {
+  background: var(--main-background);
+  box-shadow: inset 0 0 2px 0 var(--main-feed-button-background);
+}
+
+.settings-window__close-button:hover {
+  background: var(--main-feed-button-background);
+}
+
+.settings input:checked + label {
+  border-bottom: 2px solid var(--player-control-active-button);
+  color: var(--player-control-active-button);
+}
+
+.tabs::-webkit-scrollbar-thumb {
+  background-color: #404248;
+  box-shadow: inset 0 0 10px 2px var(--search-background);
+}
+
+.group {
+  border-bottom: 1px solid #333;
+}
+
+.group__description p {
+  color: var(--sidebar-menu-top-text);
+}
+.group__description .text-input {
+  border-bottom: solid 1px #333;
+  color: var(--sidebar-menu-top-text);
+}
+.group__description .text-input:focus {
+  border-color: var(--player-control-active-button);
+  color: var(--sidebar-menu-playlist-text);
+}
+
+.switch input:checked + .switch__slider {
+  background-color: var(--player-control-active-button);
+}
+.switch input:checked + .switch__slider::before {
+  background-color: var(--sidebar-menu-playlist-text);
+}
+.switch input:focus + .switch__slider {
+  box-shadow: inset 0 0 0 1px var(--player-control-active-button);
+}
+.switch__slider {
+  background-color: var(--search-background);
+}
+.switch__slider::before {
+  background-color: var(--sidebar-menu-playlist-text);
+}
+
+.textarea {
+  background: var(--search-background);
+  color: var(--sidebar-menu-top-text);
+}
+.textarea:focus {
+  border-color: var(--player-control-active-button);
+  color: var(--sidebar-menu-playlist-text);
+}
+
+.about-section__version a {
+  background-color: #404248;
+  color: var(--player-control-active-button);
+}
+.about-section__links a {
+  color: var(--sidebar-menu-playlist-text);
+
+  background-color: var(--search-background);
+}
+.about-section__links a i {
+  color: var(--sidebar-menu-playlist-text);
+}
+.about-section__links a:hover {
+  background-color: var(--player-control-favorite);
+}
+
+.footer__note {
+  color: var(--sidebar-menu-top-text);
+}
+.footer__button {
+  background: #404248;
+  color: var(--sidebar-menu-playlist-text);
+}
+.footer__button:hover {
+  background: #55585f;
+}
+
+.file-drop-area {
+  border: 1px dashed var(--sidebar-menu-top-text);
+}
+.file-drop-area.is-active {
+  background-color: #17171a;
+}
+
+.file-btn {
+  background-color: #17171a;
+  border: 1px solid var(--sidebar-menu-top-text);
+}
+
+.select-input {
+  border-bottom: solid 1px #333;
+  color: var(--sidebar-menu-top-text);
+}
+.select-input:focus {
+  border-color: var(--player-control-active-button);
+  color: var(--sidebar-menu-playlist-text);
+}
+.select-input option {
+  background-color: var(--search-background);
+}
+.select-input option:disabled {
+  color: var(--sidebar-menu-playlist-text);
+}