try to get list of themes from server side

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@typescript-eslint/parser": "^5.6.0",
     "autosize": "^5.0.1",
+    "buffer": "^6.0.3",
     "check-password-strength": "^2.0.3",
     "choices.js": "^10.0.0",
     "classnames": "^2.3.1",

src/server/index.tsx

@@ -66,18 +66,23 @@ server.get("/css/themes-list", async (req, res) => {
     "litely",
     "nord",
   ];
-  fs.readdir(extraThemesFolder, function (err, data) {
-    data = data
-      .filter(d => d.endsWith(".min.css"))
-      .map(d => d.replace(".min.css", ""));
-    data = builtinThemes.concat(data);
-    // use set to remove duplicate values
-    data = Array.from(new Set(data));
-    res.send(data);
+  fs.readdir(extraThemesFolder, function (_, data) {
+    if (data != null) {
+      data = data
+        .filter(d => d.endsWith(".min.css"))
+        .map(d => d.replace(".min.css", ""));
+      data = builtinThemes.concat(data);
+      // use set to remove duplicate values
+      data = Array.from(new Set(data));
+      res.send(data);
+    } else {
+      res.send(builtinThemes);
+    }
   });
 });
 
 server.get("/css/themes/:name", async (req, res) => {
+  res.contentType("text/css");
   const theme = req.params.name;
   if (!theme.endsWith(".css")) {
     res.send("Theme must be a css file");

src/shared/components/person/settings.tsx

@@ -29,6 +29,7 @@ import {
   debounce,
   elementUrl,
   fetchCommunities,
+  fetchThemes,
   fetchUsers,
   getLanguage,
   getNativeLanguageName,
@@ -40,7 +41,6 @@ import {
   setTheme,
   setupTippy,
   showLocal,
-  themes,
   toast,
   updateCommunityBlock,
   updatePersonBlock,
@@ -548,7 +548,7 @@ export class Settings extends Component<any, SettingsState> {
                   {i18n.t("theme")}
                 </option>
                 <option value="browser">{i18n.t("browser_default")}</option>
-                {themes.map(theme => (
+                {fetchThemes().map(theme => (
                   <option value={theme}>{theme}</option>
                 ))}
               </select>

src/shared/utils.ts

@@ -166,24 +166,22 @@ export const languages = [
   { code: "lt" },
 ];
 
-export function themes() {
-  const builtinThemes = [
-    "litera",
-    "materia",
-    "minty",
-    "solar",
-    "united",
-    "cyborg",
-    "darkly",
-    "journal",
-    "sketchy",
-    "vaporwave",
-    "vaporwave-dark",
-    "i386",
-    "litely",
-    "nord",
-  ];
-  return builtinThemes;
+export function fetchThemes(): Promise<string[]> {
+  var promise = new Promise<string[]>((resolve, reject) => {
+    if (isBrowser()) {
+      const url = `${window.location.protocol}//${window.location.host}/css/themes-list`;
+      console.log(url);
+      fetch(url).then(res => {
+        res.json().then(json => {
+          console.log(json);
+          resolve(json);
+        });
+      });
+    } else {
+      listThemes().then(themes => resolve(themes));
+    }
+  });
+  return promise;
 }
 
 const DEFAULT_ALPHABET =