diff --git a/src/components/nav-drawer/nav-drawer-header-item.ts b/src/components/nav-drawer/nav-drawer-header-item.ts
index 5c2fcd8bc..99f1e25e7 100644
--- a/src/components/nav-drawer/nav-drawer-header-item.ts
+++ b/src/components/nav-drawer/nav-drawer-header-item.ts
@@ -1,8 +1,8 @@
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
-import { styles as fluent } from './styles/fluent/nav-drawer-header-item.fluent.css.js';
-import { styles as indigo } from './styles/indigo/nav-drawer-header-item.indigo.css.js';
-import { styles } from './styles/nav-drawer-header-item.base.css.js';
+import { styles as fluent } from './themes/light/fluent/nav-drawer-header-item.fluent.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer-header-item.indigo.css.js';
+import { styles } from './themes/light/nav-drawer-header-item.base.css.js';
 
 /**
  * A wrapper for navigation drawer's header.
diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts
index 668c86b25..81e03e53f 100644
--- a/src/components/nav-drawer/nav-drawer-item.ts
+++ b/src/components/nav-drawer/nav-drawer-item.ts
@@ -7,9 +7,9 @@ import {
 } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as fluent } from './styles/fluent/nav-drawer-item.fluent.css.js';
-import { styles as indigo } from './styles/indigo/nav-drawer-item.indigo.css.js';
-import { styles } from './styles/nav-drawer-item.base.css.js';
+import { styles as fluent } from './themes/light/fluent/nav-drawer-item.fluent.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer-item.indigo.css.js';
+import { styles } from './themes/light/nav-drawer-item.base.css.js';
 
 /**
  * Represents a navigation drawer item.
diff --git a/src/components/nav-drawer/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts
index 8d38c3291..3365598ad 100644
--- a/src/components/nav-drawer/nav-drawer.ts
+++ b/src/components/nav-drawer/nav-drawer.ts
@@ -2,8 +2,8 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
-import { styles as indigo } from './styles/indigo/nav-drawer.indigo.css.js';
-import { styles } from './styles/nav-drawer.base.css.js';
+import { styles as indigo } from './themes/light/indigo/nav-drawer.indigo.css.js';
+import { styles } from './themes/light/nav-drawer.base.css.js';
 
 /**
  * Represents a side navigation container that provides
diff --git a/src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss b/src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss
deleted file mode 100644
index 8060013b7..000000000
--- a/src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '../../../../styles/utilities/index' as *;
-
-:host {
-    @include type-category('caption');
-}
diff --git a/src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss b/src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss
deleted file mode 100644
index 533d87949..000000000
--- a/src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '../../../../styles/utilities/index' as *;
-
-[part='base'] {
-    @include type-category('body-2');
-}
diff --git a/src/components/nav-drawer/styles/indigo/nav-drawer-header-item.indigo.scss b/src/components/nav-drawer/styles/indigo/nav-drawer-header-item.indigo.scss
deleted file mode 100644
index 9a72b09fc..000000000
--- a/src/components/nav-drawer/styles/indigo/nav-drawer-header-item.indigo.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '../../../../styles/utilities/index' as *;
-
-:host {
-    color: color(gray, 50);
-}
diff --git a/src/components/nav-drawer/styles/indigo/nav-drawer.indigo.scss b/src/components/nav-drawer/styles/indigo/nav-drawer.indigo.scss
deleted file mode 100644
index fca009b7b..000000000
--- a/src/components/nav-drawer/styles/indigo/nav-drawer.indigo.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use '../../../../styles/utilities/index' as *;
-
-:host {
-    [part='base'] {
-        background: #{color(gray, 700)};
-        border: none;
-        box-shadow: none;
-    }
-}
diff --git a/src/components/nav-drawer/themes/dark/nav-drawer-item.base.scss b/src/components/nav-drawer/themes/dark/nav-drawer-item.base.scss
new file mode 100644
index 000000000..246eef193
--- /dev/null
+++ b/src/components/nav-drawer/themes/dark/nav-drawer-item.base.scss
@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100, .5)};
+    }
+}
diff --git a/src/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.scss b/src/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.scss
new file mode 100644
index 000000000..e80b8498d
--- /dev/null
+++ b/src/components/nav-drawer/themes/dark/nav-drawer-item.bootstrap.scss
@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100)};
+    }
+}
diff --git a/src/components/nav-drawer/themes/dark/nav-drawer-item.fluent.scss b/src/components/nav-drawer/themes/dark/nav-drawer-item.fluent.scss
new file mode 100644
index 000000000..d8c60c445
--- /dev/null
+++ b/src/components/nav-drawer/themes/dark/nav-drawer-item.fluent.scss
@@ -0,0 +1,10 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --hover-background: #{color(gray, 100, .5)};
+        --active-background: #{color(primary, 400, .12)};
+        --active-icon-color: #{color(primary, 100)};
+        --active-text-color: #{color(primary, 200)};
+    }
+}
diff --git a/src/components/nav-drawer/themes/dark/nav-drawer-item.indigo.scss b/src/components/nav-drawer/themes/dark/nav-drawer-item.indigo.scss
new file mode 100644
index 000000000..4d2c10ee0
--- /dev/null
+++ b/src/components/nav-drawer/themes/dark/nav-drawer-item.indigo.scss
@@ -0,0 +1,9 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer-item {
+        --text-color: #{color(gray, 100)};
+        --hover-text-color: #{color(gray, 50)};
+        --active-background: #{color(gray, 400, .5)};
+    }
+}
diff --git a/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss
new file mode 100644
index 000000000..0eeeb66f9
--- /dev/null
+++ b/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss
@@ -0,0 +1,7 @@
+@use '../../../../styles/utilities' as *;
+
+@mixin theme() {
+    igc-nav-drawer {
+        --background: #{color(gray, 500)};
+    }
+}
diff --git a/src/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.scss b/src/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.scss
new file mode 100644
index 000000000..524963376
--- /dev/null
+++ b/src/components/nav-drawer/themes/light/fluent/nav-drawer-header-item.fluent.scss
@@ -0,0 +1,5 @@
+@use '../../../../../styles/utilities/index' as *;
+
+:host {
+    @include type-category('caption');
+}
diff --git a/src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.scss b/src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.scss
new file mode 100644
index 000000000..a2c0de229
--- /dev/null
+++ b/src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.scss
@@ -0,0 +1,13 @@
+@use '../../../../../styles/utilities/index' as *;
+
+$active-icon-color: var(--active-icon-color, color(primary, 500)) !default;
+
+[part='base'] {
+    @include type-category('body-2');
+}
+
+:host([active]) {
+    [part='icon'] {
+        color: $active-icon-color;
+    }
+}
diff --git a/src/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.scss b/src/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.scss
new file mode 100644
index 000000000..89dd70990
--- /dev/null
+++ b/src/components/nav-drawer/themes/light/indigo/nav-drawer-header-item.indigo.scss
@@ -0,0 +1,5 @@
+@use '../../../../../styles/utilities/index' as *;
+
+:host {
+    color: color(gray, 50);
+}
diff --git a/src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss b/src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.scss
similarity index 53%
rename from src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss
rename to src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.scss
index 0fbff0377..a548be3fc 100644
--- a/src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss
+++ b/src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.scss
@@ -1,18 +1,22 @@
-@use '../../../../styles/utilities/index' as *;
+@use '../../../../../styles/utilities/index' as *;
+
+$active-background: var(--active-background, color(gray, 600, .8)) !default;
+$text-color: var(--text-color, color(gray, 300, .8)) !default;
+$hover-text-color: var(--hover-text-color, color(gray, 100)) !default;
 
 :host {
     [part~='base'] {
         @include border-radius(rem(24px));
 
         gap: rem(24px);
-        color: color(gray, 300, .8);
+        color: $text-color;
         padding: rem(4px);
         margin: rem(15px) rem(8px) !important;
 
         &:hover,
         &:focus-within {
             background: transparent;
-            color: color(gray, 100);
+            color: $hover-text-color;
         }
     }
 
@@ -23,7 +27,7 @@
 
 :host([active]) {
     [part~='base'] {
-        background: color(gray, 600, .8);
+        background: $active-background;
         color: color(gray, 50);
     }
 }
diff --git a/src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.scss
new file mode 100644
index 000000000..60ca8e990
--- /dev/null
+++ b/src/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.scss
@@ -0,0 +1,16 @@
+@use '../../../../../styles/utilities/index' as *;
+
+$background: var(--background, color(gray, 700)) !default;
+
+:host {
+    [part='base'] {
+        background: $background;
+        border: none;
+        box-shadow: none;
+    }
+}
+
+:host([position='start']) [part='mini'],
+:host([position='end']) [part='mini'] {
+    background: $background;
+}
diff --git a/src/components/nav-drawer/styles/nav-drawer-header-item.base.scss b/src/components/nav-drawer/themes/light/nav-drawer-header-item.base.scss
similarity index 52%
rename from src/components/nav-drawer/styles/nav-drawer-header-item.base.scss
rename to src/components/nav-drawer/themes/light/nav-drawer-header-item.base.scss
index e45b1520c..9092f212c 100644
--- a/src/components/nav-drawer/styles/nav-drawer-header-item.base.scss
+++ b/src/components/nav-drawer/themes/light/nav-drawer-header-item.base.scss
@@ -1,11 +1,11 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
 :host {
     display: block;
     padding: rem(20px) rem(16px);
     white-space: nowrap;
-    color: color(gray, 900);
+    color: color(gray, 800);
 
     @include type-category('subtitle-1');
 }
diff --git a/src/components/nav-drawer/styles/nav-drawer-item.base.scss b/src/components/nav-drawer/themes/light/nav-drawer-item.base.scss
similarity index 68%
rename from src/components/nav-drawer/styles/nav-drawer-item.base.scss
rename to src/components/nav-drawer/themes/light/nav-drawer-item.base.scss
index 943b928e3..92f30d3d2 100644
--- a/src/components/nav-drawer/styles/nav-drawer-item.base.scss
+++ b/src/components/nav-drawer/themes/light/nav-drawer-item.base.scss
@@ -1,6 +1,9 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
+$active-text-color: var(--active-text-color, color(primary, 500)) !default;
+$active-background: var(--active-background, color(primary, 500, .12)) !default;
+$hover-background: var(--hover-background, color(gray, 200, .8)) !default;
 $item-margin: rem(8px);
 
 [part~='base'] {
@@ -9,7 +12,7 @@ $item-margin: rem(8px);
     align-items: center;
     flex-flow: row nowrap;
     position: relative;
-    color: color(gray, 800);
+    color: color(gray, 700);
     max-height: rem(48px);
     margin: #{$item-margin} !important;
     padding: rem(12px) rem(8px);
@@ -31,12 +34,10 @@ $item-margin: rem(8px);
         font: inherit;
     }
 
-    &:hover {
-        background: color(gray, 200, .87);
-    }
-
+    &:hover,
     &:focus-within {
-        background: color(gray, 300, .87);
+        background: $hover-background;
+        color: color(gray, 900);
     }
 }
 
@@ -68,7 +69,7 @@ $item-margin: rem(8px);
 
 :host([active]) {
     [part~='base'] {
-        background: color(primary, 500, .12);
-        color: color(primary, 500);
+        background: $active-background;
+        color: $active-text-color;
     }
 }
diff --git a/src/components/nav-drawer/styles/nav-drawer.base.scss b/src/components/nav-drawer/themes/light/nav-drawer.base.scss
similarity index 96%
rename from src/components/nav-drawer/styles/nav-drawer.base.scss
rename to src/components/nav-drawer/themes/light/nav-drawer.base.scss
index f1bcbd3d3..36d1bd128 100644
--- a/src/components/nav-drawer/styles/nav-drawer.base.scss
+++ b/src/components/nav-drawer/themes/light/nav-drawer.base.scss
@@ -1,5 +1,5 @@
-@use '../../../styles/common/component';
-@use '../../../styles/utilities/index' as *;
+@use '../../../../styles/common/component';
+@use '../../../../styles/utilities/index' as *;
 
 :host {
     flex-shrink: 0;
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 814034424..400283dc3 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -5,6 +5,7 @@
 @use '../../../components/slider/themes/dark/slider.bootstrap' as slider;
 @use '../../../components/list/themes/dark/list.bootstrap' as list;
 @use '../../../components/tree/themes/dark/tree-item.bootstrap' as tree-item;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.bootstrap' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #0d6efd,
@@ -24,3 +25,4 @@ $palette: utils.palette(
 @include slider.theme();
 @include list.theme();
 @include tree-item.theme();
+@include nav-drawer-item.theme();
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 3dabd9cad..a0b866d25 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -10,6 +10,7 @@
 @use '../../../components/slider/themes/dark/slider.fluent.scss' as slider;
 @use '../../../components/list/themes/dark/list.fluent' as list;
 @use '../../../components/tree/themes/dark/tree-item.fluent' as tree-item;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.fluent' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #0078d4,
@@ -33,3 +34,4 @@ $palette: utils.palette(
 @include slider.theme();
 @include list.theme();
 @include tree-item.theme();
+@include nav-drawer-item.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 87b444e0c..b5e771ecd 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -8,6 +8,8 @@
 @use '../../../components/list/themes/dark/list.indigo' as list;
 @use '../../../components/tree/themes/dark/tree-item.indigo' as tree-item;
 @use '../../../components/dropdown/themes/dark/dropdown.indigo' as dropdown;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer.indigo' as nav-drawer;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.indigo' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #3f51b5,
@@ -30,3 +32,5 @@ $palette: utils.palette(
 @include list.theme();
 @include tree-item.theme();
 @include dropdown.theme();
+@include nav-drawer.theme();
+@include nav-drawer-item.theme();
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index 38425f43c..cfa24bf0c 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,6 +1,7 @@
 @use '../../utilities' as utils;
 @use '../base/material' as base;
 @use '../../../components/input/themes/dark/input.dark.material' as input;
+@use '../../../components/nav-drawer/themes/dark/nav-drawer-item.base.scss' as nav-drawer-item;
 
 $palette: utils.palette(
     $primary: #09f,
@@ -11,3 +12,4 @@ $palette: utils.palette(
 
 @include base.root-styles($palette);
 @include input.theme();
+@include nav-drawer-item.theme();