     <div id=col-settings>
       <datalist id=col-list>#{join u.map (c) -> "<option value=#{c}>"}</datalist>
       <select id=col-group>#{join G.map (g, i) -> "<option value=#{i}>#{g.s}"}</select>
-      <p><label>Foreground: <input type=color id=col-fg list=col-list></label>
-      <p><label>Background: <input type=color id=col-bg list=col-list></label>
+      <p><input type=checkbox id=col-fg-cb>Foreground <input type=color id=col-fg list=col-list>
+      <p><input type=checkbox id=col-bg-cb>Background <input type=color id=col-bg list=col-list>
       <p><label><input type=checkbox id=col-bold      ><b>B</b></label>
          <label><input type=checkbox id=col-italic    ><i>I</i></label>
          <label><input type=checkbox id=col-underlined><u>U</u></label>

  $('#col-bold      ').click  -> model[sel].bold       = +!!@checked; updateSampleStyle(); return
  $('#col-italic    ').click  -> model[sel].italic     = +!!@checked; updateSampleStyle(); return
  $('#col-underlined').click  -> model[sel].underlined = +!!@checked; updateSampleStyle(); return
  return

@load = ->

renderCSS = (v, rp = '') -> # v: style objects keyed by token type, rp: css rule prefix
  join G.map (g) ->
    h = $.extend {}, g.d, v[g.t] # h: effective style
    g.c.split(',').map((x) -> rp + ' ' + x).join(',') + '{' +
      (h.fg         && "color:#{h.fg};"             || '') +
      (h.bg         && "background-color:#{h.bg};"  || '') +
      (h.bold       && 'font-weight:bold;'          || '') +
      (h.italic     && 'font-style:italic;'         || '') +
