init theme config

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+  theme: theme
+})

.storybook/preview.js

@@ -9,7 +9,10 @@ export const globalTypes = {
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: ['light', 'dark']
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ]
     }
   },
   backgrounds: {

.storybook/theme.js

@@ -0,0 +1,42 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  // Theme
+  base: 'light',
+
+  // Colors
+  colorPrimary: '#141414',
+  colorSecondary: '#ff4092',
+
+  // UI
+  appBg: '#F6F9FC',
+  appContentBg: '#FFFFFF',
+  appBorderColor: 'rgba(0,0,0,.1)',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#333333',
+  textInverseColor: '#FFFFFF',
+  textMutedColor: '#666666',
+
+  // Toolbar default and active colors
+  barTextColor: '#999999',
+  barBg: '#FFFFFF',
+
+  // Form colors
+  inputBg: '#FFFFFF',
+  inputBorder: 'rgba(0,0,0,.3)',
+  inputTextColor: '#333333',
+  inputBorderRadius: 4,
+
+  // Branding
+  brandTitle: 'Ocean Protocol',
+  brandUrl: 'https://oceanprotocol.com/',
+  brandImage:
+    'https://oceanprotocol.com/static/1286d9bd28e341567b0fdeeb810b9f8e/logo.png',
+  brandTarget: '_self'
+})

package.json

@@ -28,6 +28,7 @@
     "@oceanprotocol/art": "^3.2.0",
     "@oceanprotocol/lib": "^1.1.5",
     "@oceanprotocol/typographies": "^0.1.0",
+    "@storybook/theming": "^6.5.9",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
     "@walletconnect/web3-provider": "^1.7.8",