1 files changed, 164 insertions, 140 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index b436d92f9..684865124 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -1,159 +1,183 @@
 import color from 'color';
 import { cloneDeep, merge } from 'lodash';
 
-import * as defaultStyles from '../default';
+import makeDefaultThemeConfig from '../default';
 import * as legacyStyles from '../legacy';
 
-export const colorBackground = legacyStyles.darkThemeGrayDarkest;
-export const colorContentBackground = legacyStyles.darkThemeGrayDarkest;
-export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
+export default (brandPrimary: string) => {
+  const defaultStyles = makeDefaultThemeConfig(brandPrimary);
+  let brandPrimaryColor = color(legacyStyles.themeBrandPrimary);
+  try {
+    brandPrimaryColor = color(defaultStyles.brandPrimary);
+  } catch (e) {
+    // Ignore invalid color and fall back to default.
+  }
+
+  const colorBackground = legacyStyles.darkThemeGrayDarkest;
+  const colorText = legacyStyles.darkThemeTextColor;
+  const inputColor = legacyStyles.darkThemeGrayLightest;
+  const inputBackground = legacyStyles.themeGrayDark;
+  const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
+  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
+  const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+  const selectColor = inputColor;
+  const drawerBg = color(colorBackground).lighten(0.3).hex();
+
+  const services = merge({}, defaultStyles.services, {
+    listItems: {
+      borderColor: legacyStyles.darkThemeGrayDarker,
+      hoverBgColor: legacyStyles.darkThemeGrayDarker,
+      disabled: {
+        color: legacyStyles.darkThemeGray,
+      },
+    },
+  });
 
-export const colorHeadline = legacyStyles.darkThemeTextColor;
-export const colorText = legacyStyles.darkThemeTextColor;
+  return {
+    ...defaultStyles,
 
-export const defaultContentBorder = legacyStyles.themeGrayDark;
+    colorBackground,
+    colorContentBackground: legacyStyles.darkThemeGrayDarkest,
+    colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo,
 
-// Loader
-export const colorFullscreenLoaderSpinner = '#FFF';
-export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
+    colorHeadline: legacyStyles.darkThemeTextColor,
+    colorText: legacyStyles.darkThemeTextColor,
 
-// Input
-export const labelColor = legacyStyles.darkThemeTextColor;
-export const inputColor = legacyStyles.darkThemeGrayLightest;
-export const inputBackground = legacyStyles.themeGrayDark;
-export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
-export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
-export const inputPrefixBackground = legacyStyles.darkThemeGray;
-export const inputDisabledOpacity = 0.5;
-export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark;
-export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
-export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex();
+    defaultContentBorder: legacyStyles.themeGrayDark,
 
-// Toggle
-export const toggleBackground = legacyStyles.darkThemeGray;
-export const toggleButton = legacyStyles.darkThemeGrayLighter;
+    // Loader
+    colorFullscreenLoaderSpinner: '#FFF',
+    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(),
 
-// Button
-export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor;
+    // Input
+    labelColor: legacyStyles.darkThemeTextColor,
+    inputColor,
+    inputBackground,
+    inputBorder,
+    inputPrefixColor,
+    inputPrefixBackground: legacyStyles.darkThemeGray,
+    inputDisabledOpacity: 0.5,
+    inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
+    inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(),
+    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(),
 
-export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter;
-export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+    // Toggle
+    toggleBackground: legacyStyles.darkThemeGray,
+    toggleButton: legacyStyles.darkThemeGrayLighter,
 
-export const buttonDangerTextColor = legacyStyles.darkThemeTextColor;
+    // Button
+    buttonPrimaryTextColor: legacyStyles.darkThemeTextColor,
 
-export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
+    buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter,
+    buttonSecondaryTextColor,
 
-export const buttonLoaderColor = {
-  primary: '#FFF',
-  secondary: buttonSecondaryTextColor,
-  success: '#FFF',
-  warning: '#FFF',
-  danger: '#FFF',
-  inverted: defaultStyles.brandPrimary,
-};
+    buttonDangerTextColor: legacyStyles.darkThemeTextColor,
 
-// Select
-export const selectBackground = inputBackground;
-export const selectBorder = inputBorder;
-export const selectColor = inputColor;
-export const selectToggleColor = inputPrefixColor;
-export const selectPopupBackground = legacyStyles.darkThemeGrayLight;
-export const selectOptionColor = '#FFF';
-export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`;
-export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex();
-export const selectOptionItemHoverColor = selectColor;
-export const selectSearchColor = inputBackground;
-
-// Modal
-export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string();
-export const colorModalBackground = legacyStyles.darkThemeGrayDark;
-
-// Services
-export const services = merge({}, defaultStyles.services, {
-  listItems: {
-    borderColor: legacyStyles.darkThemeGrayDarker,
-    hoverBgColor: legacyStyles.darkThemeGrayDarker,
-    disabled: {
-      color: legacyStyles.darkThemeGray,
-    },
-  },
-});
-
-// Service Icon
-export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
-  isCustom: {
-    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
-  },
-});
-
-// Workspaces
-const drawerBg = color(colorBackground).lighten(0.3).hex();
-
-export const workspaces = merge({}, defaultStyles.workspaces, {
-  settings: {
-    listItems: cloneDeep(services.listItems),
-  },
-  drawer: {
-    background: drawerBg,
-    addButton: {
-      color: legacyStyles.darkThemeGrayLighter,
-      hoverColor: legacyStyles.darkThemeGraySmoke,
+    buttonWarningTextColor: legacyStyles.darkThemeTextColor,
+
+    buttonLoaderColor: {
+      primary: '#FFF',
+      secondary: buttonSecondaryTextColor,
+      success: '#FFF',
+      warning: '#FFF',
+      danger: '#FFF',
+      inverted: defaultStyles.brandPrimary,
     },
-    listItem: {
-      border: color(drawerBg).lighten(0.2).hex(),
-      hoverBackground: color(drawerBg).lighten(0.2).hex(),
-      activeBackground: defaultStyles.brandPrimary,
-      name: {
-        color: colorText,
-        activeColor: 'white',
+
+    // Select
+    selectBackground: inputBackground,
+    selectBorder: inputBorder,
+    selectColor,
+    selectToggleColor: inputPrefixColor,
+    selectPopupBackground: legacyStyles.darkThemeGrayLight,
+    selectOptionColor: '#FFF',
+    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`,
+    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(),
+    selectOptionItemHoverColor: selectColor,
+    selectSearchColor: inputBackground,
+
+    // Modal
+    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(),
+    colorModalBackground: legacyStyles.darkThemeGrayDark,
+
+    // Services
+    services,
+
+    // Service Icon
+    serviceIcon: merge({}, defaultStyles.serviceIcon, {
+      isCustom: {
+        border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
       },
-      services: {
-        color: color(colorText).darken(0.5).hex(),
-        active: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
+    }),
+
+    // Workspaces
+    workspaces: merge({}, defaultStyles.workspaces, {
+      settings: {
+        listItems: cloneDeep(services.listItems),
       },
-    },
-  },
-});
-
-// Announcements
-export const announcements = merge({}, defaultStyles.announcements, {
-  spotlight: {
-    background: legacyStyles.darkThemeGrayDark,
-  },
-});
-
-// Signup
-export const signup = merge({}, defaultStyles.signup, {
-  pricing: {
-    feature: {
-      background: legacyStyles.darkThemeGrayLight,
-      border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
-    },
-  },
-});
-
-// Todos
-export const todos = merge({}, defaultStyles.todos, {
-  todosLayer: {
-    borderLeftColor: legacyStyles.darkThemeGrayDarker,
-  },
-  toggleButton: {
-    background: defaultStyles.styleTypes.primary.accent,
-    textColor: defaultStyles.styleTypes.primary.contrast,
-    shadowColor: 'rgba(0, 0, 0, 0.2)',
-  },
-  dragIndicator: {
-    background: legacyStyles.themeGrayLight,
-  },
-});
-
-// TrialStatusBar
-export const trialStatusBar = merge({}, defaultStyles.trialStatusBar, {
-  bar: {
-    background: legacyStyles.darkThemeGray,
-  },
-  progressBar: {
-    background: legacyStyles.darkThemeGrayLighter,
-    progressIndicator: legacyStyles.darkThemeGrayLightest,
-  },
-});
+      drawer: {
+        background: drawerBg,
+        addButton: {
+          color: legacyStyles.darkThemeGrayLighter,
+          hoverColor: legacyStyles.darkThemeGraySmoke,
+        },
+        listItem: {
+          border: color(drawerBg).lighten(0.2).hex(),
+          hoverBackground: color(drawerBg).lighten(0.2).hex(),
+          activeBackground: defaultStyles.brandPrimary,
+          name: {
+            color: colorText,
+            activeColor: 'white',
+          },
+          services: {
+            color: color(colorText).darken(0.5).hex(),
+            active: brandPrimaryColor.lighten(0.5).hex(),
+          },
+        },
+      },
+    }),
+
+    // Announcements
+    announcements: merge({}, defaultStyles.announcements, {
+      spotlight: {
+        background: legacyStyles.darkThemeGrayDark,
+      },
+    }),
+
+    // Signup
+    signup: merge({}, defaultStyles.signup, {
+      pricing: {
+        feature: {
+          background: legacyStyles.darkThemeGrayLight,
+          border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
+        },
+      },
+    }),
+
+    // Todos
+    todos: merge({}, defaultStyles.todos, {
+      todosLayer: {
+        borderLeftColor: legacyStyles.darkThemeGrayDarker,
+      },
+      toggleButton: {
+        background: defaultStyles.styleTypes.primary.accent,
+        textColor: defaultStyles.styleTypes.primary.contrast,
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+    }),
+
+    // TrialStatusBar
+    trialStatusBar: merge({}, defaultStyles.trialStatusBar, {
+      bar: {
+        background: legacyStyles.darkThemeGray,
+      },
+      progressBar: {
+        background: legacyStyles.darkThemeGrayLighter,
+        progressIndicator: legacyStyles.darkThemeGrayLightest,
+      },
+    }),
+  };
+};