feat: configure storybook theme (#3152)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: Ansh Goyal <[email protected]>

.storybook/AsyncAPIStorybookTheme.ts

@@ -0,0 +1,42 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  // Brand Information
+  brandTitle: 'AsyncAPI Initiative',
+  brandUrl: 'https://www.asyncapi.com/',
+  brandImage: 'img/logos/asyncapi-horizontal-white-logo.svg',
+  brandTarget: '_blank',
+
+  // Typography
+  fontBase: '"Work Sans", sans-serif',
+  fontCode: 'monospace',
+
+
+  // Themes
+  base: 'dark',
+
+  /* -- FULL THEME IS NOT BEING USED DUE TO LACK OF STORYBOOK SUPPORT FOR CUSTOMIZING THE SETTINGS & ACTIONS BAR BG/TEXTCOLOR INDEPENDENTLY. --
+  colorPrimary: '#47BCEE',
+  colorSecondary: '#8851FB',
+
+  // UI
+  appBg: '#1b1130',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#dfe6ea',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#ffffff',
+  textInverseColor: '#ffffff',
+  textMutedColor: '#5c6870',
+  inputTextColor: '#2e3438',
+
+  // Toolbar
+  barTextColor: '#9E9E9E',
+
+  // Toolbar default and active colors
+  booleanBg: '#dfe6ea',
+  booleanSelectedBg: '#8851FB'
+  */
+});

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "../styles/globals.css";
 import type { Preview } from "@storybook/react";
+import { themes } from '@storybook/theming';
 import {
   Title,
   Subtitle,
@@ -20,6 +21,7 @@ const preview: Preview = {
       },
     },
     docs: {
+      theme: themes.light,
       toc: {
         title: 'Table of contents',
       },