FEATURE: add archetype class to body

app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6

@@ -0,0 +1,23 @@
+// Mix this in to a view that has a `archetype` property to automatically
+// add it to the body as the view is entered / left / model is changed.
+// This is used for keeping the `body` style in sync for the background image.
+export default {
+  _enterView: function() { this.get('archetype'); }.on('init'),
+
+  _removeClasses() {
+    $('body').removeClass(function(idx, css) {
+      return (css.match(/\barchetype-\S+/g) || []).join(' ');
+    });
+  },
+
+  _categoryChanged: function() {
+    const archetype = this.get('archetype');
+    this._removeClasses();
+
+    if (archetype) {
+      $('body').addClass('archetype-' + archetype);
+    }
+  }.observes('archetype'),
+
+  _leaveView: function() { this._removeClasses(); }.on('willDestroyElement')
+};

app/assets/javascripts/discourse/mixins/add-category-class.js.es6

@@ -4,14 +4,14 @@
 export default {
   _enterView: function() { this.get('categoryFullSlug'); }.on('init'),
 
-  _removeClasses: function() {
+  _removeClasses() {
     $('body').removeClass(function(idx, css) {
       return (css.match(/\bcategory-\S+/g) || []).join(' ');
     });
   },
 
   _categoryChanged: function() {
-    var categoryFullSlug = this.get('categoryFullSlug');
+    const categoryFullSlug = this.get('categoryFullSlug');
     this._removeClasses();
 
     if (categoryFullSlug) {

app/assets/javascripts/discourse/views/topic.js.es6

@@ -1,8 +1,9 @@
 import AddCategoryClass from 'discourse/mixins/add-category-class';
+import AddArchetypeClass from 'discourse/mixins/add-archetype-class';
 import { listenForViewEvent } from 'discourse/lib/app-events';
 import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 
-var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
+var TopicView = Discourse.View.extend(AddCategoryClass, AddArchetypeClass, Discourse.Scrolling, {
   templateName: 'topic',
   topicBinding: 'controller.model',
   userFiltersBinding: 'controller.userFilters',
@@ -19,6 +20,8 @@ var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
 
   postStream: Em.computed.alias('controller.postStream'),
 
+  archetype: Em.computed.alias('topic.archetype'),
+
   _composeChanged: function() {
     var composerController = Discourse.get('router.composerController');
     composerController.clearState();