Support style switcher and non-default styles on Tinyboard.

src/main/Main.coffee

@@ -233,54 +233,67 @@ Main =
     Main.setClass()
 
   setClass: ->
-    if g.VIEW is 'catalog'
+    knownStyles = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'photon', 'tomorrow', 'spooky']
-      $.addClass doc, $.id('base-css').href.match(/catalog_(\w+)/)[1].replace('_new', '').replace /_+/g, '-'
+
-      return
+    if Site.software is 'yotsuba' and g.VIEW is 'catalog'
+      if (mainStyleSheet = $.id('base-css'))
+        style = mainStyleSheet.href.match(/catalog_(\w+)/)?[1].replace('_new', '').replace(/_+/g, '-')
+        if style in knownStyles
+          $.addClass doc, style
+          return
+
+    style = mainStyleSheet = styleSheets = null
 
-    style          = 'yotsuba-b'
-    mainStyleSheet = $ 'link[title=switch]', d.head
-    styleSheets    = $$ 'link[rel="alternate stylesheet"]', d.head
     setStyle = ->
-      $.rmClass doc, style
+      # Use preconfigured CSS for 4chan's default themes.
-      style = null
+      if Site.software is 'yotsuba'
-      for styleSheet in styleSheets
+        $.rmClass doc, style
-        if styleSheet.href is mainStyleSheet?.href
+        style = null
-          style = styleSheet.title.toLowerCase().replace('new', '').trim().replace /\s+/g, '-'
+        for styleSheet in styleSheets
-          style = styleSheet.href.match(/[a-z]*(?=[^/]*$)/)[0] if style is '_special'
+          if styleSheet.href is mainStyleSheet?.href
-          style = null unless style in ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'photon', 'tomorrow', 'spooky']
+            style = styleSheet.title.toLowerCase().replace('new', '').trim().replace /\s+/g, '-'
-          break
+            style = styleSheet.href.match(/[a-z]*(?=[^/]*$)/)[0] if style is '_special'
-      if style
+            style = null unless style in knownStyles
-        $.addClass doc, style
+            break
-        $.rm Main.bgColorStyle
+        if style
-      else
+          $.addClass doc, style
-        # Determine proper background color for dialogs if 4chan is using a special stylesheet.
+          $.rm Main.bgColorStyle
-        div = Site.bgColoredEl()
+          return
-        div.style.position = 'absolute';
+
-        div.style.visibility = 'hidden';
+      # Determine proper dialog background color for other themes.
-        $.add d.body, div
+      div = Site.bgColoredEl()
-        bgColor = window.getComputedStyle(div).backgroundColor
+      div.style.position = 'absolute';
-        c.log(bgColor)
+      div.style.visibility = 'hidden';
-        $.rm div
+      $.add d.body, div
-        rgb = bgColor.match(/[\d.]+/g)
+      bgColor = window.getComputedStyle(div).backgroundColor
-        # Use body background if reply background is transparent
+      $.rm div
-        unless /^rgb\(/.test(bgColor)
+      rgb = bgColor.match(/[\d.]+/g)
-          s = window.getComputedStyle(d.body)
+      # Use body background if reply background is transparent
-          bgColor = "#{s.backgroundColor} #{s.backgroundImage} #{s.backgroundRepeat} #{s.backgroundPosition}"
+      unless /^rgb\(/.test(bgColor)
-        Main.bgColorStyle.textContent = """
+        s = window.getComputedStyle(d.body)
-          .dialog, .suboption-list > div:last-of-type, :root.catalog-hover-expand .catalog-container:hover > .post {
+        bgColor = "#{s.backgroundColor} #{s.backgroundImage} #{s.backgroundRepeat} #{s.backgroundPosition}"
-            background: #{bgColor};
+      Main.bgColorStyle.textContent = """
-          }
+        .dialog, .suboption-list > div:last-of-type, :root.catalog-hover-expand .catalog-container:hover > .post {
-          .unread-mark-read {
+          background: #{bgColor};
-            background-color: rgba(#{rgb[...3].join(', ')}, #{0.5*(rgb[3] || 1)});
+        }
-          }
+        .unread-mark-read {
-        """
+          background-color: rgba(#{rgb[...3].join(', ')}, #{0.5*(rgb[3] || 1)});
-        $.after $.id('fourchanx-css'), Main.bgColorStyle
+        }
-    setStyle()
+      """
-    return unless mainStyleSheet
+      $.after $.id('fourchanx-css'), Main.bgColorStyle
-    new MutationObserver(setStyle).observe mainStyleSheet, {
+
-      attributes: true
+    $.onExists d.head, Site.selectors.styleSheet, (el) ->
-      attributeFilter: ['href']
+      mainStyleSheet = el
-    }
+      if Site.software is 'yotsuba'
+        styleSheets = $$ 'link[rel="alternate stylesheet"]', d.head
+      new MutationObserver(setStyle).observe mainStyleSheet, {
+        attributes: true
+        attributeFilter: ['href']
+      }
+      $.on mainStyleSheet, 'load', setStyle
+      setStyle()
+    unless mainStyleSheet
+      setStyle()
 
   initReady: ->
     if Site.is404?()

src/site/SW.tinyboard.coffee

@@ -88,6 +88,7 @@ SW.tinyboard =
     spoiler:   '.spoiler'
     quotelink: 'a[onclick^="highlightReply("]'
     boardList: '.boardlist'
+    styleSheet: '#stylesheet'
 
   xpath:
     thread:        'div[starts-with(@id,"thread_")]'

src/site/SW.yotsuba.coffee

@@ -39,6 +39,7 @@ SW.yotsuba =
     spoiler:   's'
     quotelink: ':not(pre) > .quotelink' # XXX https://github.com/4chan/4chan-JS/issues/77: 4chan currently creates quote links inside [code] tags; ignore them
     boardList: '#boardNavDesktop > .boardList'
+    styleSheet: 'link[title=switch]'
 
   xpath:
     thread:        'div[contains(concat(" ",@class," ")," thread ")]'