diff --git a/.storybook/main.js b/.storybook/main.js
index a05660790..8016824e8 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,7 +3,7 @@ const webpack = require('webpack')
 module.exports = {
   core: { builder: 'webpack5' },
   stories: ['../src/**/*.stories.tsx'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', 'storybook-dark-mode/register'],
   framework: '@storybook/react',
   webpackFinal: async (config) => {
     config.resolve.plugins = [
diff --git a/package-lock.json b/package-lock.json
index bd3f5c56c..547454832 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,6 +95,7 @@
         "pretty-quick": "^3.1.3",
         "process": "^0.11.10",
         "serve": "^14.0.1",
+        "storybook-dark-mode": "^1.1.2",
         "stream-http": "^3.2.0",
         "tsconfig-paths-webpack-plugin": "^4.0.0",
         "typescript": "^4.8.3"
@@ -37496,6 +37497,34 @@
       "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==",
       "dev": true
     },
+    "node_modules/storybook-dark-mode": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.1.2.tgz",
+      "integrity": "sha512-L5QjJN49bl+ktprM6faMkTeW+LCvuMYWQaRo8/JGSMmzomIjLT7Yo20UiTsnMgMYyYWYF5O4EK/F3OvjDNp8tQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "^6.0.0",
+        "@storybook/api": "^6.0.0",
+        "@storybook/components": "^6.0.0",
+        "@storybook/core-events": "^6.0.0",
+        "@storybook/theming": "^6.0.0",
+        "fast-deep-equal": "^3.0.0",
+        "global": "^4.4.0",
+        "memoizerific": "^1.11.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -70519,6 +70548,22 @@
       "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==",
       "dev": true
     },
+    "storybook-dark-mode": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.1.2.tgz",
+      "integrity": "sha512-L5QjJN49bl+ktprM6faMkTeW+LCvuMYWQaRo8/JGSMmzomIjLT7Yo20UiTsnMgMYyYWYF5O4EK/F3OvjDNp8tQ==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "^6.0.0",
+        "@storybook/api": "^6.0.0",
+        "@storybook/components": "^6.0.0",
+        "@storybook/core-events": "^6.0.0",
+        "@storybook/theming": "^6.0.0",
+        "fast-deep-equal": "^3.0.0",
+        "global": "^4.4.0",
+        "memoizerific": "^1.11.3"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
diff --git a/package.json b/package.json
index 9a8a1ac4d..27c8d12b5 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,7 @@
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "serve": "^14.0.1",
+    "storybook-dark-mode": "^1.1.2",
     "stream-http": "^3.2.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.8.3"