diff --git a/CHANGELOG.md b/CHANGELOG.md
index f58c5f0b93..f152d91a62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix focus behavior for `List` @kuzhelov ([#413](https://github.com/stardust-ui/react/pull/413))
 - Remove `Sizes` and `Weights` enums, use typed string in `Text` instead @jurokapsiar ([#446](https://github.com/stardust-ui/react/pull/446))
 - Fix React's version in `peerDependencies` @layershifter ([#452](https://github.com/stardust-ui/react/pull/452))
+- Added Dark and Contrast theme variables for `Header` @bcalvery ([#427](https://github.com/stardust-ui/react/pull/427))
 
 ### Features
 - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))
diff --git a/docs/src/components/ComponentDoc/ComponentDoc.tsx b/docs/src/components/ComponentDoc/ComponentDoc.tsx
index bde132c4b9..8cabe86903 100644
--- a/docs/src/components/ComponentDoc/ComponentDoc.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDoc.tsx
@@ -80,7 +80,7 @@ class ComponentDoc extends React.Component<any, any> {
         <Grid>
           <Grid.Row style={topRowStyle}>
             <Grid.Column>
-              <Header as="h1" content={info.displayName} />
+              <Header as="h1" content={info.displayName} variables={{ color: 'black' }} />
               <p>{_.join(info.docblock.description, ' ')}</p>
               <ComponentAccessibility info={info} />
               <ComponentDocSee displayName={info.displayName} />
diff --git a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
index 1b7e6d39c8..898774be89 100644
--- a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
@@ -19,7 +19,12 @@ const ComponentDocAccessibility = ({ info }) => {
 
   return (
     <>
-      <Header as="h2" className="no-anchor" content="Accessibility" />
+      <Header
+        as="h2"
+        className="no-anchor"
+        content="Accessibility"
+        variables={{ color: 'black' }}
+      />
 
       {behaviorName && (
         <p>
diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
index 88956dba25..a91c112954 100644
--- a/src/themes/teams-dark/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,4 +1,5 @@
 export { default as Button } from './components/Button/buttonVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'
 export { default as Text } from './components/Text/textVariables'
diff --git a/src/themes/teams-dark/components/Header/headerVariables.ts b/src/themes/teams-dark/components/Header/headerVariables.ts
new file mode 100644
index 0000000000..2f207a7c01
--- /dev/null
+++ b/src/themes/teams-dark/components/Header/headerVariables.ts
@@ -0,0 +1,9 @@
+import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<HeaderVariables> => {
+  return {
+    color: siteVars.white,
+    descriptionColor: siteVars.gray02,
+  }
+}
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index f1c2b68dac..ccc007c5b0 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,8 +1,7 @@
 export { default as Avatar } from './components/Avatar/avatarVariables'
-
 export { default as Button } from './components/Button/buttonVariables'
-
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Header } from './components/Header/headerVariables'
 
 export { default as Input } from './components/Input/inputVariables'
 
diff --git a/src/themes/teams-high-contrast/components/Header/headerVariables.ts b/src/themes/teams-high-contrast/components/Header/headerVariables.ts
new file mode 100644
index 0000000000..7a9deccdc7
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Header/headerVariables.ts
@@ -0,0 +1,9 @@
+import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<HeaderVariables> => {
+  return {
+    color: siteVars.white,
+    descriptionColor: siteVars.white,
+  }
+}
diff --git a/src/themes/teams/components/Header/headerDescriptionVariables.ts b/src/themes/teams/components/Header/headerDescriptionVariables.ts
index da975bad96..3de2fffb02 100644
--- a/src/themes/teams/components/Header/headerDescriptionVariables.ts
+++ b/src/themes/teams/components/Header/headerDescriptionVariables.ts
@@ -1,3 +1,3 @@
 export default siteVariables => ({
-  color: 'rgba(0,0,0,.6)',
+  color: siteVariables.gray04,
 })
diff --git a/src/themes/teams/components/Header/headerVariables.ts b/src/themes/teams/components/Header/headerVariables.ts
index f43709739a..2147b544b9 100644
--- a/src/themes/teams/components/Header/headerVariables.ts
+++ b/src/themes/teams/components/Header/headerVariables.ts
@@ -1,4 +1,11 @@
-export default siteVariables => ({
-  color: 'black',
-  descriptionColor: undefined,
-})
+export interface HeaderVariables {
+  color: string
+  descriptionColor: string
+}
+
+export default (siteVars: any): HeaderVariables => {
+  return {
+    color: siteVars.black,
+    descriptionColor: undefined,
+  }
+}