diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
index fcec4c6..2d9e914 100644
--- a/docs/dialogs.stories.js
+++ b/docs/dialogs.stories.js
@@ -9,7 +9,8 @@ stories.addDecorator(withKnobs);
 stories.add('dialog', () => {
   const open = boolean('open', true) ? 'open' : '';
   const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
-  const selectedClasses = [isRounded];
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+  const selectedClasses = [isRounded, isDark];
 
   return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
       <p class="title">Dialog</p>
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
index 8a4c236..14853a2 100644
--- a/scss/elements/dialogs.scss
+++ b/scss/elements/dialogs.scss
@@ -12,5 +12,14 @@
 
   &.is-rounded {
     @include rounded-corners();
+
+    &.is-dark {
+      @include rounded-corners(true);
+    }
+  }
+  &.is-dark {
+    color: $background-color;
+    background-color: $base-color;
+    border-color: $background-color;
   }
 }