diff --git a/css/pane.less b/css/pane.less
index 88007da..d373c08 100644
--- a/css/pane.less
+++ b/css/pane.less
@@ -114,7 +114,7 @@
 
 		&[hidden] #toggle::after { content: "←"; }
 
-		#color {
+		.color-picker {
 			display: flex;
 			flex-direction: row;
 
diff --git a/index.html b/index.html
index 696504b..a33b4b8 100644
--- a/index.html
+++ b/index.html
@@ -65,8 +65,22 @@ <h3>My Mind</h3>
 				</select></label>
 			</p>
 			<p>
-				<label><span>Color</span></label>
-				<span id="color">
+				<span>Item color</span>
+				<span id="color" class="color-picker">
+					<a data-color="" title="Inherit" href="#"></a>
+					<a data-color="#000" title="Black" href="#"></a>
+					<a data-color="#e33" title="Red" href="#"></a>
+					<a data-color="#3e3" title="Green" href="#"></a>
+					<a data-color="#33e" title="Blue" href="#"></a>
+					<a data-color="#dd3" title="Yellow" href="#"></a>
+					<a data-color="#3dd" title="Cyan" href="#"></a>
+					<a data-color="#d3d" title="Magenta" href="#"></a>
+					<a data-color="#fa3" title="Orange" href="#"></a>
+				</span>
+			</p>
+			<p>
+				<span>Text color</span>
+				<span id="text-color" class="color-picker">
 					<a data-color="" title="Inherit" href="#"></a>
 					<a data-color="#000" title="Black" href="#"></a>
 					<a data-color="#e33" title="Red" href="#"></a>
@@ -78,7 +92,6 @@ <h3>My Mind</h3>
 					<a data-color="#fa3" title="Orange" href="#"></a>
 				</span>
 			</p>
-
 			<p>
 				<label><span>Icons</span>
 				<select id="icons">
diff --git a/my-mind.css b/my-mind.css
index 8ca2034..425fdfb 100644
--- a/my-mind.css
+++ b/my-mind.css
@@ -159,19 +159,19 @@ button:not(:disabled) {
 .pane#ui[hidden] #toggle::after {
   content: "←";
 }
-.pane#ui #color {
+.pane#ui .color-picker {
   display: flex;
   flex-direction: row;
 }
-.pane#ui #color [data-color] {
+.pane#ui .color-picker [data-color] {
   width: 14px;
   height: 14px;
   border-radius: 3px;
   margin-right: 2px;
   border: 1px solid transparent;
 }
-.pane#ui #color [data-color]:hover,
-.pane#ui #color [data-color]:first-child {
+.pane#ui .color-picker [data-color]:hover,
+.pane#ui .color-picker [data-color]:first-child {
   border-color: #000;
 }
 .pane#ui #icons {
diff --git a/my-mind.js b/my-mind.js
index 81970fe..16445cd 100644
--- a/my-mind.js
+++ b/my-mind.js
@@ -9,19 +9,19 @@
 
   // .js/html.js
   function node(name, attrs) {
-    let node10 = document.createElement(name);
-    Object.assign(node10, attrs);
-    return node10;
+    let node11 = document.createElement(name);
+    Object.assign(node11, attrs);
+    return node11;
   }
 
   // .js/svg.js
   var NS = "http://www.w3.org/2000/svg";
   function node2(name, attrs) {
-    let node10 = document.createElementNS(NS, name);
+    let node11 = document.createElementNS(NS, name);
     for (let attr in attrs) {
-      node10.setAttribute(attr, attrs[attr]);
+      node11.setAttribute(attr, attrs[attr]);
     }
-    return node10;
+    return node11;
   }
   function group() {
     return node2("g");
@@ -243,9 +243,9 @@
     }
   };
   var Multi = class extends Action {
-    constructor(actions12) {
+    constructor(actions13) {
       super();
-      this.actions = actions12;
+      this.actions = actions13;
     }
     do() {
       this.actions.forEach((action2) => action2.do());
@@ -389,6 +389,20 @@
       this.item.color = this.oldColor;
     }
   };
+  var SetTextColor = class extends Action {
+    constructor(item, textColor) {
+      super();
+      this.item = item;
+      this.textColor = textColor;
+      this.oldTextColor = item.textColor;
+    }
+    do() {
+      this.item.textColor = this.textColor;
+    }
+    undo() {
+      this.item.textColor = this.oldTextColor;
+    }
+  };
   var SetText = class extends Action {
     constructor(item, text) {
       super();
@@ -483,14 +497,33 @@
     action(action2);
   }
 
+  // .js/ui/text-color.js
+  var text_color_exports = {};
+  __export(text_color_exports, {
+    init: () => init4
+  });
+  var node6 = document.querySelector("#text-color");
+  function init4() {
+    node6.addEventListener("click", onClick2);
+    [...node6.querySelectorAll("[data-color]")].forEach((item) => {
+      item.style.backgroundColor = item.dataset.color;
+    });
+  }
+  function onClick2(e) {
+    e.preventDefault();
+    let color = e.target.dataset.color || "";
+    let action2 = new SetTextColor(currentItem, color);
+    action(action2);
+  }
+
   // .js/ui/value.js
   var value_exports = {};
   __export(value_exports, {
-    init: () => init4,
+    init: () => init5,
     update: () => update
   });
   var select = document.querySelector("#value");
-  function init4() {
+  function init5() {
     select.addEventListener("change", onChange);
   }
   function update() {
@@ -516,7 +549,7 @@
   // .js/ui/layout.js
   var layout_exports = {};
   __export(layout_exports, {
-    init: () => init5,
+    init: () => init6,
     update: () => update2
   });
 
@@ -979,7 +1012,7 @@
 
   // .js/ui/layout.js
   var select2 = document.querySelector("#layout");
-  function init5() {
+  function init6() {
     let layout = repo2.get("map");
     select2.append(layout.option);
     let label = buildGroup("Graph");
@@ -1013,20 +1046,20 @@
     return select2.querySelector(`option[value="${value}"]`);
   }
   function buildGroup(label) {
-    let node10 = document.createElement("optgroup");
-    node10.label = label;
-    select2.append(node10);
-    return node10;
+    let node11 = document.createElement("optgroup");
+    node11.label = label;
+    select2.append(node11);
+    return node11;
   }
 
   // .js/ui/icon.js
   var icon_exports = {};
   __export(icon_exports, {
-    init: () => init6,
+    init: () => init7,
     update: () => update3
   });
   var select3 = document.querySelector("#icons");
-  function init6() {
+  function init7() {
     select3.addEventListener("change", onChange3);
   }
   function update3() {
@@ -1040,7 +1073,7 @@
   // .js/ui/shape.js
   var shape_exports = {};
   __export(shape_exports, {
-    init: () => init7,
+    init: () => init8,
     update: () => update4
   });
 
@@ -1112,7 +1145,7 @@
 
   // .js/ui/shape.js
   var select4 = document.querySelector("#shape");
-  function init7() {
+  function init8() {
     repo3.forEach((shape) => select4.append(shape.option));
     select4.addEventListener("change", onChange4);
   }
@@ -1133,7 +1166,7 @@
   // .js/ui/status.js
   var status_exports = {};
   __export(status_exports, {
-    init: () => init8,
+    init: () => init9,
     update: () => update5
   });
   var select5 = document.querySelector("#status");
@@ -1153,7 +1186,7 @@
   function stringToStatus(str) {
     return str in STATUS_MAP ? STATUS_MAP[str] : str;
   }
-  function init8() {
+  function init9() {
     select5.addEventListener("change", onChange5);
   }
   function update5() {
@@ -1168,26 +1201,26 @@
   // .js/ui/tip.js
   var tip_exports = {};
   __export(tip_exports, {
-    init: () => init9
+    init: () => init10
   });
-  var node6 = document.querySelector("#tip");
-  function init9() {
-    node6.addEventListener("click", hide);
+  var node7 = document.querySelector("#tip");
+  function init10() {
+    node7.addEventListener("click", hide);
     subscribe("command-child", hide);
     subscribe("command-sibling", hide);
   }
   function hide() {
     unsubscribe("command-child", hide);
     unsubscribe("command-sibling", hide);
-    node6.removeEventListener("click", hide);
-    node6.hidden = true;
+    node7.removeEventListener("click", hide);
+    node7.hidden = true;
   }
 
   // .js/ui/io.js
   var io_exports = {};
   __export(io_exports, {
     hide: () => hide2,
-    init: () => init10,
+    init: () => init11,
     quickSave: () => quickSave,
     restore: () => restore,
     show: () => show
@@ -1230,10 +1263,10 @@
     }
     show(mode2) {
       this.mode = mode2;
-      const { go, node: node10 } = this;
+      const { go, node: node11 } = this;
       go.textContent = mode2.charAt(0).toUpperCase() + mode2.substring(1);
-      [...node10.querySelectorAll("[data-for]")].forEach((node11) => node11.hidden = true);
-      [...node10.querySelectorAll(`[data-for~=${mode2}]`)].forEach((node11) => node11.hidden = false);
+      [...node11.querySelectorAll("[data-for]")].forEach((node12) => node12.hidden = true);
+      [...node11.querySelectorAll(`[data-for~=${mode2}]`)].forEach((node12) => node12.hidden = false);
       go.focus();
     }
     saveDone() {
@@ -1539,36 +1572,36 @@
       }
       return elm;
     }
-    parseNode(node10, parent) {
-      var json = this.parseAttributes(node10, parent);
-      for (var i = 0; i < node10.childNodes.length; i++) {
-        var child = node10.childNodes[i];
+    parseNode(node11, parent) {
+      var json = this.parseAttributes(node11, parent);
+      for (var i = 0; i < node11.childNodes.length; i++) {
+        var child = node11.childNodes[i];
         if (child instanceof Element && child.nodeName.toLowerCase() == "node") {
           json.children.push(this.parseNode(child, json));
         }
       }
       return json;
     }
-    parseAttributes(node10, parent) {
+    parseAttributes(node11, parent) {
       var json = {
         children: [],
-        text: nl2br(node10.getAttribute("TEXT") || ""),
-        id: node10.getAttribute("ID")
+        text: nl2br(node11.getAttribute("TEXT") || ""),
+        id: node11.getAttribute("ID")
       };
-      var position = node10.getAttribute("POSITION");
+      var position = node11.getAttribute("POSITION");
       if (position) {
         json.side = position;
       }
-      var style = node10.getAttribute("STYLE");
+      var style = node11.getAttribute("STYLE");
       if (style == "bubble") {
         json.shape = "box";
       } else {
         json.shape = parent.shape;
       }
-      if (node10.getAttribute("FOLDED") == "true") {
+      if (node11.getAttribute("FOLDED") == "true") {
         json.collapsed = 1;
       }
-      var children = node10.children;
+      var children = node11.children;
       for (var i = 0; i < children.length; i++) {
         var child = children[i];
         switch (child.nodeName.toLowerCase()) {
@@ -1620,23 +1653,23 @@
         return elm;
       };
     }
-    parseAttributes(node10, parent) {
+    parseAttributes(node11, parent) {
       var json = {
         children: [],
-        text: nl2br(node10.getAttribute("title") || ""),
+        text: nl2br(node11.getAttribute("title") || ""),
         shape: "box"
       };
-      if (node10.getAttribute("expand") == "false") {
+      if (node11.getAttribute("expand") == "false") {
         json.collapsed = 1;
       }
-      var direction = node10.getAttribute("direction");
+      var direction = node11.getAttribute("direction");
       if (direction == "0") {
         json.side = "left";
       }
       if (direction == "1") {
         json.side = "right";
       }
-      var color = node10.getAttribute("color");
+      var color = node11.getAttribute("color");
       if (color) {
         var re = color.match(/^#(....)(....)(....)$/);
         if (re) {
@@ -1644,7 +1677,7 @@
           json.color = "#" + parts.join("");
         }
       }
-      json.icon = node10.getAttribute("icon") || "";
+      json.icon = node11.getAttribute("icon") || "";
       return json;
     }
   };
@@ -1860,14 +1893,14 @@
       return this.request("GET", url);
     }
     async request(method, url, data) {
-      let init19 = {
+      let init20 = {
         method,
         credentials: "include"
       };
       if (data) {
-        init19.body = data;
+        init20.body = data;
       }
-      let response = await fetch(url, init19);
+      let response = await fetch(url, init20);
       let text = await response.text();
       if (response.status == 200) {
         return text;
@@ -2510,10 +2543,10 @@ ${text}`);
   // .js/ui/io.js
   var currentMode = "load";
   var currentBackend = null;
-  var node7 = document.querySelector("#io");
-  var select6 = node7.querySelector("#backend");
+  var node8 = document.querySelector("#io");
+  var select6 = node8.querySelector("#backend");
   var PREFIX = "mm.app";
-  function init10() {
+  function init11() {
     [LocalUI, FirebaseUI, GDriveUI, FileUI, WebDAVUI, ImageUI].forEach((ctor) => {
       let bui = new ctor();
       select6.append(bui.option);
@@ -2565,12 +2598,12 @@ ${text}`);
   }
   function show(mode2) {
     currentMode = mode2;
-    node7.hidden = false;
-    node7.querySelector("h3").textContent = mode2;
+    node8.hidden = false;
+    node8.querySelector("h3").textContent = mode2;
     syncBackend();
   }
   function hide2() {
-    node7.hidden = true;
+    node8.hidden = true;
   }
   function quickSave() {
     if (currentBackend) {
@@ -2580,8 +2613,8 @@ ${text}`);
     }
   }
   function syncBackend() {
-    [...node7.querySelectorAll("div[id]")].forEach((node10) => node10.hidden = true);
-    node7.querySelector(`#${select6.value}`).hidden = false;
+    [...node8.querySelectorAll("div[id]")].forEach((node11) => node11.hidden = true);
+    node8.querySelector(`#${select6.value}`).hidden = false;
     repo4.get(select6.value).show(currentMode);
   }
   function setCurrentBackend(backend) {
@@ -2608,22 +2641,22 @@ ${text}`);
   }
 
   // .js/ui/context-menu.js
-  var node8 = document.querySelector("#context-menu");
+  var node9 = document.querySelector("#context-menu");
   var port;
-  function init11(port_) {
+  function init12(port_) {
     port = port_;
-    [...node8.querySelectorAll("[data-command]")].forEach((button) => {
+    [...node9.querySelectorAll("[data-command]")].forEach((button) => {
       let commandName = button.dataset.command;
       button.textContent = repo.get(commandName).label;
     });
     port.addEventListener("mousedown", handleEvent);
-    node8.addEventListener("mousedown", handleEvent);
+    node9.addEventListener("mousedown", handleEvent);
     close3();
   }
   function open(point) {
-    node8.hidden = false;
-    let w = node8.offsetWidth;
-    let h = node8.offsetHeight;
+    node9.hidden = false;
+    let w = node9.offsetWidth;
+    let h = node9.offsetHeight;
     let left = point[0];
     let top = point[1];
     if (left > port.offsetWidth / 2) {
@@ -2632,11 +2665,11 @@ ${text}`);
     if (top > port.offsetHeight / 2) {
       top -= h;
     }
-    node8.style.left = `${left}px`;
-    node8.style.top = `${top}px`;
+    node9.style.left = `${left}px`;
+    node9.style.top = `${top}px`;
   }
   function handleEvent(e) {
-    if (e.currentTarget != node8) {
+    if (e.currentTarget != node9) {
       close3();
       return;
     }
@@ -2654,27 +2687,27 @@ ${text}`);
     close3();
   }
   function close3() {
-    node8.hidden = true;
+    node9.hidden = true;
   }
 
   // .js/ui/ui.js
-  var node9 = document.querySelector("#ui");
+  var node10 = document.querySelector("#ui");
   function isActive() {
-    return node9.contains(document.activeElement);
+    return node10.contains(document.activeElement);
   }
   function toggle3() {
-    node9.hidden = !node9.hidden;
+    node10.hidden = !node10.hidden;
     publish("ui-change");
   }
   function getWidth() {
-    return node9.hidden ? 0 : node9.offsetWidth;
+    return node10.hidden ? 0 : node10.offsetWidth;
   }
   function update6() {
     [layout_exports, shape_exports, icon_exports, value_exports, status_exports].forEach((ui5) => ui5.update());
   }
-  function onClick2(e) {
+  function onClick3(e) {
     let target = e.target;
-    if (target == node9.querySelector("#toggle")) {
+    if (target == node10.querySelector("#toggle")) {
       toggle3();
       return;
     }
@@ -2692,7 +2725,7 @@ ${text}`);
       }
     }
   }
-  function init12(port4) {
+  function init13(port4) {
     [
       layout_exports,
       shape_exports,
@@ -2700,19 +2733,20 @@ ${text}`);
       value_exports,
       status_exports,
       color_exports,
+      text_color_exports,
       help_exports,
       tip_exports,
       notes_exports,
       io_exports
     ].forEach((ui5) => ui5.init());
-    init11(port4);
+    init12(port4);
     subscribe("item-select", update6);
     subscribe("item-change", (_message, publisher) => {
       if (publisher == currentItem) {
         update6();
       }
     });
-    node9.addEventListener("click", onClick2);
+    node10.addEventListener("click", onClick3);
     restore();
   }
 
@@ -3011,6 +3045,7 @@ ${text}`);
       this._icon = "";
       this._notes = "";
       this._color = "";
+      this._textColor = "";
       this._value = null;
       this._status = null;
       this._side = null;
@@ -3067,14 +3102,14 @@ ${text}`);
       return [bbox.width, bbox.height];
     }
     get position() {
-      const { node: node10 } = this.dom;
-      const transform = node10.getAttribute("transform");
+      const { node: node11 } = this.dom;
+      const transform = node11.getAttribute("transform");
       return transform.match(/\d+/g).map(Number);
     }
     set position(position) {
-      const { node: node10 } = this.dom;
+      const { node: node11 } = this.dom;
       const transform = `translate(${position.join(" ")})`;
-      node10.setAttribute("transform", transform);
+      node11.setAttribute("transform", transform);
     }
     get contentSize() {
       const { content } = this.dom;
@@ -3104,6 +3139,9 @@ ${text}`);
       if (this._color) {
         data.color = this._color;
       }
+      if (this._textColor) {
+        data.textColor = this._textColor;
+      }
       if (this._icon) {
         data.icon = this._icon;
       }
@@ -3141,6 +3179,9 @@ ${text}`);
       if (data.color) {
         this._color = data.color;
       }
+      if (data.textColor) {
+        this._textColor = data.textColor;
+      }
       if (data.icon) {
         this._icon = data.icon;
       }
@@ -3183,6 +3224,10 @@ ${text}`);
         this._color = data.color || "";
         dirty = 2;
       }
+      if (this._textColor != data.textColor) {
+        this._textColor = data.textColor || "";
+        dirty = 2;
+      }
       if (this._icon != data.icon) {
         this._icon = data.icon || "";
         dirty = 1;
@@ -3263,9 +3308,10 @@ ${text}`);
       this.updateIcon();
       this.updateValue();
       const { resolvedLayout, resolvedShape, dom } = this;
-      const { content, node: node10, connectors } = dom;
-      node10.dataset.shape = resolvedShape.id;
-      node10.dataset.align = resolvedLayout.computeAlignment(this);
+      const { content, node: node11, connectors } = dom;
+      dom.text.style.color = this.resolvedTextColor;
+      node11.dataset.shape = resolvedShape.id;
+      node11.dataset.align = resolvedLayout.computeAlignment(this);
       let fo = content.parentNode;
       let size = [
         Math.max(content.offsetWidth, content.scrollWidth),
@@ -3383,6 +3429,23 @@ ${text}`);
       }
       return COLOR;
     }
+    get textColor() {
+      return this._textColor;
+    }
+    set textColor(textColor) {
+      this._textColor = textColor;
+      this.update({ children: true });
+    }
+    get resolvedTextColor() {
+      if (this._textColor) {
+        return this._textColor;
+      }
+      const { parent } = this;
+      if (parent instanceof Item) {
+        return parent.resolvedTextColor;
+      }
+      return "";
+    }
     get layout() {
       return this._layout;
     }
@@ -3412,10 +3475,10 @@ ${text}`);
         return this._shape;
       }
       let depth = 0;
-      let node10 = this;
-      while (!node10.isRoot) {
+      let node11 = this;
+      while (!node11.isRoot) {
         depth++;
-        node10 = node10.parent;
+        node11 = node11.parent;
       }
       switch (depth) {
         case 0:
@@ -3544,13 +3607,13 @@ ${text}`);
       }
     }
     updateToggle() {
-      const { node: node10, toggle: toggle4 } = this.dom;
-      node10.classList.toggle("collapsed", this._collapsed);
+      const { node: node11, toggle: toggle4 } = this.dom;
+      node11.classList.toggle("collapsed", this._collapsed);
       toggle4.querySelector("path").setAttribute("d", this._collapsed ? D_PLUS : D_MINUS);
     }
   };
-  function findLinks(node10) {
-    let children = [...node10.childNodes];
+  function findLinks(node11) {
+    let children = [...node11.childNodes];
     for (let i = 0; i < children.length; i++) {
       let child = children[i];
       if (child instanceof Element) {
@@ -3570,9 +3633,9 @@ ${text}`);
         var link = document.createElement("a");
         link.innerHTML = link.href = result[0];
         if (before) {
-          node10.insertBefore(document.createTextNode(before), child);
+          node11.insertBefore(document.createTextNode(before), child);
         }
-        node10.insertBefore(link, child);
+        node11.insertBefore(link, child);
         if (after) {
           child.nodeValue = after;
           i--;
@@ -3641,10 +3704,10 @@ ${text}`);
       return this._root;
     }
     set root(root) {
-      const { node: node10, style } = this;
+      const { node: node11, style } = this;
       this._root = root;
-      node10.innerHTML = "";
-      node10.append(root.dom.node, style);
+      node11.innerHTML = "";
+      node11.append(root.dom.node, style);
       root.parent = this;
     }
     adjustFontSize(diff) {
@@ -3656,24 +3719,24 @@ ${text}`);
     mergeWith(data) {
       let ids = [];
       var current2 = currentItem;
-      var node10 = current2;
+      var node11 = current2;
       while (true) {
-        ids.push(node10.id);
-        if (node10.parent == this) {
+        ids.push(node11.id);
+        if (node11.parent == this) {
           break;
         }
-        node10 = node10.parent;
+        node11 = node11.parent;
       }
       this._root.mergeWith(data.root);
       if (current2.map) {
-        let node11 = current2;
+        let node12 = current2;
         let hidden = false;
         while (true) {
-          if (node11.parent == this) {
+          if (node12.parent == this) {
             break;
           }
-          node11 = node11.parent;
-          if (node11.collapsed) {
+          node12 = node12.parent;
+          if (node12.collapsed) {
             hidden = true;
           }
         }
@@ -3702,10 +3765,10 @@ ${text}`);
     update(options) {
       options = Object.assign({}, UPDATE_OPTIONS2, options);
       options.children && this._root.update({ parent: false, children: true });
-      const { node: node10 } = this;
+      const { node: node11 } = this;
       const { size } = this._root;
-      node10.setAttribute("width", String(size[0]));
-      node10.setAttribute("height", String(size[1]));
+      node11.setAttribute("width", String(size[0]));
+      node11.setAttribute("height", String(size[1]));
     }
     show(where) {
       where.append(this.node);
@@ -3745,8 +3808,8 @@ ${text}`);
       all2.sort((a, b) => a.distance - b.distance);
       return all2[0];
     }
-    getItemFor(node10) {
-      let content = node10.closest(".content");
+    getItemFor(node11) {
+      let content = node11.closest(".content");
       if (!content) {
         return;
       }
@@ -3811,8 +3874,8 @@ ${text}`);
           this.getPickCandidates(currentRect, child, direction, candidates);
         });
       }
-      var node10 = item.dom.content;
-      var rect = node10.getBoundingClientRect();
+      var node11 = item.dom.content;
+      var rect = node11.getBoundingClientRect();
       if (direction == "left" || direction == "right") {
         var x1 = currentRect.left + currentRect.width / 2;
         var x2 = rect.left + rect.width / 2;
@@ -3853,7 +3916,7 @@ ${text}`);
       this.node.style.top = `${point[1]}px`;
     }
   };
-  async function init13() {
+  async function init14() {
     let response = await fetch("map.css");
     css = await response.text();
   }
@@ -3874,7 +3937,7 @@ ${text}`);
       command.execute(e);
     }
   }
-  function init14() {
+  function init15() {
     window.addEventListener("keydown", handleEvent2);
   }
   function keyOK(key, e) {
@@ -3894,7 +3957,7 @@ ${text}`);
     previousDragState: null
   };
   var port2;
-  function init15(port_) {
+  function init16(port_) {
     port2 = port_;
     port2.addEventListener("touchstart", onDragStart);
     port2.addEventListener("mousedown", onDragStart);
@@ -4121,7 +4184,7 @@ ${text}`);
   // .js/clipboard.js
   var storedItem = null;
   var mode = "";
-  function init16() {
+  function init17() {
     document.body.addEventListener("cut", onCopyCut);
     document.body.addEventListener("copy", onCopyCut);
     document.body.addEventListener("paste", onPaste);
@@ -4218,7 +4281,7 @@ ${text}`);
       document.title = currentMap.name + " :: My Mind";
     }
   }
-  function init17() {
+  function init18() {
     subscribe("item-change", onItemChange);
   }
 
@@ -4485,19 +4548,19 @@ ${text}`);
     editing = false;
     return currentItem.stopEditing();
   }
-  async function init18() {
-    await init13();
+  async function init19() {
+    await init14();
     subscribe("ui-change", syncPort);
     window.addEventListener("resize", syncPort);
     window.addEventListener("beforeunload", (e) => {
       e.preventDefault();
       return "";
     });
-    init16();
-    init14();
-    init15(port3);
     init17();
-    init12(port3);
+    init15();
+    init16(port3);
+    init18();
+    init13(port3);
     syncPort();
     showMap(new Map2());
   }
@@ -4507,5 +4570,5 @@ ${text}`);
     port3.style.height = portSize[1] + "px";
     currentMap && currentMap.ensureItemVisibility(currentItem);
   }
-  init18();
+  init19();
 })();
diff --git a/src/action.ts b/src/action.ts
index 83151f3..3d7b484 100644
--- a/src/action.ts
+++ b/src/action.ts
@@ -186,6 +186,23 @@ export class SetColor extends Action {
 	}
 }
 
+export class SetTextColor extends Action {
+	protected oldTextColor: string;
+
+	constructor(protected item: Item, protected textColor: string) {
+		super();
+		this.oldTextColor = item.textColor;
+	}
+
+	do() {
+		this.item.textColor = this.textColor;
+	}
+
+	undo() {
+		this.item.textColor = this.oldTextColor;
+	}
+}
+
 export class SetText extends Action {
 	protected oldText: string;
 	protected oldValue: Value;
diff --git a/src/item.ts b/src/item.ts
index d78339b..9100222 100644
--- a/src/item.ts
+++ b/src/item.ts
@@ -8,12 +8,6 @@ import Layout, { repo as layoutRepo } from "./layout/layout.js";
 import Map from "./map.js";
 
 
-declare global {  // fixme
-	interface Window {
-		editor: any;
-	}
-}
-
 export const TOGGLE_SIZE = 6;
 export type Value = string | number | null;
 export type Status = "computed" | boolean | null;
@@ -25,6 +19,7 @@ export type Jsonified = Partial<{
 	notes: string;
 	side: Side;
 	color: string;
+	textColor: string;
 	icon: string;
 	value: Value;
 	status: Status | "yes" | "no";
@@ -48,6 +43,7 @@ export default class Item {
 	protected _icon = "";
 	protected _notes = "";
 	protected _color = "";
+	protected _textColor = "";
 	protected _value: Value = null;
 	protected _status: Status = null;
 	protected _side: Side | null = null; // side preference
@@ -153,6 +149,7 @@ export default class Item {
 
 		if (this._side) { data.side = this._side; }
 		if (this._color) { data.color = this._color; }
+		if (this._textColor) { data.textColor = this._textColor; }
 		if (this._icon) { data.icon = this._icon; }
 		if (this._value) { data.value = this._value; }
 		if (this._status) { data.status = this._status; }
@@ -176,6 +173,7 @@ export default class Item {
 		if (data.notes) { this.notes = data.notes; }
 		if (data.side) { this._side = data.side; }
 		if (data.color) { this._color = data.color; }
+		if (data.textColor) { this._textColor = data.textColor; }
 		if (data.icon) { this._icon = data.icon; }
 		if (data.value) { this._value = data.value; }
 		if (data.status) {
@@ -214,6 +212,11 @@ export default class Item {
 			dirty = 2;
 		}
 
+		if (this._textColor != data.textColor) {
+			this._textColor = data.textColor || "";
+			dirty = 2;
+		}
+
 		if (this._icon != data.icon) {
 			this._icon = data.icon || "";
 			dirty = 1;
@@ -314,6 +317,7 @@ export default class Item {
 		const { resolvedLayout, resolvedShape, dom } = this;
 		const { content, node, connectors } = dom;
 
+		dom.text.style.color = this.resolvedTextColor;
 		node.dataset.shape = resolvedShape.id; // applies css => modifies dimensions (necessary for layout)
 		node.dataset.align = resolvedLayout.computeAlignment(this); // applies css => modifies dimensions (necessary for layout)
 
@@ -423,6 +427,20 @@ export default class Item {
 		return COLOR;
 	}
 
+	get textColor() { return this._textColor; }
+	set textColor(textColor: string) {
+		this._textColor = textColor;
+		this.update({children:true});
+	}
+	get resolvedTextColor(): string {
+		if (this._textColor) { return this._textColor; }
+
+		const { parent } = this;
+		if (parent instanceof Item) { return parent.resolvedTextColor; }
+
+		return "";
+	}
+
 	get layout() { return this._layout; }
 	set layout(layout: Layout | null) {
 		this._layout = layout;
diff --git a/src/ui/text-color.ts b/src/ui/text-color.ts
new file mode 100644
index 0000000..1586da4
--- /dev/null
+++ b/src/ui/text-color.ts
@@ -0,0 +1,21 @@
+import * as actions from "../action.js";
+import * as app from "../my-mind.js";
+
+
+const node = document.querySelector<HTMLElement>("#text-color")!;
+
+export function init() {
+	node.addEventListener("click", onClick);
+
+	[...node.querySelectorAll<HTMLElement>("[data-color]")].forEach(item => {
+		item.style.backgroundColor = item.dataset.color!;
+	});
+}
+
+function onClick(e: MouseEvent) {
+	e.preventDefault();
+
+	let color = (e.target as HTMLElement).dataset.color || "";
+	let action = new actions.SetTextColor(app.currentItem, color);
+	app.action(action);
+}
diff --git a/src/ui/ui.ts b/src/ui/ui.ts
index f39f312..ac25ef5 100644
--- a/src/ui/ui.ts
+++ b/src/ui/ui.ts
@@ -2,6 +2,7 @@ import * as pubsub from "../pubsub.js";
 import * as app from "../my-mind.js";
 
 import * as color from "./color.js";
+import * as textColor from "./text-color.js";
 import * as value from "./value.js";
 import * as layout from "./layout.js";
 import * as icon from "./icon.js";
@@ -59,7 +60,7 @@ function onClick(e: MouseEvent) {
 }
 
 export function init(port: HTMLElement) {
-	[layout, shape, icon, value, status, color,
+	[layout, shape, icon, value, status, color, textColor,
 	help, tip, notes, io].forEach(ui => ui.init());
 	menu.init(port);