Save the available list of Tildes themes in local storage.

source/content-scripts/setup.tsx

@@ -1,6 +1,7 @@
 import {type JSX, render} from "preact";
 import {
   extractGroups,
+  extractThemes,
   initializeGlobals,
   log,
   userIsLoggedIn,
@@ -43,6 +44,13 @@ async function initialize() {
   // them without having to change the hardcoded values.
   const usesKnownGroups = new Set<Feature>([Feature.Autocomplete]);
   const knownGroups = await fromStorage(Data.KnownGroups);
+
+  // Similarly to the known groups, any features that use the list of themes
+  // should be added here.
+  const usesThemesList = new Set<Feature>([]);
+  const themesList = await fromStorage(Data.ThemesList);
+  const themesListUpdatedDate = await fromStorage(Data.ThemesListUpdatedDate);
+
   const userLabels = await fromStorage(Feature.UserLabels);
 
   const isLoggedIn = userIsLoggedIn();
@@ -64,6 +72,24 @@ async function initialize() {
     }
   }
 
+  // Only update the list of themes when it has been more than 24 hours since we
+  // last updated and any of the features that use it are enabled.
+  if (
+    Date.now() - themesListUpdatedDate.value.getTime() > 24 * 60 * 60 * 1000 &&
+    Array.from(usesThemesList).some((feature) =>
+      enabledFeatures.value.has(feature),
+    )
+  ) {
+    const themes = extractThemes();
+    if (themes !== undefined) {
+      themesList.value = themes;
+      await themesList.save();
+      themesListUpdatedDate.value = new Date();
+      await themesListUpdatedDate.save();
+      log("Updated locally saved themes list.");
+    }
+  }
+
   const anonymizeUsernamesEnabled = enabledFeatures.value.has(
     Feature.AnonymizeUsernames,
   );

source/storage/enums.ts

@@ -39,5 +39,7 @@ export enum Data {
   MiscellaneousEnabledFeatures = "miscellaneous-enabled-features",
   OnSiteNewLabel = "on-site-new-label",
   RandomizeUsernameColors = "randomize-username-colors",
+  ThemesList = "themes-list",
+  ThemesListUpdatedDate = "themes-list-updated-date",
   Version = "data-version",
 }

source/storage/exports.ts

@@ -86,6 +86,32 @@ export const storageValues = {
     value: false,
     storage: browser.storage.sync,
   }),
+  [Data.ThemesList]: createValue<Array<[string, string]>>({
+    deserialize: (input) => JSON.parse(input) as Array<[string, string]>,
+    serialize: (input) => JSON.stringify(input),
+    key: Data.ThemesList,
+    value: [
+      ["white", "White"],
+      ["solarized-light", "Solarized Light"],
+      ["solarized-dark", "Solarized Dark"],
+      ["dracula", "Dracula"],
+      ["atom-one-dark", "Atom One Dark"],
+      ["black", "Black"],
+      ["zenburn", "Zenburn"],
+      ["gruvbox-light", "Gruvbox Light"],
+      ["gruvbox-dark", "Gruvbox Dark"],
+      ["love-dark", "Love Dark"],
+      ["love-light", "Love Light"],
+    ],
+    storage: browser.storage.local,
+  }),
+  [Data.ThemesListUpdatedDate]: createValue<Date>({
+    deserialize: (input) => new Date(input),
+    serialize: (input) => input.toISOString(),
+    key: Data.ThemesListUpdatedDate,
+    value: new Date("2023-01-01"),
+    storage: browser.storage.local,
+  }),
   [Feature.AnonymizeUsernames]: createValue<AnonymizeUsernamesData>({
     deserialize: (input) => JSON.parse(input) as AnonymizeUsernamesData,
     serialize: (input) => JSON.stringify(input),

source/utilities/exports.ts

@@ -9,5 +9,6 @@ export * from "./query-selectors.js";
 export * from "./report-a-bug.js";
 export * from "./sleep.js";
 export * from "./text.js";
+export * from "./themes.js";
 export * from "./user.js";
 export * from "./validators.js";

source/utilities/themes.ts

@@ -0,0 +1,19 @@
+/**
+ * Try to extract the list of themes from a theme selector on the page. This
+ * will return undefined when no theme selector is available. The returned array
+ * will be tuples where the first item is the theme value from the `<option>`
+ * element and the second item being the theme display name.
+ */
+export function extractThemes(): Array<[string, string]> | undefined {
+  const themes = document.querySelectorAll<HTMLOptionElement>(
+    "select#theme option",
+  );
+  if (themes.length === 0) {
+    return;
+  }
+
+  return Array.from(themes).map((theme) => [
+    theme.value,
+    (theme.textContent ?? "<unknown>").trim(),
+  ]);
+}