Override OverType text color to match site body color
The default solar theme uses #0d3b66 (dark blue) for text. Calling
OverType.setTheme() with a custom theme before initialization sets
#1a1a1a globally. The per-instance colors config was unreliable.

Assisted-by: Claude Opus 4.6 via Claude Code
change vsvuxnvtrqotwzwzrnrxsovpvomsvtql
commit 18087990f18981babf4e8a93aede6397d54a1a10
author Alpha Chen <alpha@kejadlen.dev>
date
parent sktownny
diff --git a/.claude/skills/overtype/skill.md b/.claude/skills/overtype/skill.md
index 79d532c..9b81995 100644
--- a/.claude/skills/overtype/skill.md
+++ b/.claude/skills/overtype/skill.md
@@ -35,9 +35,10 @@ Always returns an array of instances, even for a single element.
   fontFamily: "monospace",
   padding: "16px",
 
-  // Theme: "solar", "cave", or custom object
+  // Theme: "solar", "cave", or custom { name, colors } object
   theme: "solar",
-  colors: { h1: "#e63946", ... },
+  // Per-instance color overrides (merged into active theme):
+  colors: { text: "#1a1a1a" },
 
   // Auto-resize
   autoResize: false,
@@ -96,7 +97,7 @@ OverType.init(target, options)        // Same as constructor
 OverType.initFromData(".editor", {})  // Config via data-ot-* attributes
 OverType.getInstance(element)
 OverType.destroyAll()
-OverType.setTheme("cave")
+OverType.setTheme("cave")            // or custom { name, colors } object
 OverType.setCodeHighlighter(fn)
 OverType.setCustomSyntax(fn)          // Must maintain 1:1 char alignment
 
@@ -138,6 +139,21 @@ textarea, and preview.
 
 ## Known Issues in This Project
 
+### Theme text color
+
+The default "solar" theme uses `#0d3b66` (dark blue) for text. This project
+overrides it globally before any instances are created:
+
+```javascript
+OverType.setTheme({ name: "ketchup", colors: { text: "#1a1a1a" } })
+```
+
+`setTheme` accepts a string (built-in name) or an object with `name` and
+`colors`. Partial `colors` objects merge into the base solar theme. The
+per-instance `colors` config option does not work reliably.
+
+### Sizing
+
 Three OverType behaviors compound to inflate small editors:
 
 1. The wrapper's `min-height: 60px !important` makes single-line editors too
diff --git a/public/js/app.js b/public/js/app.js
index ae5b693..6b6b1ec 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -56,6 +56,8 @@ function saveSeriesField(seriesId, field, value) {
   })
 }
 
+OverType.setTheme({ name: "ketchup", colors: { text: "#1a1a1a" } })
+
 document.addEventListener("alpine:init", () => {
   Alpine.data("sortable", () => ({
     sort: localStorage.getItem("sort") || "urgency",