From ff30dacc84fd198094af67463012e1fb405025ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 27 Sep 2021 14:13:30 +0200
Subject: [PATCH] Convert theme to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/@types/global.d.ts     |  4 ++++
 src/{theme.js => theme.ts} | 40 +++++++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 9 deletions(-)
 rename src/{theme.js => theme.ts} (89%)

diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 6309056bc2..38f237b9c3 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -159,6 +159,10 @@ declare global {
         setSinkId(outputId: string);
     }
 
+    interface HTMLStyleElement {
+        disabled?: boolean;
+    }
+
     // Add Chrome-specific `instant` ScrollBehaviour
     type _ScrollBehavior = ScrollBehavior | "instant";
 
diff --git a/src/theme.js b/src/theme.ts
similarity index 89%
rename from src/theme.js
rename to src/theme.ts
index cd14d2d9db..8f95f8c784 100644
--- a/src/theme.js
+++ b/src/theme.ts
@@ -17,11 +17,32 @@ limitations under the License.
 
 import { _t } from "./languageHandler";
 
-export const DEFAULT_THEME = "light";
 import SettingsStore from "./settings/SettingsStore";
 import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
-export function enumerateThemes() {
+export const DEFAULT_THEME = "light";
+
+interface IFontFaces {
+    src: {
+        format: string;
+        url: string;
+        local: string;
+    }[];
+}
+
+interface ICustomTheme {
+    colors: {
+        [key: string]: string;
+    };
+    fonts: {
+        faces: IFontFaces[];
+        general: string;
+        monospace: string;
+    };
+    is_dark?: boolean; // eslint-disable-line camelcase
+}
+
+export function enumerateThemes(): {[key: string]: string} {
     const BUILTIN_THEMES = {
         "light": _t("Light"),
         "dark": _t("Dark"),
@@ -34,7 +55,7 @@ export function enumerateThemes() {
     return Object.assign({}, customThemeNames, BUILTIN_THEMES);
 }
 
-function clearCustomTheme() {
+function clearCustomTheme(): void {
     // remove all css variables, we assume these are there because of the custom theme
     const inlineStyleProps = Object.values(document.body.style);
     for (const prop of inlineStyleProps) {
@@ -61,7 +82,7 @@ const allowedFontFaceProps = [
     "unicode-range",
 ];
 
-function generateCustomFontFaceCSS(faces) {
+function generateCustomFontFaceCSS(faces: IFontFaces[]): string {
     return faces.map(face => {
         const src = face.src && face.src.map(srcElement => {
             let format;
@@ -91,7 +112,7 @@ function generateCustomFontFaceCSS(faces) {
     }).join("\n");
 }
 
-function setCustomThemeVars(customTheme) {
+function setCustomThemeVars(customTheme: ICustomTheme): void {
     const { style } = document.body;
 
     function setCSSColorVariable(name, hexColor, doPct = true) {
@@ -134,7 +155,7 @@ function setCustomThemeVars(customTheme) {
     }
 }
 
-export function getCustomTheme(themeName) {
+export function getCustomTheme(themeName: string): ICustomTheme {
     // set css variables
     const customThemes = SettingsStore.getValue("custom_themes");
     if (!customThemes) {
@@ -155,7 +176,7 @@ export function getCustomTheme(themeName) {
  *
  * @param {string} theme new theme
  */
-export async function setTheme(theme) {
+export async function setTheme(theme: string): Promise<void> {
     if (!theme) {
         const themeWatcher = new ThemeWatcher();
         theme = themeWatcher.getEffectiveTheme();
@@ -200,13 +221,14 @@ export async function setTheme(theme) {
             // We could alternatively lock or similar to stop the race, but
             // this is probably good enough for now.
             styleElements[stylesheetName].disabled = false;
-            Object.values(styleElements).forEach((a) => {
+            Object.values(styleElements).forEach((a: HTMLStyleElement) => {
                 if (a == styleElements[stylesheetName]) return;
                 a.disabled = true;
             });
             const bodyStyles = global.getComputedStyle(document.body);
             if (bodyStyles.backgroundColor) {
-                document.querySelector('meta[name="theme-color"]').content = bodyStyles.backgroundColor;
+                const metaElement: HTMLMetaElement = document.querySelector('meta[name="theme-color"]');
+                metaElement.content = bodyStyles.backgroundColor;
             }
             resolve();
         };