Support style switcher and non-default styles on Tinyboard.

src/main/Main.coffee

@@ -233,33 +233,39 @@ 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, '-'
+
+    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          = 'yotsuba-b'
+    style = mainStyleSheet = styleSheets = null
-    mainStyleSheet = $ 'link[title=switch]', d.head
+
-    styleSheets    = $$ 'link[rel="alternate stylesheet"]', d.head
     setStyle = ->
+      # Use preconfigured CSS for 4chan's default themes.
+      if Site.software is 'yotsuba'
         $.rmClass doc, style
         style = null
         for styleSheet in styleSheets
           if styleSheet.href is mainStyleSheet?.href
             style = styleSheet.title.toLowerCase().replace('new', '').trim().replace /\s+/g, '-'
             style = styleSheet.href.match(/[a-z]*(?=[^/]*$)/)[0] if style is '_special'
-          style = null unless style in ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'photon', 'tomorrow', 'spooky']
+            style = null unless style in knownStyles
             break
         if style
           $.addClass doc, style
           $.rm Main.bgColorStyle
-      else
+          return
-        # Determine proper background color for dialogs if 4chan is using a special stylesheet.
+
+      # Determine proper dialog background color for other themes.
       div = Site.bgColoredEl()
       div.style.position = 'absolute';
       div.style.visibility = 'hidden';
       $.add d.body, div
       bgColor = window.getComputedStyle(div).backgroundColor
-        c.log(bgColor)
       $.rm div
       rgb = bgColor.match(/[\d.]+/g)
       # Use body background if reply background is transparent
@@ -275,12 +281,19 @@ Main =
         }
       """
       $.after $.id('fourchanx-css'), Main.bgColorStyle
-    setStyle()
+
-    return unless mainStyleSheet
+    $.onExists d.head, Site.selectors.styleSheet, (el) ->
+      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 ")]'