diff --git a/website/src/components/layout/docs.js b/website/src/components/layout/docs.js
index 204ba709e..2758d0408 100644
--- a/website/src/components/layout/docs.js
+++ b/website/src/components/layout/docs.js
@@ -76,7 +76,7 @@ const Docs = ({ pageContext, children }) => {
             {sidebar && <Sidebar items={sidebar.items} pageMenu={pageMenu} slug={slug} />}
             <Main
                 section={section}
-                theme={nightly ? 'nightly' : legacy ? 'legacy' : theme}
+                theme={nightly ? 'nightly' : legacy ? 'legacy' : theme ?? 'blue'}
                 sidebar
                 asides
                 wrapContent
diff --git a/website/src/components/layout/index.js b/website/src/components/layout/index.js
index 2ab3c359a..921081e7d 100644
--- a/website/src/components/layout/index.js
+++ b/website/src/components/layout/index.js
@@ -96,8 +96,8 @@ class Layout extends React.Component {
 
     render() {
         const { location, children } = this.props
-        const { title, section, sectionTitle, teaser, theme = 'blue', searchExclude } = this.props
-        const uiTheme = nightly ? 'nightly' : legacy ? 'legacy' : theme
+        const { title, section, sectionTitle, teaser, theme, searchExclude } = this.props
+        const uiTheme = nightly ? 'nightly' : legacy ? 'legacy' : theme ?? 'blue'
         const bodyClass = classNames(`theme-${uiTheme}`, { 'search-exclude': !!searchExclude })
         const isDocs = ['usage', 'models', 'api', 'styleguide'].includes(section)
 
diff --git a/website/src/components/main.js b/website/src/components/main.js
index c48e5c7b3..3c26ca1d7 100644
--- a/website/src/components/main.js
+++ b/website/src/components/main.js
@@ -25,11 +25,11 @@ export default function Main({
     sidebar = false,
     asides = false,
     wrapContent = false,
-    theme = 'blue',
+    theme,
     footer,
     children,
 }) {
-    const pattern = patterns[theme]
+    const pattern = patterns[theme ?? 'blue']
     const mainClassNames = classNames(classes.root, {
         [classes['with-sidebar']]: sidebar,
         [classes['with-asides']]: asides,
@@ -50,6 +50,6 @@ Main.propTypes = {
     sidebar: PropTypes.bool,
     asides: PropTypes.bool,
     wrapContent: PropTypes.bool,
-    theme: PropTypes.string.isRequired,
+    theme: PropTypes.string,
     footer: PropTypes.node,
 }