   $('#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
+  $('#col-fg-cb').click -> $('#col-fg').toggle @checked; model[sel].fg = @checked && $('#col-fg').val() || ''; updateSampleStyle(); return
+  $('#col-bg-cb').click -> $('#col-bg').toggle @checked; model[sel].bg = @checked && $('#col-bg').val() || ''; 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
    selector = g.c.split(',').map((x) -> rp + ' ' + x).join ','
    "#{selector}{color:#{h.fg};" +
      (h.bg         && "background-color:#{h.bg};"  || '') +
      (h.bold       && 'font-weight:bold;'          || '') +
      (h.italic     && 'font-style:italic;'         || '') +

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