         (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
         (e/ui-empty-state {})))
 
+    (e/ui-iframe {:width "100%" :height "400px"}
+      (dom/div #js {:className "t-dark" :style #js {:height "100%"}}
+        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
+        (e/ui-empty-state {})))
+
     (dom/h1 nil "Custom specification")
     (e/ui-iframe {:width "100%" :height "400px"}
-     (dom/div nil
-       (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
-       (e/ui-empty-state {:glyph :widgets :title "No widgets yet" :message "Create a widget to get started"}))))
+      (dom/div nil
+        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
+        (e/ui-empty-state {:glyph :widgets :title "No widgets yet" :message "Create a widget to get started"})))
+
+    (e/ui-iframe {:width "100%" :height "400px"}
+      (dom/div #js {:className "t-dark" :style #js {:height "100%"}}
+        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
+        (e/ui-empty-state {:glyph :widgets :title "No widgets yet" :message "Create a widget to get started"}))))
   )
 
 (defcard field-visual-regressions
   (dom/div nil
-    (for [size [:normal :small :medium :large]
-          states [:valid :invalid :error]]
-      (e/ui-field {:size size :state states :key (str size states (rand-int 256))} (str (name size) " " (name states) " field")))))
+    (for [size   [:normal :small :medium :large]
+          states [:valid :invalid :error]
+          dark   [false true]]
+      (dom/div #js {:className (when dark "t-dark") :style #js {:display "inline-block"} :key (str "field-" size states dark (rand-int 256))}
+        (e/ui-field {:size size :state states} (str (name size) " " (name states) " field"))))))
 
 
 (defcard icon-colors-visual-regressions
   (dom/div nil
-    (e/ui-icon {} (icon :alarm))
-    (e/ui-icon {:color :active} (icon :alarm))
-    (e/ui-icon {:color :passive} (icon :alarm))
-    (e/ui-icon {:size :huge :color :passive} (icon :alarm))))
+    (for [color [:none :active :passive]
+          size  [:normal :huge]
+          dark  [false true]]
+      (dom/div #js {:className (when dark "t-dark") :style #js {:display "inline-block"} :key (str "icon-" color size dark)}
+        (e/ui-icon {:color color :size size} (icon :alarm))))))
 
 
 (defcard icon-sizes-visual-regressions
   (dom/div nil
-    (e/ui-icon {:size :small} (icon :alarm))
-    (e/ui-icon {} (icon :alarm))
-    (e/ui-icon {:size :medium} (icon :alarm))
-    (e/ui-icon {:size :large} (icon :alarm))
-    (e/ui-icon {:size :xlarge} (icon :alarm))
-    (e/ui-icon {:size :huge} (icon :alarm))))
+    (for [size [:small :normal :medium :large :xlarge :huge]
+         dark [false true]]
+     (dom/div #js {:className (when dark "t-dark") :style #js {:display "inline-block"} :key (str "icon-" size dark)}
+       (e/ui-icon {:size size} (icon :alarm))))))
 
 
 (defcard icon-bar-visual-regressions
   (dom/div nil
-    (e/ui-icon-bar {}
-      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
-      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
-      (e/ui-icon-bar-item {:glyph :feedback :label "Support"})
-      )
-    (e/ui-icon-bar {:shifting true}
-      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
-      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
-      (e/ui-icon-bar-item {:glyph :feedback :label "Support"})
-      )
-    (dom/br nil)
-    (e/ui-icon-bar {:orientation :vertical}
-      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
-      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
-      (e/ui-icon-bar-item {:glyph :feedback :label "Support"}))))
+    (for [shifting    [false true]
+          orientation [:horizontal :vertical]
+          dark        [false true]]
+     (dom/div #js {:className (when dark "t-dark") :key (str "iconbar-" shifting orientation dark)}
+       (e/ui-icon-bar {:shifting shifting :orientation orientation}
+         (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
+         (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
+         (e/ui-icon-bar-item {:glyph :feedback :label "Support"}))
+       (dom/br nil)
+       ))))
 
 (defcard labels-visual-regressions
   (dom/div nil
     (for [color [:none :primary :accent]
-          icon ["" (icon :add)]]
-      (e/ui-label {:color color :key (str color icon (rand-int 256))} icon "Default"))))
+          icon  ["" (icon :add)]
+          dark  [false true]]
+      (dom/div #js {:className (when dark "t-dark")
+                    :style #js {:display "inline-block"}
+                    :key (str "label-" color icon (rand-int 256))}
+        (e/ui-label {:color color} icon "Default")))))
 
 
 (defcard loader-visual-regressions
+  (dom/div nil
   (l/row {}
     (l/col {:width 4 :halign :center}
       (e/ui-loader {}))
     (l/col {:width 4 :halign :center}
       (e/ui-loader {:color :primary}))
     (l/col {:width 4 :halign :center}
-      (e/ui-loader {:color :accent}))))
+      (e/ui-loader {:color :accent})))
+  (l/row {:className "t-dark"}
+     (l/col {:width 4 :halign :center}
+       (e/ui-loader {}))
+     (l/col {:width 4 :halign :center}
+       (e/ui-loader {:color :primary}))
+     (l/col {:width 4 :halign :center}
+       (e/ui-loader {:color :accent})))))
 
 
 (defcard messages-visual-regressions
   (dom/div nil
     (for [color [:none :primary :accent]
-          class ["" "u-font-size--semi-medium"]]
-      (e/ui-message {:color color :className class :key (str "messages-" (name color) (name class))}
-        (str "This is a " (name color) " message.")))
-    (e/ui-message {}
-      (str "This is a message with an icon.") (e/ui-icon {:size :small :glyph :arrow_forward}))))
-
-
-(defcard modal
-  (dom/div nil
-    (e/ui-iframe {:height "200" :width "100%"}
-      (dom/div #js {}
-        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
-        (e/ui-dialog {:visible true}
-          (e/ui-dialog-title {} "Informative")
-          (e/ui-dialog-body {} "You have been notified.")
-          (e/ui-dialog-actions {}
-            (e/ui-flat-button {:color :primary} "Cancel")
-            (e/ui-flat-button {:color :primary} "Ok")))))))
+          size  [:normal :medium]
+          icon  [false true]
+          dark  [false true]]
+      (dom/div #js {:className (when dark "t-dark") :key (str "messages-" color size icon dark)}
+        (e/ui-message {:color     color
+                      :className (when (= size :medium) "u-font-size--semi-medium")}
+         (str "This is a " (name color) " message.")
+          (when icon (e/ui-icon {:size (when (= size :normal) :small) :glyph :arrow_forward})))))))
+
+
+(defcard modal-visual-regressions
+  (dom/div nil
+    (for [modal [false true]
+          dark  [false true]]
+     (dom/div #js {:key (str "dialog-" modal dark)}
+       (e/ui-iframe {:height "200" :width "100%"}
+         (dom/div #js {:className (when dark "t-dark") :style #js {:height "100%"}}
+           (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
+           (e/ui-dialog {:visible true :modal modal}
+             (e/ui-dialog-title {} "Informative")
+             (e/ui-dialog-body {} "You have been notified.")
+             (e/ui-dialog-actions {}
+               (e/ui-flat-button {:color :primary} "Cancel")
+               (e/ui-flat-button {:color :primary} "Ok")))))))))
 
 
 (defcard notifications-visual-regressions
   (dom/div nil
     (for [kind [:normal :informative :success :warning :error]
-          width [:normal :wide]]
-      (dom/div #js {:key (str "id-" kind width)}
+          width [:normal :wide]
+          dark  [false true]]
+      (dom/div #js {:className (when dark "t-dark") :key (str "id-" kind width dark)}
         (e/ui-notification {:kind kind :width width}
          ;; TODO Warning key prop needed on NotificationTitle but simply setting one doesn't suppress the error.
          (e/ui-notification-title {} (str (when (= width :wide) (str/capitalize (name width))) " " (str/capitalize (name kind))))

          color    [:neutral :primary :accent]
          size     [:normal :small]
          disabled [false true]
          active   [false true]]
      (e/ui-flat-button {:className "extra" :color color :active active :disabled disabled
                         :shape     shape :size size  :key (str "btn-flat-" shape color size disabled active)}
        (str shape " " color " " size " " (when disabled "disabled ") (when active "active "))))
    (e/ui-flat-button {} "Label" (icon :arrow_forward))
    (e/ui-flat-button {} (icon :arrow_back) "Label")))

(defcard circular-buttons-visual-regression-testing
  (dom/div nil
    (for [color    [:neutral :primary :accent]
          size     [:normal :small]
          disabled [false true]
          active   [false true]]
      (e/ui-circular-button {:className "extra" :color color :active active :disabled disabled
                             :title     (str (name color) " " (name size) " " (when disabled "disabled ") (when active "active "))
                             :size      size  :key (str "btn-circular-" color size disabled active)}
        (icon :add)))))

(defcard checkbox-visual-regressions
  (dom/div nil
    (dom/div nil
      (dom/label #js {:className "is-optional" :style #js {:width "80px"}} "Normal ")
      (e/ui-checkbox {:id "checkbox-1"})
      (e/ui-checkbox {:id "checkbox-3" :checked true})
      (e/ui-checkbox {:id "checkbox-3" :checked :partial}))
    (dom/div nil
      (dom/label #js {:className "is-optional" :style #js {:width "80px"}} "Disabled ")
      (e/ui-checkbox {:id "checkbox-2" :disabled true})
      (e/ui-checkbox {:id "checkbox-3" :checked true :disabled true})
      (e/ui-checkbox {:id "checkbox-4" :checked :partial :disabled true}))))


(defcard empty-state-visual-regressions

          color    [:neutral :primary :accent]
          size     [:normal :small]
          disabled [false true]
          active   [false true]
          dark     [false true]]
      (dom/span #js {:className (if dark "t-dark" "") :style #js {:display "inline-block"} :key (str "btn-" shape color size disabled active dark)}
        (e/ui-button {:className "extra" :color color :active active :disabled disabled
                     :shape     shape :size size}
         (str shape " " color " " size " " (when disabled "disabled ") (when active "active ")))))
    (e/ui-button {} "Label" (icon :arrow_forward))
    (e/ui-button {} (icon :arrow_back) "Label")
    (dom/div #js {:className "t-dark"}
      (e/ui-button {} "Label" (icon :arrow_forward))
      (e/ui-button {} (icon :arrow_back) "Label"))))

(defcard flat-buttons-visual-regression-testing
  (dom/div nil
