Taking theme config and applying classes desired. Relates to #91

Author: EvanLovely

dist/index.html

@@ -342,6 +342,31 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
 
 	<!-- load Pattern Lab data -->
 	<script src="styleguide/data/patternlab-data.js"></script>
+
+  <!-- applying theme config to get classes on before PL renders so there's no flash of unstyled content -->
+  <!-- @todo Consider moving this to own file -->
+  <script>
+    if (config && config.theme) {
+      if (config.theme.color === 'light') {
+        document.body.classList.add('pl-c-body--theme-light');
+      }
+      if (config.theme.layout === 'vertical') {
+        document.body.classList.add('pl-c-body--theme-sidebar');
+      }
+      switch (config.theme.density) {
+        case 'cozy':
+          document.body.classList.add('pl-c-body--theme-density-cozy');
+          break;
+        case 'comfortable':
+          document.body.classList.add('pl-c-body--theme-density-comfortable');
+          break;
+        default:
+          // not sure if you even need/want this
+          document.body.classList.add('pl-c-body--theme-density-compact');
+      }
+    }
+  </script>
+
 	<script src="annotations/annotations.js"></script>
 
 	<!-- load Pattern Lab external library js -->

src/html/index.html

@@ -37,6 +37,31 @@
 
 	<!-- load Pattern Lab data -->
 	<script src="styleguide/data/patternlab-data.js"></script>
+
+  <!-- applying theme config to get classes on before PL renders so there's no flash of unstyled content -->
+  <!-- @todo Consider moving this to own file -->
+  <script>
+    if (config && config.theme) {
+      if (config.theme.color === 'light') {
+        document.body.classList.add('pl-c-body--theme-light');
+      }
+      if (config.theme.layout === 'vertical') {
+        document.body.classList.add('pl-c-body--theme-sidebar');
+      }
+      switch (config.theme.density) {
+        case 'cozy':
+          document.body.classList.add('pl-c-body--theme-density-cozy');
+          break;
+        case 'comfortable':
+          document.body.classList.add('pl-c-body--theme-density-comfortable');
+          break;
+        default:
+          // not sure if you even need/want this
+          document.body.classList.add('pl-c-body--theme-density-compact');
+      }
+    }
+  </script>
+
 	<script src="annotations/annotations.js"></script>
 
 	<!-- load Pattern Lab external library js -->