Updating the theme.

.storybook/manager-head.html

@@ -0,0 +1,40 @@
+<style>
+  /* Sidebar Overrides */
+
+	.sidebar-subheading {
+		letter-spacing: normal!important;
+	}
+	.sidebar-item:hover {
+		background:rgba(250,255,105,0.1)!important;
+		color:#FFF!important;
+	}
+
+	.sidebar-item[data-selected="true"]:hover {
+		background:rgba(250,255,105,1)!important;
+		color:#151515!important;
+	}
+
+	.sidebar-item[data-selected="true"] {
+		color:#151515!important;
+		font-weight: 600!important;
+	}
+
+	.sidebar-item[data-selected="true"] svg {
+		color:#151515!important;
+	}
+
+	.sidebar-item[data-selected="true"]:hover svg {
+		color:#151515!important;
+	}
+
+	.sidebar-item[data-nodetype="document"] svg,
+	.sidebar-item[data-nodetype="story"] svg {
+		color: #FAFF69!important;
+	}
+
+	.sidebar-item[data-selected="true"][data-nodetype="document"] svg,
+	.sidebar-item[data-selected="true"][data-nodetype="story"] svg {
+		color: #151515!important;
+	}
+
+</style>

.storybook/manager.ts

@@ -4,8 +4,12 @@ import { addons } from "@storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({
-  theme,
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  showToolbar: true,
   sidebar: {
     showRoots: true,
-  }
+  },
+  theme: theme,
 });

.storybook/preview-head.html

@@ -2,8 +2,10 @@
 <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 
 <style>
+
 	.sbdocs-preview, .docs-story, .docs-story > div:first-child {
 		min-height: 180px;
 		padding: 0;
 	}
+
 </style>

.storybook/theme.ts

@@ -3,11 +3,12 @@
 import { create } from "@storybook/theming/create";
 
 export default create({
-  base: "light",
+  base: "dark",
+  colorPrimary: '#FAFF69',
+  colorSecondary: '#FAFF69',
   brandTitle: "ClickUI Storybook",
   brandUrl: "/",
   brandImage: "/logo.svg",
-  appBg: "white",
   brandTarget: "_self",
   fontBase:  `"Inter", "SF Pro Display", -apple-system,
   BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,