Bugfix attempt #1

css/themeoptions.css

@@ -0,0 +1,140 @@
+
+    css += (if Style.lightTheme then """
+.prettyprint {
+  background-color: #e7e7e7;
+  border: 1px solid #dcdcdc;
+}
+.com {
+  color: #dd0000;
+}
+.str,
+.atv {
+  color: #7fa61b;
+}
+.pun {
+  color: #61663a;
+}
+.tag {
+  color: #117743;
+}
+.kwd {
+  color: #5a6F9e;
+}
+.typ,
+.atn {
+  color: #9474bd;
+}
+.lit {
+  color: #368c72;
+}\n
+""" else """
+.prettyprint {
+  background-color: rgba(0,0,0,.1);
+  border: 1px solid rgba(0,0,0,0.5);
+}
+.tag {
+  color: #96562c;
+}
+.pun {
+  color: #5b6f2a;
+}
+.com {
+  color: #a34443;
+}
+.str,
+.atv {
+  color: #8ba446;
+}
+.kwd {
+  color: #987d3e;
+}
+.typ,
+.atn {
+  color: #897399;
+}
+.lit {
+  color: #558773;
+}\n
+""")
+
+    if _conf["Alternate Post Colors"]
+      css += """
+.replyContainer:not(.hidden):nth-of-type(2n+1) .post {
+  background-image: #{agent}linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"});
+}\n
+"""
+
+    if _conf["Color Reply Headings"]
+      css += """
+.postInfo {
+  background: #{if (replyHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (replyHeading.shiftRGB -12, false) + ",0.8)" else "rgba(0,0,0,0.1)"};
+  border-bottom: 1px solid #{theme["Reply Border"]}
+}\n"""
+
+    if _conf["Color File Info"]
+      css += """
+.file {
+  background: #{if (fileHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (fileHeading.shiftRGB -8, false) + ",0.8)" else "rgba(0,0,0,0.1)"};
+  border-bottom: 1px solid #{theme["Reply Border"]}
+}\n
+"""
+    if _conf["OP Background"]
+      css += """
+.op.post {
+  background: #{theme["Reply Background"]};
+  border: 1px solid #{theme["Reply Border"]};
+}
+.op.post:target
+.op.post.highlight {
+  background: #{theme["Highlighted Reply Background"]};
+  border: 1px solid #{theme["Highlighted Reply Border"]};
+}\n
+"""
+    if _conf["4chan SS Sidebar"]
+      background = new Style.color Style.colorToHex theme["Reply Background"]
+      css += """
+body::before {
+  z-index: -1;
+  background: none repeat scroll 0% 0% rgba(#{background.shiftRGB -18}, 0.8);
+  border-#{Style.sidebarLocation[1]}: 2px solid #{backgroundC};
+  box-shadow:
+    #{if _conf["Sidebar Location"] is "right" then "inset" else ""}  1px 0 0 #{theme["Thread Wrapper Border"]},
+    #{if _conf["Sidebar Location"] is "left"  then "inset" else ""} -1px 0 0 #{theme["Thread Wrapper Border"]};
+}\n
+"""
+
+    css += {
+      text: """
+a.useremail[href*="sage"]:last-of-type::#{_conf["Sage Highlight Position"]},
+a.useremail[href*="Sage"]:last-of-type::#{_conf["Sage Highlight Position"]},
+a.useremail[href*="SAGE"]:last-of-type::#{_conf["Sage Highlight Position"]} {
+  content: " (sage) ";
+  color: #{theme["Sage"]};
+}\n
+"""
+      image: """
+a.useremail[href*="sage"]:last-of-type::#{_conf["Sage Highlight Position"]},
+a.useremail[href*="Sage"]:last-of-type::#{_conf["Sage Highlight Position"]},
+a.useremail[href*="SAGE"]:last-of-type::#{_conf["Sage Highlight Position"]} {
+  content: url("data:image/png;base64,A4AAAAOCAMAAAAolt3jAAABa1BMVEUAAACqrKiCgYIAAAAAAAAAAACHmX5pgl5NUEx/hnx4hXRSUVMiIyKwrbFzn19SbkZ1d3OvtqtpaWhcX1ooMyRsd2aWkZddkEV8vWGcpZl+kHd7jHNdYFuRmI4bHRthaV5WhUFsfGZReUBFZjdJazpGVUBnamYfHB9TeUMzSSpHgS1cY1k1NDUyOC8yWiFywVBoh1lDSEAZHBpucW0ICQgUHhBjfFhCRUA+QTtEQUUBAQFyo1praWspKigWFRZHU0F6j3E9Oz5VWFN0j2hncWONk4sAAABASDxJWkJKTUgAAAAvNC0fJR0DAwMAAAA9QzoWGhQAAAA8YytvrFOJsnlqyT9oqExqtkdrsExpsUsqQx9rpVJDbzBBbi5utk9jiFRuk11iqUR64k5Wf0JIZTpadk5om1BkyjmF1GRNY0FheFdXpjVXhz86XSp2yFJwslR3w1NbxitbtDWW5nNnilhFXTtYqDRwp1dSijiJ7H99AAAAUnRSTlMAJTgNGQml71ypu3cPEN/RDh8HBbOwQN7wVg4CAQZ28vs9EDluXjo58Ge8xwMy0P3+rV8cT73sawEdTv63NAa3rQwo4cUdAl3hWQSWvS8qqYsjEDiCzAAAAIVJREFUeNpFx7GKAQAYAOD/A7GbZVAWZTBZFGQw6LyCF/MIkiTdcOmWSzYbJVE2u1KX0J1v+8QDv/EkyS0yXF/NgeEILiHfyc74mICTQltqYXBeAWU9HGxU09YqqEvAElGjyZYjPyLqitjzHSEiGkrsfMWr0VLe+oy/djGP//YwfbeP8bN3Or0bkqEVblAAAAAASUVORK5CYII=");
+  vertical-align: top;
+  margin-#{if _conf["Sage Highlight Position"] is "before" then "right" else "left"}: #{parseInt _conf['Emoji Spacing']}px;
+}\n
+"""
+      none: ""
+    }[_conf["Sage Highlighting"]]
+    if _conf["Announcements"] is "slideout"
+      css += """
+#globalMessage {
+  background: #{theme["Dialog Background"]};
+  border: 1px solid #{theme["Dialog Border"]};
+}\n
+"""
+    if _conf["Post Form Decorations"]
+      css += """
+#qr {
+  border-color: #{theme["Buttons Border"]};
+  background: #{backgroundC};
+  box-shadow: #{if _conf['Quote Shadows'] then "5px 5px 5px #{theme['Shadow Color']}" else  ""};
+}\n
+"""

src/appchan.coffee

@@ -108,8 +108,8 @@ Style =
 #{bg.b} #{-fg.b} 0 0 #{fg.b}
 "
 
-    fgHex = Style.colorToHex text
+    fgHex = Style.colorToHex(text) or 'ffffff'
-    bgHex = Style.colorToHex background
+    bgHex = Style.colorToHex(background) or '000000'
     string = matrix {
       r: parseInt(fgHex.substr(0, 2), 16) / 255
       g: parseInt(fgHex.substr(2, 2), 16) / 255
@@ -193,13 +193,15 @@ Style =
     _conf = Conf
     agent = Style.agent
 
-    bgColor = new Style.color Style.colorToHex backgroundC = theme["Background Color"]
+    bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')
 
     Style.lightTheme = bgColor.isLight()
 
     icons = "data:image/png;base64,#{Icons[_conf["Icons"]]}"
 
     css = """<%= grunt.file.read('css/theme.css') %>"""
+    
+    <%= grunt.file.read('css/themeoptions.css') %>
 
   iconPositions: ->
     css = """<%= grunt.file.read('css/icons.base.css') %>"""
@@ -1532,7 +1534,7 @@ ThemeTools =
 
           colorInput = $.el 'input',
             className: 'color'
-            value: "##{Style.colorToHex input.value}"
+            value: "##{Style.colorToHex(input.value) or 'aaaaaa'}"
 
           JSColor.bind colorInput
 
@@ -1553,7 +1555,7 @@ ThemeTools =
           return alert "Syntax error on #{@name}."
 
         if @className == "colorfield"
-          @nextSibling.value = "##{Style.colorToHex @value}"
+          @nextSibling.value = "##{Style.colorToHex(@value) or 'aaaaaa'}"
           @nextSibling.color.importColor()
 
         editTheme[@name] = @value

src/features.coffee

@@ -3931,10 +3931,14 @@ Linkify =
       el = (type = Linkify.types[@getAttribute("data-service")]).el.call @
 
       # Set style values.
-      el.style.cssText = if style = type.style
+      if style = type.style
-        style
+        el.style.cssText = style
       else
-        "border: 0; width: #{$.get 'embedWidth', Config['embedWidth']}px; height: #{$.get 'embedHeight', Config['embedHeight']}px"
+        items = 
+          'embedWidth':  Config['embedWidth']
+          'embedHeight': Config['embedHeight']
+        $.get items, (items) ->
+          el.style.cssText = "border: 0; width: #{item[0]}px; height: #{item[1]}px"
 
       @textContent = '(unembed)'