feat(chromad): use style counterparts for theme switching

Author: alecthomas

cmd/chromad/main.go

@@ -55,12 +55,18 @@ var (
 		}).Parse(indexTemplate))
 )
 
+type styleInfo struct {
+	Name        string `json:"name"`
+	Mode        string `json:"mode"`
+	Counterpart string `json:"counterpart,omitempty"`
+}
+
 type context struct {
 	Background       template.CSS
 	SelectedLanguage string
 	Languages        []string
 	SelectedStyle    string
-	Styles           []string
+	Styles           []styleInfo
 	CSRFField        template.HTML
 	Version          string
 }
@@ -164,10 +170,16 @@ func newContext(r *http.Request) context {
 		ctx.Languages = append(ctx.Languages, lexer.Config().Name)
 	}
 	sort.Strings(ctx.Languages)
-	for name := range styles.Registry {
-		ctx.Styles = append(ctx.Styles, name)
-	}
-	sort.Strings(ctx.Styles)
+	for name, s := range styles.Registry {
+		ctx.Styles = append(ctx.Styles, styleInfo{
+			Name:        name,
+			Mode:        s.Mode().String(),
+			Counterpart: s.Counterpart,
+		})
+	}
+	sort.Slice(ctx.Styles, func(i, j int) bool {
+		return ctx.Styles[i].Name < ctx.Styles[j].Name
+	})
 	return ctx
 }
 

cmd/chromad/static/index.js

@@ -21,6 +21,22 @@ function init() {
   const themeToggle = document.getElementById("theme-toggle");
   const themeIcon = document.getElementById("theme-icon");
 
+  const stylesByName = Object.fromEntries(
+    (window.chromaStyles || []).map((s) => [s.name, s]),
+  );
+
+  function styleForMode(name, mode) {
+    const info = stylesByName[name];
+    if (!info || info.mode === mode) {
+      return name;
+    }
+    const counterpart = info.counterpart && stylesByName[info.counterpart];
+    if (counterpart && counterpart.mode === mode) {
+      return counterpart.name;
+    }
+    return name;
+  }
+
   function getThemePreference() {
     const stored = localStorage.getItem("theme");
     if (stored) {
@@ -59,11 +75,9 @@ function init() {
       themeIcon.setAttribute("name", "sunny-outline");
     }
 
-    if (isDark && styleSelect.value === "monokailight") {
-      styleSelect.value = "monokai";
-      update(new Event("change"));
-    } else if (!isDark && styleSelect.value === "monokai") {
-      styleSelect.value = "monokailight";
+    const swapped = styleForMode(styleSelect.value, effectiveTheme);
+    if (swapped !== styleSelect.value) {
+      styleSelect.value = swapped;
       update(new Event("change"));
     }
   }
@@ -282,10 +296,7 @@ function init() {
     update(new Event("change"));
   } else {
     const effectiveTheme = getEffectiveTheme(initialTheme);
-    const isDark = effectiveTheme === "dark";
-    if (isDark && styleSelect.value === "monokailight") {
-      styleSelect.value = "monokai";
-    }
+    styleSelect.value = styleForMode(styleSelect.value, effectiveTheme);
     update(new Event("change"));
   }
 

cmd/chromad/templates/index.html.tmpl

@@ -66,7 +66,7 @@
               <select name="style" id="style">
                 <option value="" disabled{{if eq "" $.SelectedStyle}} selected{{end}}>Style</option>
                 {{- range .Styles}}
-                  <option value="{{.}}"{{if eq . $.SelectedStyle}} selected{{end}}>{{.}}</option>
+                  <option value="{{.Name}}"{{if eq .Name $.SelectedStyle}} selected{{end}}>{{.Name}}</option>
                 {{- end}}
               </select>
             </div>
@@ -105,6 +105,9 @@
     <div class="field box" id="output"></div>
   </form>
 </div>
+<script>
+  window.chromaStyles = {{.Styles}};
+</script>
 <script type="module">
 {{JS "index.js"}}
 </script>