diff --git a/app/soapbox/actions/theme.js b/app/soapbox/actions/theme.js
index 809170730..c33b4ea4d 100644
--- a/app/soapbox/actions/theme.js
+++ b/app/soapbox/actions/theme.js
@@ -1,8 +1,17 @@
-export const SET_THEME = 'SET_THEME';
+export const THEME_SET = 'THEME_SET';
+export const THEME_GENERATE = 'THEME_GENERATE';
+
+export function generateTheme(brandColor, mode) {
+  return {
+    type: THEME_GENERATE,
+    brandColor,
+    mode,
+  };
+}
 
 export function setTheme(themeData) {
   return {
-    type: SET_THEME,
+    type: THEME_SET,
     themeData,
   };
 }
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index be9856722..bac0982d8 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -24,8 +24,7 @@ import { fetchMe } from 'soapbox/actions/me';
 import PublicLayout from 'soapbox/features/public_layout';
 import { getSettings } from 'soapbox/actions/settings';
 import { themeDataToCss } from 'soapbox/utils/theme';
-import { setTheme } from 'soapbox/actions/theme';
-import { Map as ImmutableMap } from 'immutable';
+import { generateTheme } from 'soapbox/actions/theme';
 
 export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
@@ -77,10 +76,7 @@ class SoapboxMount extends React.PureComponent {
   };
 
   componentDidMount() {
-    this.props.dispatch(setTheme(ImmutableMap({
-      // 'brand-color': '#0482d8',
-      'brand-color': '#1ca82b',
-    })));
+    this.props.dispatch(generateTheme('#1ca82b', 'light'));
   }
 
   render() {
diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index f27de4fd5..8d70d9cdf 100644
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@@ -1,5 +1,6 @@
 import {
-  SET_THEME,
+  THEME_SET,
+  THEME_GENERATE,
 } from '../actions/theme';
 import { Map as ImmutableMap } from 'immutable';
 import { brightness, hue, convert } from 'chromatism';
@@ -11,19 +12,26 @@ const cssrgba = (color, a) => {
   return `rgba(${[r, g, b, a].join(',')})`;
 };
 
-const populate = themeData => {
-  const { 'brand-color': brandColor } = themeData.toObject();
+export const generateTheme = (brandColor, mode) => {
   return ImmutableMap({
+    'brand-color': brandColor,
     'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
     'brand-color-faint': cssrgba(brandColor, 0.1),
     'highlight-text-color': brandColor,
-  }).merge(themeData);
+  });
+};
+
+export const setTheme = themeData => {
+  const { 'brand-color': brandColor } = themeData.toObject();
+  return ImmutableMap(generateTheme(brandColor, 'light')).merge(themeData);
 };
 
 export default function theme(state = initialState, action) {
   switch(action.type) {
-  case SET_THEME:
-    return populate(ImmutableMap(action.themeData));
+  case THEME_GENERATE:
+    return generateTheme(action.brandColor, action.mode);
+  case THEME_SET:
+    return setTheme(ImmutableMap(action.brandColor));
   default:
     return state;
   }
diff --git a/app/styles/soapbox/components/tabs-bar.scss b/app/styles/soapbox/components/tabs-bar.scss
index c97c4afca..9e94bf122 100644
--- a/app/styles/soapbox/components/tabs-bar.scss
+++ b/app/styles/soapbox/components/tabs-bar.scss
@@ -1,9 +1,7 @@
-$nav-ui-background-color: var(--brand-color) !default;
-
 .tabs-bar {
   display: flex;
   box-sizing: border-box;
-  background: $nav-ui-background-color;
+  background: var(--brand-color);
   flex: 0 0 auto;
   overflow-y: auto;
   height: 50px;