gui: Translate theme names in settings (#8006)

Add each subdirectory of the guiDir as a translation candidate string.
The key is prefixed with "theme-name-" and the default English
translation corresponds to the directory name turned to title case.
Disable the automatic name mangling in the GUI JS code in favor of
just looking up the translation.

gui/default/assets/lang/lang-de.json

@@ -436,6 +436,10 @@
     "full documentation": "Komplette Dokumentation",
     "items": "Elemente",
     "seconds": "Sekunden",
+    "theme-name-black": "Schwarz",
+    "theme-name-dark": "Dunkel",
+    "theme-name-default": "Standard",
+    "theme-name-light": "Hell",
     "{%device%} wants to share folder \"{%folder%}\".": "{{device}} möchte den Ordner \"{{folder}}\" teilen.",
     "{%device%} wants to share folder \"{%folderlabel%}\" ({%folder%}).": "{{device}} möchte den Ordner \"{{folderlabel}}\" ({{folder}}) teilen.",
     "{%reintroducer%} might reintroduce this device.": "{{reintroducer}} könnte dieses Gerät wieder einführen."

gui/default/assets/lang/lang-en.json

@@ -436,6 +436,10 @@
    "full documentation": "full documentation",
    "items": "items",
    "seconds": "seconds",
+   "theme-name-black": "Black",
+   "theme-name-dark": "Dark",
+   "theme-name-default": "Default",
+   "theme-name-light": "Light",
    "{%device%} wants to share folder \"{%folder%}\".": "{{device}} wants to share folder \"{{folder}}\".",
    "{%device%} wants to share folder \"{%folderlabel%}\" ({%folder%}).": "{{device}} wants to share folder \"{{folderlabel}}\" ({{folder}}).",
    "{%reintroducer%} might reintroduce this device.": "{{reintroducer}} might reintroduce this device."

gui/default/syncthing/core/syncthingController.js

@@ -2822,9 +2822,14 @@ angular.module('syncthing.core')
         };
 
         $scope.themeName = function (theme) {
-            return theme.replace('-', ' ').replace(/(?:^|\s)\S/g, function (a) {
+            var translation = $translate.instant("theme-name-" + theme);
-                return a.toUpperCase();
+            if (translation.startsWith("theme-name-")) {
-            });
+                // Fall back to simple Title Casing on missing translation
+                translation = theme.toLowerCase().replace(/(?:^|\s)\S/g, function (a) {
+                    return a.toUpperCase();
+                });
+            }
+            return translation;
         };
 
         $scope.modalLoaded = function () {

script/translate.go

@@ -138,6 +138,22 @@ func walkerFor(basePath string) filepath.WalkFunc {
 	}
 }
 
+func collectThemes(basePath string) {
+	files, err := os.ReadDir(basePath)
+	if err != nil {
+		log.Fatal(err)
+	}
+	for _, f := range files {
+		if f.IsDir() {
+			key := "theme-name-" + f.Name()
+			if _, ok := trans[key]; !ok {
+				name := strings.Title(f.Name())
+				trans[key] = name
+			}
+		}
+	}
+}
+
 func main() {
 	fd, err := os.Open(os.Args[1])
 	if err != nil {
@@ -152,6 +168,7 @@ func main() {
 	var guiDir = os.Args[2]
 
 	filepath.Walk(guiDir, walkerFor(guiDir))
+	collectThemes(guiDir)
 
 	bs, err := json.MarshalIndent(trans, "", "   ")
 	if err != nil {