diff --git a/scss/form/selects.scss b/scss/form/selects.scss
index f6f3e7d7..4f5f5c14 100644
--- a/scss/form/selects.scss
+++ b/scss/form/selects.scss
@@ -47,11 +47,10 @@
 
   // prettier-ignore
   $types:
+    "dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
     "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
     "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
-    "error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
-    "dark" map-get($default-colors, "normal") map-get($default-colors, "hover");
-
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
   @each $type in $types {
     &.is-#{nth($type, 1)} {
       $color: nth($type, 2);
diff --git a/story/select/select.template.js b/story/select/select.template.js
index 81a66d29..e79c5335 100644
--- a/story/select/select.template.js
+++ b/story/select/select.template.js
@@ -1,16 +1,23 @@
-import { select } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
 
 import sharedOptions from '../_helpers/shared';
 
 export default () => {
-  const selectedClass = select('class', {
+  const isDark = boolean('is-dark', false);
+  const selectOptions = select('class', {
     default: '',
     ...sharedOptions,
-    'is-dark': 'is-dark',
   }, '');
 
+  const selectedClasses = classNames(
+    'nes-select',
+    selectOptions,
+    { 'is-dark': isDark },
+  );
+
   return `
-    <div class="nes-select ${selectedClass}">
+    <div class="${selectedClasses}">
       <select required>
         <option value="" disabled selected hidden>Select...</option>
         <option value="0">To be</option>