diff --git a/src/less/nav-bar.less b/src/less/nav-bar.less
index 5f2e91ad4..9c917fe1d 100644
--- a/src/less/nav-bar.less
+++ b/src/less/nav-bar.less
@@ -43,4 +43,13 @@
     transform: translate(0, -100%);
     box-shadow: @shadow-none;
   }
+
+  &.dark {
+    background-color: @tertiary;
+    color: @white;
+  }
+
+  &.light {
+    background-color: @white;
+  }
 }
diff --git a/src/ts/components/navigation/nav-bar.examples.md b/src/ts/components/navigation/nav-bar.examples.md
index c7d2dce96..f4b1e08d2 100644
--- a/src/ts/components/navigation/nav-bar.examples.md
+++ b/src/ts/components/navigation/nav-bar.examples.md
@@ -17,6 +17,37 @@ class NavBarExample extends React.Component {
 
     return (
       <div>
+        <NavBar fixed={type === 'fixed'} shy={type === 'shy'} dark>
+          <Column>
+            <h1 className="font-size-large display-inline-block margin-bottom-none margin-top-small">
+              Title
+            </h1>
+
+            <Nav className="float-right">
+              <NavItem active>
+                <a>
+                  One
+                </a>
+              </NavItem>
+              <NavItem>
+                <a>
+                  Two
+                </a>
+              </NavItem>
+              <NavItem>
+                <a>
+                  Three
+                </a>
+              </NavItem>
+              <NavItem className="button hollow primary">
+                <a>
+                  Logout
+                </a>
+              </NavItem>
+            </Nav>
+          </Column>
+        </NavBar>
+
         <NavBar fixed={type === 'fixed'} shy={type === 'shy'}>
           <Column>
             <h1 className="font-size-large display-inline-block margin-bottom-none margin-top-small">
diff --git a/src/ts/components/navigation/nav-bar.tsx b/src/ts/components/navigation/nav-bar.tsx
index 363bde0b5..dd5a146de 100644
--- a/src/ts/components/navigation/nav-bar.tsx
+++ b/src/ts/components/navigation/nav-bar.tsx
@@ -19,6 +19,8 @@ export interface NavBarProps extends ComponentProps, HTMLProps<HTMLElement> {
    * Remove NavBar shadow
    */
   noShadow?: boolean;
+  dark?: boolean;
+  light?: boolean;
 }
 
 export interface NavBarState {
@@ -74,6 +76,8 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       className,
       fixed,
       shy,
+      dark,
+      light,
       noShadow,
       component: Component = 'div',
       ...remainingProps
@@ -87,6 +91,8 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       shy ? 'shy' : null,
       hidden ? 'hidden' : null,
       noShadow ? 'no-shadow' : null,
+      dark ? 'dark' : null,
+      light ? 'light' : null,
       className,
     ];
 
diff --git a/tests/__snapshots__/nav-bar.tsx.snap b/tests/__snapshots__/nav-bar.tsx.snap
index 2c482f333..ab6370df0 100644
--- a/tests/__snapshots__/nav-bar.tsx.snap
+++ b/tests/__snapshots__/nav-bar.tsx.snap
@@ -18,6 +18,12 @@ exports[`NavBar should apply shy class 1`] = `
 />
 `;
 
+exports[`NavBar should apply the dark class 1`] = `
+<div
+  className="nav-bar dark"
+/>
+`;
+
 exports[`NavBar should apply the hidden class 1`] = `
 <NavBar
   shy={true}
@@ -28,6 +34,12 @@ exports[`NavBar should apply the hidden class 1`] = `
 </NavBar>
 `;
 
+exports[`NavBar should apply the light class 1`] = `
+<div
+  className="nav-bar light"
+/>
+`;
+
 exports[`NavBar should match snapshot 1`] = `
 <div
   className="nav-bar"
diff --git a/tests/nav-bar.tsx b/tests/nav-bar.tsx
index d050e481f..2f5d4a93f 100644
--- a/tests/nav-bar.tsx
+++ b/tests/nav-bar.tsx
@@ -67,6 +67,18 @@ describe('NavBar', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should apply the dark class', () => {
+    const tree = renderer.create(<NavBar dark />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should apply the light class', () => {
+    const tree = renderer.create(<NavBar light />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should apply the hidden class', () => {
     const instance = enzyme.mount(<NavBar shy />);