diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 0000000000..03bca22009
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,10 @@
+// import scss using scss-loader file
+import '!style-loader!css-loader!postcss-loader!sass-loader!./scss-loader.scss'
+import { dark, light } from './themes'
+
+export const parameters = {
+  darkMode: {
+    dark,
+    light,
+  }
+}
diff --git a/.storybook/scss-loader.scss b/.storybook/scss-loader.scss
new file mode 100644
index 0000000000..32491825e1
--- /dev/null
+++ b/.storybook/scss-loader.scss
@@ -0,0 +1,2 @@
+// load global styles used by storybook
+@use '../libs/chlorophyll/src/lib/index.scss';
diff --git a/.storybook/themes.js b/.storybook/themes.js
new file mode 100644
index 0000000000..5398bf2308
--- /dev/null
+++ b/.storybook/themes.js
@@ -0,0 +1,46 @@
+import { create } from '@storybook/theming'
+
+const common = {
+  appBorderRadius: 3,
+  brandImage: 'https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png',
+  brandTitle: 'Green',
+  brandUrl: 'https://github.com/sebgroup/green',
+  fontCode: 'monospace',
+  gridCellSize: 10,
+  inputBorderRadius: 7,
+}
+
+export const light = create({
+  ...common,
+  base: 'light',
+  appBg: 'rgb(238, 238, 238)',
+  appBorderColor: 'rgb(70, 70, 70)',
+  appContentBg: '#ffffff',
+  barBg: 'rgb(26, 26, 26)',
+  barSelectedColor: '#8fd668',
+  barTextColor: '#ffffff',
+  colorSecondary: 'rgb(75, 136, 37)',
+  inputBg: '#ffffff',
+  inputBorder: 'solid black 10px',
+  inputTextColor: 'rgb(41, 41, 41)',
+  textColor: 'rgb(41, 41, 41)',
+  textMutedColor: 'rgb(52, 52, 52)',
+})
+
+
+export const dark = create({
+  ...common,
+  base: 'dark',
+  appBg: '#222222',
+  appBorderColor: '#121212',
+  appContentBg: '#272727',
+  barBg: '#121212',
+  barSelectedColor: '#8fd668',
+  // barTextColor: '#ffffff',
+  colorSecondary: 'rgb(48, 134, 2)',
+  // inputBg: '#ffffff',
+  // inputBorder: 'solid black 10px',
+  // inputTextColor: 'rgb(41, 41, 41)',
+  textColor: '#dedede',
+  // textMutedColor: 'rgb(52, 52, 52)',*/
+})
diff --git a/libs/chlorophyll/.storybook/preview.js b/libs/chlorophyll/.storybook/preview.js
index 135ef2b4c9..8052d26c46 100644
--- a/libs/chlorophyll/.storybook/preview.js
+++ b/libs/chlorophyll/.storybook/preview.js
@@ -1,2 +1,5 @@
-// import scss using scss-loader file
-import '!style-loader!css-loader!postcss-loader!sass-loader!./scss-loader.scss';
+import { parameters as baseParameters } from '../../../.storybook/preview'
+
+export const parameters = {
+  ...baseParameters,
+}
diff --git a/libs/chlorophyll/.storybook/scss-loader.scss b/libs/chlorophyll/.storybook/scss-loader.scss
deleted file mode 100644
index 6e6091f054..0000000000
--- a/libs/chlorophyll/.storybook/scss-loader.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// load global styles used by storybook
-@use '../src/lib';
diff --git a/package.json b/package.json
index d958a72624..ec738becf5 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "@storybook/html": "^6.3.7",
     "@storybook/manager-webpack5": "^6.3.7",
     "@storybook/react": "^6.3.7",
+    "@storybook/theming": "^6.3.7",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
diff --git a/yarn.lock b/yarn.lock
index fb54f471d4..5d23b076e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3445,7 +3445,7 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.3.7":
+"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
   integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==