diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
index 32331d2f7..99cacc7e3 100644
--- a/src/lib/components/sidebar/SidebarItem.svelte
+++ b/src/lib/components/sidebar/SidebarItem.svelte
@@ -3,6 +3,7 @@
   export let disabled = false;
   export let small = false;
   export let hover = false;
+
   // handling link behavior
   export let href: string = undefined;
   export let target: string = undefined;
@@ -41,9 +42,9 @@
     border-radius: 0.25rem;
     border: none;
 
-    color: inherit;
-    fill: inherit;
-    background: transparent;
+    color: var(--color, inherit);
+    fill: var(--fill, inherit);
+    background: var(--background, transparent);
 
     font-family: var(--font-sans, "Source Sans Pro");
     font-size: var(--font-m, 1rem);
@@ -59,7 +60,9 @@
   .container.hover:hover,
   .container.hover:focus {
     cursor: pointer;
-    background: var(--gray-2, #d8dee2);
+    background: var(--hover-background, var(--gray-2, #d8dee2));
+    color: var(--hover-color, var(--color, inherit));
+    fill: var(--hover-fill, var(--fill, inherit));
   }
   @media (hover: none) {
     a.container:hover,
@@ -76,8 +79,11 @@
     background: transparent;
   }
 
+  /* Active */
   .container.active {
-    background-color: var(--blue-2, #b5ceed);
+    background: var(--active-background, var(--blue-2, #b5ceed));
+    color: var(--active-color, var(--color, inherit));
+    fill: var(--active-fill, var(--fill, inherit));
   }
 
   /* Small */
diff --git a/src/lib/components/sidebar/stories/SidebarItem.stories.svelte b/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
index 4acacc5fc..2f7d4209d 100644
--- a/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
+++ b/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
@@ -1,8 +1,9 @@
 <script context="module" lang="ts">
   import { Story } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
+  import { Comment16, Home16, Link16, Paintbrush16 } from "svelte-octicons";
   import SidebarItem from "../SidebarItem.svelte";
-  import { Comment16, Home16 } from "svelte-octicons";
+  import Flex from "../../common/Flex.svelte";
 
   export const meta = {
     title: "Components / Sidebar / Item",
@@ -43,6 +44,23 @@
   </SidebarItem>
 </Story>
 
+<Story name="Active">
+  <Flex>
+    <SidebarItem active>Static</SidebarItem>
+    <SidebarItem active href="#">
+      <Link16 /> Link
+    </SidebarItem>
+    <SidebarItem
+      active
+      --active-background="var(--orange-light)"
+      --active-color="var(--orange-dark)"
+      --active-fill="var(--orange)"
+    >
+      <Paintbrush16 /> Custom Active Colors
+    </SidebarItem>
+  </Flex>
+</Story>
+
 <Story name="Small">
   <SidebarItem small>
     <Comment16 /> Add a note…