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
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",