diff --git a/packages/insomnia-app/app/plugins/index.js b/packages/insomnia-app/app/plugins/index.js
index 9d3ff6e4b77..9fd3e012460 100644
--- a/packages/insomnia-app/app/plugins/index.js
+++ b/packages/insomnia-app/app/plugins/index.js
@@ -7,6 +7,7 @@ import { PLUGIN_PATH } from '../common/constants';
 import { resolveHomePath } from '../common/misc';
 import { showError } from '../ui/components/modals/index';
 import type { PluginTemplateTag } from '../templating/extensions/index';
+import type { PluginTheme } from './misc';
 
 export type Plugin = {
   name: string,
@@ -31,6 +32,11 @@ export type ResponseHook = {
   hook: Function
 };
 
+export type Theme = {
+  plugin: Plugin,
+  theme: PluginTheme
+};
+
 const CORE_PLUGINS = [
   'insomnia-plugin-base64',
   'insomnia-plugin-hash',
@@ -40,7 +46,8 @@ const CORE_PLUGINS = [
   'insomnia-plugin-prompt',
   'insomnia-plugin-request',
   'insomnia-plugin-response',
-  'insomnia-plugin-jsonpath'
+  'insomnia-plugin-jsonpath',
+  'insomnia-plugin-core-themes'
 ];
 
 let plugins: ?Array<Plugin> = null;
@@ -193,6 +200,16 @@ export async function getResponseHooks(): Promise<Array<ResponseHook>> {
   return functions;
 }
 
+export async function getThemes(): Promise<Array<Theme>> {
+  let extensions = [];
+  for (const plugin of await getPlugins()) {
+    const themes = plugin.module.themes || [];
+    extensions = [...extensions, ...themes.map(theme => ({ plugin, theme }))];
+  }
+
+  return extensions;
+}
+
 function _initPlugin(packageJSON: Object, module: any, path: ?string): Plugin {
   const meta = packageJSON.insomnia || {};
   return {
diff --git a/packages/insomnia-app/app/plugins/misc.js b/packages/insomnia-app/app/plugins/misc.js
new file mode 100644
index 00000000000..0d3e89ebd74
--- /dev/null
+++ b/packages/insomnia-app/app/plugins/misc.js
@@ -0,0 +1,256 @@
+// @flow
+import { render, THROW_ON_ERROR } from '../common/render';
+import { getThemes } from './index';
+
+type ThemeBlock = {
+  background?: {
+    default: string,
+    success?: string,
+    notice?: string,
+    warning?: string,
+    danger?: string,
+    surprise?: string,
+    info?: string
+  },
+  foreground?: {
+    default: string,
+    success?: string,
+    notice?: string,
+    warning?: string,
+    danger?: string,
+    surprise?: string,
+    info?: string
+  },
+  highlight?: {
+    default: string,
+    xxs?: string,
+    xs?: string,
+    sm?: string,
+    md?: string,
+    lg?: string,
+    xl?: string
+  }
+};
+
+type ThemeInner = {
+  ...ThemeBlock,
+  styles: ?{
+    overlay?: ThemeBlock,
+    dropdown?: ThemeBlock,
+    tooltip?: ThemeBlock,
+    sidebar?: ThemeBlock,
+    sidebarHeader?: ThemeBlock,
+    sidebarList?: ThemeBlock,
+    sidebarActions?: ThemeBlock,
+    pane?: ThemeBlock,
+    paneHeader?: ThemeBlock,
+    dialog?: ThemeBlock,
+    dialogHeader?: ThemeBlock,
+    dialogFooter?: ThemeBlock,
+    transparentOverlay?: ThemeBlock,
+    link?: ThemeBlock
+  }
+};
+
+export type PluginTheme = {
+  name: string,
+  displayName: string,
+  theme: ThemeInner
+};
+
+export async function generateThemeCSS(theme: PluginTheme): Promise<string> {
+  const renderedTheme: ThemeInner = await render(
+    theme.theme,
+    theme.theme,
+    null,
+    THROW_ON_ERROR,
+    theme.name
+  );
+  const n = theme.name;
+
+  let css = '';
+  css += wrapStyles(n, '', getThemeBlockCSS(renderedTheme));
+
+  if (renderedTheme.styles) {
+    const styles = renderedTheme.styles;
+
+    // Dropdown Menus
+    css += wrapStyles(
+      n,
+      '.theme--dropdown__menu',
+      getThemeBlockCSS(styles.dialog)
+    );
+    css += wrapStyles(
+      n,
+      '.theme--dropdown__menu',
+      getThemeBlockCSS(styles.dropdown)
+    );
+
+    // Tooltips
+    css += wrapStyles(n, '.theme--tooltip', getThemeBlockCSS(styles.dialog));
+    css += wrapStyles(n, '.theme--tooltip', getThemeBlockCSS(styles.tooltip));
+
+    // Overlay
+    css += wrapStyles(
+      n,
+      '.theme--transparent-overlay',
+      getThemeBlockCSS(styles.transparentOverlay)
+    );
+
+    // Dialogs
+    css += wrapStyles(n, '.theme--dialog', getThemeBlockCSS(styles.dialog));
+    css += wrapStyles(
+      n,
+      '.theme--dialog__header',
+      getThemeBlockCSS(styles.dialogHeader)
+    );
+    css += wrapStyles(
+      n,
+      '.theme--dialog__footer',
+      getThemeBlockCSS(styles.dialogFooter)
+    );
+
+    // Panes
+    css += wrapStyles(n, '.theme--pane', getThemeBlockCSS(styles.pane));
+    css += wrapStyles(
+      n,
+      '.theme--pane__header',
+      getThemeBlockCSS(styles.paneHeader)
+    );
+
+    // Sidebar Styles
+    css += wrapStyles(n, '.theme--sidebar', getThemeBlockCSS(styles.sidebar));
+    css += wrapStyles(
+      n,
+      '.theme--sidebar__list',
+      getThemeBlockCSS(styles.sidebarList)
+    );
+    css += wrapStyles(
+      n,
+      '.theme--sidebar__actions',
+      getThemeBlockCSS(styles.sidebarActions)
+    );
+    css += wrapStyles(
+      n,
+      '.theme--sidebar__header',
+      getThemeBlockCSS(styles.sidebarHeader)
+    );
+
+    // Link
+    css += wrapStyles(n, '.theme--link', getThemeBlockCSS(styles.link));
+
+    // HACK: Dialog styles for CodeMirror dialogs too
+    css += wrapStyles(n, '.CodeMirror-info', getThemeBlockCSS(styles.dialog));
+  }
+
+  return css;
+}
+
+function getThemeBlockCSS(block?: ThemeBlock): string {
+  if (!block) {
+    return '';
+  }
+
+  const indent = '\t';
+
+  let css = '';
+
+  const addVar = (variable?: string, value?: string) => {
+    if (variable && value) {
+      css += `${indent}--${variable}: ${value};\n`;
+    }
+  };
+
+  const addComment = comment => {
+    css += `${indent}/* ${comment} */\n`;
+  };
+
+  const addNewLine = () => {
+    css += `\n`;
+  };
+
+  if (block.background) {
+    const { background } = block;
+    addComment('Background');
+    addVar('color-bg', background.default);
+    addVar('color-success', background.success);
+    addVar('color-notice', background.notice);
+    addVar('color-warning', background.warning);
+    addVar('color-danger', background.danger);
+    addVar('color-surprise', background.surprise);
+    addVar('color-info', background.info);
+    addNewLine();
+  }
+
+  if (block.foreground) {
+    const { foreground } = block;
+    addComment('Foreground');
+    addVar('color-font', foreground.default);
+    addVar('color-font-success', foreground.success);
+    addVar('color-font-notice', foreground.notice);
+    addVar('color-font-warning', foreground.warning);
+    addVar('color-font-danger', foreground.danger);
+    addVar('color-font-surprise', foreground.surprise);
+    addVar('color-font-info', foreground.info);
+    addNewLine();
+  }
+
+  if (block.highlight) {
+    const { highlight } = block;
+    addComment('Highlight');
+    addVar('hl', highlight.default);
+    addVar('hl-xxs', highlight.xxs);
+    addVar('hl-xs', highlight.xs);
+    addVar('hl-sm', highlight.sm);
+    addVar('hl-md', highlight.md);
+    addVar('hl-lg', highlight.lg);
+    addVar('hl-xl', highlight.xl);
+    addNewLine();
+  }
+
+  return css.replace(/\s+$/, '');
+}
+
+function wrapStyles(theme: string, selector: string, styles: string) {
+  if (!styles) {
+    return '';
+  }
+
+  return [
+    `[theme="${theme}"] ${selector}, `,
+    `[subtheme="${theme}"] ${selector ? selector + '--sub' : ''} {`,
+    styles,
+    '}',
+    '',
+    ''
+  ].join('\n');
+}
+
+export async function setThemes() {
+  if (!document) {
+    return;
+  }
+
+  const head = document.head;
+
+  if (!head) {
+    return;
+  }
+
+  const themes = await getThemes();
+
+  for (const theme of themes) {
+    const themeCSS = (await generateThemeCSS(theme.theme)) + '\n';
+
+    let s = document.querySelector(
+      `style[data-theme-name="${theme.theme.name}"]`
+    );
+    if (!s) {
+      s = document.createElement('style');
+      s.setAttribute('data-theme-name', theme.theme.name);
+      head.appendChild(s);
+    }
+
+    s.innerHTML = themeCSS;
+  }
+}
diff --git a/packages/insomnia-app/app/templating/index.js b/packages/insomnia-app/app/templating/index.js
index 8b8bf01156f..ade6c6fb93a 100644
--- a/packages/insomnia-app/app/templating/index.js
+++ b/packages/insomnia-app/app/templating/index.js
@@ -30,7 +30,10 @@ let nunjucksAll = null;
  * @param {Object} [config.path] - Path to include in the error message
  * @param {Object} [config.renderMode] - Only render variables (not tags)
  */
-export function render(text: string, config: Object = {}): Promise<string> {
+export function render(
+  text: string,
+  config: { context?: Object, path?: string, renderMode?: string } = {}
+): Promise<string> {
   const context = config.context || {};
   const path = config.path || null;
   const renderMode = config.renderMode || RENDER_ALL;
diff --git a/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js b/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js
index e3491434711..056c3960179 100644
--- a/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js
+++ b/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js
@@ -242,6 +242,8 @@ class Dropdown extends PureComponent {
     if (!container) {
       container = document.createElement('div');
       container.id = 'dropdowns-container';
+      container.style.zIndex = '1000000';
+      container.style.position = 'relative';
       document.body.appendChild(container);
     }
 
@@ -382,7 +384,7 @@ class Dropdown extends PureComponent {
       finalChildren = [
         dropdownButtons[0],
         <div key="item" className={menuClasses} ref={this._addDropdownMenuRef}>
-          <div className="dropdown__backdrop theme--overlay" />
+          <div className="dropdown__backdrop theme--transparent-overlay" />
           <div
             key={uniquenessKey}
             ref={this._addDropdownListRef}
diff --git a/packages/insomnia-app/app/ui/components/base/link.js b/packages/insomnia-app/app/ui/components/base/link.js
index ce7fea8d2d3..e2e722cffa5 100644
--- a/packages/insomnia-app/app/ui/components/base/link.js
+++ b/packages/insomnia-app/app/ui/components/base/link.js
@@ -41,7 +41,7 @@ class Link extends React.PureComponent<Props> {
       <a
         href={href}
         onClick={this._handleClick}
-        className={className}
+        className={(className || '') + ' theme--link'}
         {...other}>
         {children}
       </a>
diff --git a/packages/insomnia-app/app/ui/components/base/modal-body.js b/packages/insomnia-app/app/ui/components/base/modal-body.js
index 55b94284b20..859cbbaa1d7 100644
--- a/packages/insomnia-app/app/ui/components/base/modal-body.js
+++ b/packages/insomnia-app/app/ui/components/base/modal-body.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 class ModalBody extends PureComponent {
   render() {
     const { className, children, noScroll, ...props } = this.props;
-    const classes = classnames(className, 'modal__body', {
+    const classes = classnames(className, 'modal__body theme--dialog__body', {
       'modal__body--no-scroll': noScroll
     });
 
diff --git a/packages/insomnia-app/app/ui/components/base/modal-footer.js b/packages/insomnia-app/app/ui/components/base/modal-footer.js
index 7728dc895f9..ccc6c44e194 100644
--- a/packages/insomnia-app/app/ui/components/base/modal-footer.js
+++ b/packages/insomnia-app/app/ui/components/base/modal-footer.js
@@ -6,7 +6,13 @@ class ModalFooter extends PureComponent {
   render() {
     const { children, className } = this.props;
     return (
-      <div className={classnames('modal__footer', className)}>{children}</div>
+      <div
+        className={classnames(
+          'modal__footer theme--dialog__footer',
+          className
+        )}>
+        {children}
+      </div>
     );
   }
 }
diff --git a/packages/insomnia-app/app/ui/components/base/modal-header.js b/packages/insomnia-app/app/ui/components/base/modal-header.js
index 4b99ba5d796..1ef310ca42f 100644
--- a/packages/insomnia-app/app/ui/components/base/modal-header.js
+++ b/packages/insomnia-app/app/ui/components/base/modal-header.js
@@ -19,7 +19,11 @@ class ModalHeader extends PureComponent {
     }
 
     return (
-      <div className={classnames('modal__header', className)}>
+      <div
+        className={classnames(
+          'modal__header theme--dialog__header',
+          className
+        )}>
         <div className="modal__header__children">{children}</div>
         {closeButton}
       </div>
diff --git a/packages/insomnia-app/app/ui/components/base/modal.js b/packages/insomnia-app/app/ui/components/base/modal.js
index 42c203418bc..f3cbb25d9b2 100644
--- a/packages/insomnia-app/app/ui/components/base/modal.js
+++ b/packages/insomnia-app/app/ui/components/base/modal.js
@@ -121,6 +121,7 @@ class Modal extends PureComponent {
 
     const classes = classnames(
       'modal',
+      'theme--dialog',
       className,
       { 'modal--fixed-height': tall },
       { 'modal--noescape': noEscape },
@@ -141,7 +142,7 @@ class Modal extends PureComponent {
           style={styles}
           onClick={this._handleClick}>
           <div
-            className="modal__backdrop overlay theme--overlay"
+            className="modal__backdrop overlay theme--transparent-overlay"
             data-close-modal
           />
           <div className="modal__content__wrapper">
diff --git a/packages/insomnia-app/app/ui/components/modals/settings-modal.js b/packages/insomnia-app/app/ui/components/modals/settings-modal.js
index dbe27fb66bd..f3c82be77b0 100644
--- a/packages/insomnia-app/app/ui/components/modals/settings-modal.js
+++ b/packages/insomnia-app/app/ui/components/modals/settings-modal.js
@@ -57,7 +57,7 @@ class SettingsModal extends PureComponent {
     this.modal.hide();
   }
 
-  _handleChangeTheme(theme, persist = true) {
+  async _handleChangeTheme(theme, persist = true) {
     document.body.setAttribute('theme', theme);
 
     if (persist) {
diff --git a/packages/insomnia-app/app/ui/components/request-pane.js b/packages/insomnia-app/app/ui/components/request-pane.js
index 4dae5de2a67..775acfd6c45 100644
--- a/packages/insomnia-app/app/ui/components/request-pane.js
+++ b/packages/insomnia-app/app/ui/components/request-pane.js
@@ -174,11 +174,15 @@ class RequestPane extends React.PureComponent<Props> {
       updateSettingsShowPasswords
     } = this.props;
 
+    const paneClasses = 'request-pane theme--pane pane';
+    const paneHeaderClasses = 'pane__header theme--pane__header';
+    const paneBodyClasses = 'pane__body theme--pane__body';
+
     if (!request) {
       return (
-        <section className="request-pane pane">
-          <header className="pane__header" />
-          <div className="pane__body pane__body--placeholder">
+        <section className={paneClasses}>
+          <header className={paneHeaderClasses} />
+          <div className={paneBodyClasses + ' pane__body--placeholder'}>
             <div>
               <table className="table--fancy">
                 <tbody>
@@ -239,8 +243,8 @@ class RequestPane extends React.PureComponent<Props> {
     const uniqueKey = `${forceRefreshCounter}::${request._id}`;
 
     return (
-      <section className="pane request-pane">
-        <header className="pane__header">
+      <section className={paneClasses}>
+        <header className={paneHeaderClasses}>
           <ErrorBoundary errorClassName="font-error pad text-center">
             <RequestUrlBar
               uniquenessKey={uniqueKey}
@@ -260,7 +264,7 @@ class RequestPane extends React.PureComponent<Props> {
             />
           </ErrorBoundary>
         </header>
-        <Tabs className="react-tabs pane__body" forceRenderTabPanel>
+        <Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
           <TabList>
             <Tab>
               <ContentTypeDropdown
diff --git a/packages/insomnia-app/app/ui/components/response-pane.js b/packages/insomnia-app/app/ui/components/response-pane.js
index fd093595318..efc205e13a3 100644
--- a/packages/insomnia-app/app/ui/components/response-pane.js
+++ b/packages/insomnia-app/app/ui/components/response-pane.js
@@ -158,20 +158,24 @@ class ResponsePane extends React.PureComponent<Props> {
       showCookiesModal
     } = this.props;
 
+    const paneClasses = 'response-pane theme--pane pane';
+    const paneHeaderClasses = 'pane__header theme--pane__header';
+    const paneBodyClasses = 'pane__body theme--pane__body';
+
     if (!request) {
       return (
-        <section className="response-pane pane">
-          <header className="pane__header" />
-          <div className="pane__body pane__body--placeholder" />
+        <section className={paneClasses}>
+          <header className={paneHeaderClasses} />
+          <div className={paneBodyClasses + ' pane__body--placeholder'} />
         </section>
       );
     }
 
     if (!response) {
       return (
-        <section className="response-pane pane">
-          <header className="pane__header" />
-          <div className="pane__body pane__body--placeholder">
+        <section className={paneClasses}>
+          <header className={paneHeaderClasses} />
+          <div className={paneBodyClasses + ' pane__body--placeholder'}>
             <div>
               <table className="table--fancy">
                 <tbody>
@@ -223,9 +227,9 @@ class ResponsePane extends React.PureComponent<Props> {
     const cookieHeaders = getSetCookieHeaders(response.headers);
 
     return (
-      <section className="response-pane pane">
+      <section className={paneClasses}>
         {!response ? null : (
-          <header className="pane__header row-spaced">
+          <header className={paneHeaderClasses + ' row-spaced'}>
             <div className="no-wrap scrollable scrollable--no-bars pad-left">
               <StatusTag
                 statusCode={response.statusCode}
@@ -250,7 +254,7 @@ class ResponsePane extends React.PureComponent<Props> {
             />
           </header>
         )}
-        <Tabs className="react-tabs pane__body" forceRenderTabPanel>
+        <Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
           <TabList>
             <Tab>
               <PreviewModeDropdown
diff --git a/packages/insomnia-app/app/ui/components/response-timer.js b/packages/insomnia-app/app/ui/components/response-timer.js
index 0e1714b0b8f..056081852cc 100644
--- a/packages/insomnia-app/app/ui/components/response-timer.js
+++ b/packages/insomnia-app/app/ui/components/response-timer.js
@@ -46,7 +46,7 @@ class ResponseTimer extends PureComponent {
 
     return (
       <div
-        className={classnames('overlay theme--overlay', {
+        className={classnames('overlay theme--transparent-overlay', {
           'overlay--hidden': !show
         })}>
         {elapsedTime >= REQUEST_TIME_TO_SHOW_COUNTER ? (
diff --git a/packages/insomnia-app/app/ui/components/settings/account.js b/packages/insomnia-app/app/ui/components/settings/account.js
index 0c52cc70c95..19c02d7a5c5 100644
--- a/packages/insomnia-app/app/ui/components/settings/account.js
+++ b/packages/insomnia-app/app/ui/components/settings/account.js
@@ -48,7 +48,7 @@ class Account extends PureComponent {
         </div>
         <p>
           Or{' '}
-          <a href="#" onClick={this._handleLogin}>
+          <a href="#" onClick={this._handleLogin} className="theme--link">
             Login
           </a>
         </p>
diff --git a/packages/insomnia-app/app/ui/components/settings/plugins.js b/packages/insomnia-app/app/ui/components/settings/plugins.js
index f258a236dd9..f8b94673e8c 100644
--- a/packages/insomnia-app/app/ui/components/settings/plugins.js
+++ b/packages/insomnia-app/app/ui/components/settings/plugins.js
@@ -62,7 +62,7 @@ class Plugins extends React.PureComponent<void, State> {
     this.setState(newState);
   }
 
-  _handleOpenDirectory(directory: string): void {
+  static _handleOpenDirectory(directory: string): void {
     electron.remote.shell.showItemInFolder(directory);
   }
 
@@ -88,7 +88,7 @@ class Plugins extends React.PureComponent<void, State> {
     await this._handleRefreshPlugins();
   }
 
-  _handleClickShowPluginsFolder() {
+  static _handleClickShowPluginsFolder() {
     electron.remote.shell.showItemInFolder(PLUGIN_PATH);
   }
 
@@ -152,7 +152,7 @@ class Plugins extends React.PureComponent<void, State> {
                         </CopyButton>{' '}
                         <Button
                           className="btn btn--outlined btn--super-duper-compact"
-                          onClick={this._handleOpenDirectory}
+                          onClick={Plugins._handleOpenDirectory}
                           value={plugin.directory}>
                           Show Folder
                         </Button>
@@ -204,7 +204,7 @@ class Plugins extends React.PureComponent<void, State> {
           <button
             type="button"
             className="btn btn--clicky"
-            onClick={this._handleClickShowPluginsFolder}>
+            onClick={Plugins._handleClickShowPluginsFolder}>
             Show Plugins Folder
           </button>
           <button
diff --git a/packages/insomnia-app/app/ui/components/settings/theme.js b/packages/insomnia-app/app/ui/components/settings/theme.js
index e477ebdaa79..ed8ab9bce75 100644
--- a/packages/insomnia-app/app/ui/components/settings/theme.js
+++ b/packages/insomnia-app/app/ui/components/settings/theme.js
@@ -1,61 +1,180 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import Button from '../base/button';
+import type { Theme as ThemeType } from '../../../plugins';
+import { getThemes } from '../../../plugins';
 
-import imgLight from '../../images/light.png';
-import imgDark from '../../images/dark.png';
-import imgDefault from '../../images/default.png';
-import imgSolarizedLight from '../../images/solarized-light.png';
-import imgSolarizedDark from '../../images/solarized-dark.png';
-import imgSolarized from '../../images/solarized.png';
-import imgRailscasts from '../../images/railscasts.png';
-import imgPurple from '../../images/purple.png';
-import imgMaterial from '../../images/material.png';
-
-const THEMES_PER_ROW = 3;
-const THEMES = [
-  { key: 'default', name: 'Insomnia', img: imgDefault },
-  { key: 'light', name: 'Simple Light', img: imgLight },
-  { key: 'dark', name: 'Simple Dark', img: imgDark },
-  { key: 'purple', name: 'Purple', img: imgPurple },
-  { key: 'material', name: 'Material', img: imgMaterial },
-  { key: 'solarized', name: 'Solarized', img: imgSolarized },
-  { key: 'solarized-light', name: 'Solarized Light', img: imgSolarizedLight },
-  { key: 'solarized-dark', name: 'Solarized Dark', img: imgSolarizedDark },
-  { key: 'railscasts', name: 'Railscasts', img: imgRailscasts },
-  { key: 'one-dark', name: 'One Dark', img: imgRailscasts },
-  { key: 'one-light', name: 'One Light', img: imgRailscasts }
-];
+const THEMES_PER_ROW = 4;
+
+type Props = {
+  handleChangeTheme: string => void,
+  activeTheme: string
+};
+
+type State = {
+  themes: Array<ThemeType>
+};
 
 @autobind
-class Theme extends PureComponent {
-  renderTheme(theme) {
+class Theme extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      themes: []
+    };
+  }
+
+  componentDidMount() {
+    this._loadThemes();
+  }
+
+  async _loadThemes() {
+    const themes = await getThemes();
+    this.setState({ themes });
+  }
+
+  renderTheme(theme: ThemeType) {
     const { handleChangeTheme, activeTheme } = this.props;
-    const isActive = activeTheme === theme.key;
+    const isActive = activeTheme === theme.theme.name;
 
     return (
       <div
-        key={theme.key}
+        key={theme.theme.name}
         className="themes__theme"
         style={{ maxWidth: `${100 / THEMES_PER_ROW}%` }}>
-        <h2 className="txt-lg">
-          {theme.name}{' '}
-          {isActive ? (
-            <span className="no-margin-top faint italic txt-md">(Active)</span>
-          ) : null}
-        </h2>
-        <Button onClick={handleChangeTheme} value={theme.key}>
-          <img src={theme.img} alt={theme.name} style={{ maxWidth: '100%' }} />
+        <h2 className="txt-lg">{theme.theme.displayName}</h2>
+        <Button
+          onClick={handleChangeTheme}
+          value={theme.theme.name}
+          className={isActive ? 'active' : ''}>
+          <svg width="100%" height="100%" viewBox="0 0 500 300">
+            <g subtheme={theme.theme.name}>
+              {/* Panes */}
+              <g className="theme--pane--sub">
+                <rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  className="bg-fill"
+                />
+                <rect
+                  x="25%"
+                  y="0"
+                  width="100%"
+                  height="10%"
+                  className="theme--pane__header--sub bg-fill"
+                />
+              </g>
+
+              {/* Sidebar */}
+              <g className="theme--sidebar--sub">
+                <rect
+                  x="0"
+                  y="0"
+                  width="25%"
+                  height="100%"
+                  className="bg-fill"
+                />
+                <rect
+                  x="0"
+                  y="0"
+                  width="25%"
+                  height="10%"
+                  className="theme--sidebar__header--sub bg-fill"
+                />
+              </g>
+
+              {/* Lines */}
+              <line
+                x1="25%"
+                x2="100%"
+                y1="10%"
+                y2="10%"
+                strokeWidth="1"
+                className="hl-stroke"
+              />
+              <line
+                x1="62%"
+                x2="62%"
+                y1="0"
+                y2="100%"
+                strokeWidth="1"
+                className="hl-stroke"
+              />
+              <line
+                x1="25%"
+                x2="25%"
+                y1="0"
+                y2="100%"
+                strokeWidth="1"
+                className="hl-stroke"
+              />
+              <line
+                x1="0"
+                x2="25%"
+                y1="10%"
+                y2="10%"
+                strokeWidth="1"
+                className="hl-stroke"
+              />
+
+              {/* Colors */}
+              <rect
+                x="40%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="success-fill"
+              />
+              <rect
+                x="50%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="info-fill"
+              />
+              <rect
+                x="60%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="warning-fill"
+              />
+              <rect
+                x="70%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="danger-fill"
+              />
+              <rect
+                x="80%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="surprise-fill"
+              />
+              <rect
+                x="90%"
+                y="85%"
+                width="5%"
+                height="8%"
+                className="info-fill"
+              />
+            </g>
+          </svg>
         </Button>
       </div>
     );
   }
 
-  renderThemeRows(themes) {
+  renderThemeRows() {
+    const { themes } = this.state;
+
     const rows = [];
     let row = [];
-
     for (const theme of themes) {
       row.push(theme);
       if (row.length === THEMES_PER_ROW) {
@@ -77,13 +196,8 @@ class Theme extends PureComponent {
   }
 
   render() {
-    return <div className="themes pad-top">{this.renderThemeRows(THEMES)}</div>;
+    return <div className="themes pad-top">{this.renderThemeRows()}</div>;
   }
 }
 
-Theme.propTypes = {
-  handleChangeTheme: PropTypes.func.isRequired,
-  activeTheme: PropTypes.string.isRequired
-};
-
 export default Theme;
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar-children.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar-children.js
index fff4cb85b21..2520ca3040d 100644
--- a/packages/insomnia-app/app/ui/components/sidebar/sidebar-children.js
+++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar-children.js
@@ -123,7 +123,7 @@ class SidebarChildren extends React.PureComponent<Props> {
     const { childObjects } = this.props;
 
     return (
-      <ul className="sidebar__list sidebar__list-root">
+      <ul className="sidebar__list sidebar__list-root theme--sidebar__list">
         {this._renderChildren(childObjects)}
       </ul>
     );
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js
index 2f676f870c5..612fa881316 100644
--- a/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js
+++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js
@@ -62,7 +62,7 @@ class SidebarFilter extends React.PureComponent<Props> {
     const { filter } = this.props;
     return (
       <KeydownBinder onKeydown={this._handleKeydown}>
-        <div className="sidebar__filter">
+        <div className="sidebar__filter theme--sidebar__actions">
           <div className="form-control form-control--outlined form-control--btn-right">
             <input
               ref={this._setInputRef}
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
index c9f55edf96e..fc77eda588c 100644
--- a/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
+++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
@@ -62,13 +62,13 @@ class Sidebar extends PureComponent {
 
     return (
       <aside
-        className={classnames('sidebar', {
+        className={classnames('sidebar', 'theme--sidebar', {
           'sidebar--hidden': hidden,
           'sidebar--skinny': width < SIDEBAR_SKINNY_REMS,
           'sidebar--collapsed': width < COLLAPSE_SIDEBAR_REMS
         })}>
         <WorkspaceDropdown
-          className="sidebar__header"
+          className="sidebar__header theme--sidebar__header"
           activeWorkspace={workspace}
           workspaces={workspaces}
           unseenWorkspaces={unseenWorkspaces}
diff --git a/packages/insomnia-app/app/ui/components/tooltip.js b/packages/insomnia-app/app/ui/components/tooltip.js
index 7a9c0c837cd..2396a6d452c 100644
--- a/packages/insomnia-app/app/ui/components/tooltip.js
+++ b/packages/insomnia-app/app/ui/components/tooltip.js
@@ -126,6 +126,8 @@ class Tooltip extends React.PureComponent<Props, State> {
     if (!container) {
       container = document.createElement('div');
       container.id = 'tooltips-container';
+      container.style.zIndex = '1000000';
+      container.style.position = 'relative';
 
       document.body && document.body.appendChild(container);
     }
@@ -154,7 +156,7 @@ class Tooltip extends React.PureComponent<Props, State> {
     const { visible } = this.state;
 
     const tooltipClasses = classnames(className, 'tooltip');
-    const bubbleClasses = classnames('tooltip__bubble', {
+    const bubbleClasses = classnames('tooltip__bubble theme--tooltip', {
       'tooltip__bubble--visible': visible
     });
 
diff --git a/packages/insomnia-app/app/ui/containers/app.js b/packages/insomnia-app/app/ui/containers/app.js
index baeb5e06c99..1b01f2258c8 100644
--- a/packages/insomnia-app/app/ui/containers/app.js
+++ b/packages/insomnia-app/app/ui/containers/app.js
@@ -68,6 +68,7 @@ import * as templating from '../../templating/index';
 import AskModal from '../components/modals/ask-modal';
 import { updateMimeType } from '../../models/request';
 import MoveRequestGroupModal from '../components/modals/move-request-group-modal';
+import * as themes from '../../plugins/misc';
 
 @autobind
 class App extends PureComponent {
@@ -840,6 +841,7 @@ class App extends PureComponent {
     ipcRenderer.on('reload-plugins', async () => {
       await plugins.getPlugins(true);
       templating.reload();
+      themes.setThemes();
       console.log('[plugins] reloaded');
     });
 
diff --git a/packages/insomnia-app/app/ui/css/components/dropdown.less b/packages/insomnia-app/app/ui/css/components/dropdown.less
index 6eb45b368ff..62fe5f716d5 100644
--- a/packages/insomnia-app/app/ui/css/components/dropdown.less
+++ b/packages/insomnia-app/app/ui/css/components/dropdown.less
@@ -11,7 +11,6 @@
   &:focus {
     outline: none;
   }
-
 }
 
 .dropdown__backdrop {
@@ -26,6 +25,8 @@
 }
 
 .dropdown__menu {
+  opacity: 0.96;
+
   &.dropdown__menu--open .dropdown__backdrop {
     display: block;
   }
@@ -165,4 +166,3 @@
     animation: fadeIn 200ms ease-out;
   }
 }
-
diff --git a/packages/insomnia-app/app/ui/css/components/sidebar.less b/packages/insomnia-app/app/ui/css/components/sidebar.less
index 380477afa18..a6ec199cd08 100644
--- a/packages/insomnia-app/app/ui/css/components/sidebar.less
+++ b/packages/insomnia-app/app/ui/css/components/sidebar.less
@@ -44,7 +44,8 @@
     h1 {
       margin: 0;
     }
-    h1, h1 * {
+    h1,
+    h1 * {
       font-size: @font-size-xl;
     }
   }
@@ -167,7 +168,6 @@
 
   .sidebar__list-root {
     // Add some space above so it's not so squished
-    border-top: 1px solid @hl-sm;
     padding-top: @padding-xxs;
     padding-bottom: @padding-md;
     box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.03);
@@ -208,8 +208,8 @@
       right: 0;
       left: 0;
       border-bottom: 2px dotted var(--color-surprise);
-      content: " ";
-      display: block
+      content: ' ';
+      display: block;
     }
   }
 
@@ -299,19 +299,41 @@
     padding-left: @padding-sm + @padding-md * 2;
   }
 
-  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
+  .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__clickable {
     padding-left: @padding-sm + @padding-md * 3;
   }
 
-  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
+  .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__clickable {
     padding-left: @padding-sm + @padding-md * 4;
   }
 
-  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
+  .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__clickable {
     padding-left: @padding-sm + @padding-md * 5;
   }
 
-  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
+  .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__list
+    .sidebar__clickable {
     padding-left: @padding-sm + @padding-md * 6;
   }
 
diff --git a/packages/insomnia-app/app/ui/css/components/themes.less b/packages/insomnia-app/app/ui/css/components/themes.less
index db709a9d869..658565d4c13 100644
--- a/packages/insomnia-app/app/ui/css/components/themes.less
+++ b/packages/insomnia-app/app/ui/css/components/themes.less
@@ -2,10 +2,12 @@
 @import '../constants/colors';
 
 .themes {
+  padding-top: @padding-lg;
+
   .themes__row {
     display: flex;
     flex-direction: row;
-    margin-bottom: @padding-lg;
+    margin-bottom: @padding-md;
   }
 
   .themes__theme {
@@ -13,21 +15,68 @@
 
     h2 {
       margin-top: 0;
+      margin-bottom: @padding-xs;
+      font-size: @font-size-md !important;
+    }
+
+    svg {
+      .bg-fill {
+        fill: var(--color-bg);
+      }
+
+      .success-fill {
+        fill: var(--color-success);
+      }
+
+      .notice-fill {
+        fill: var(--color-notice);
+      }
+
+      .warning-fill {
+        fill: var(--color-warning);
+      }
+
+      .danger-fill {
+        fill: var(--color-danger);
+      }
+
+      .surprise-fill {
+        fill: var(--color-surprise);
+      }
+
+      .info-fill {
+        fill: var(--color-info);
+      }
+
+      .fg-fill {
+        fill: var(--color-fg);
+      }
+
+      .hl-stroke {
+        stroke: var(--hl-md);
+      }
     }
   }
 
   button {
     position: relative;
     margin: 0 @padding-md;
+    font-size: 0;
+    border-radius: @radius-md;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+
+    &.active {
+      border: @padding-xs solid var(--color-surprise);
+    }
 
-    img {
-      border: 1px solid @hl-md;
-      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
-      border-radius: @radius-md;
+    &:hover {
+      transform: scale(1.05);
     }
 
-    &.themes__theme--locked {
-      opacity: 1;
+    &:active {
+      transform: scale(1.1);
+      transition: all 50ms ease-out;
     }
 
     &::after {
@@ -46,29 +95,5 @@
       bottom: 0;
       visibility: hidden;
     }
-
-    &.themes__theme--locked::after {
-      content: '\01f512';
-      font-size: 2rem;
-      opacity: 0.5;
-      visibility: visible;
-    }
-
-    &:not(.themes__theme--locked):hover::after {
-      content: 'Activate';
-      visibility: visible;
-      transform: rotate(-15deg);
-      mix-blend-mode: exclusion;
-      opacity: 1;
-    }
-
-    &.themes__theme--locked:hover::after {
-      content: 'Upgrade to Plus';
-      visibility: visible;
-      font-size: @font-size-md;
-      transform: rotate(-15deg);
-      mix-blend-mode: exclusion;
-      opacity: 1;
-    }
   }
 }
diff --git a/packages/insomnia-app/app/ui/css/constants/colors.less b/packages/insomnia-app/app/ui/css/constants/colors.less
index d8f5debff12..e3c0eb2cb30 100644
--- a/packages/insomnia-app/app/ui/css/constants/colors.less
+++ b/packages/insomnia-app/app/ui/css/constants/colors.less
@@ -1,252 +1,5 @@
-body {
-  // Default Pretty Background Colors
-  --color-success: #59a210;
-  --color-notice: #ae9602;
-  --color-warning: #d07502;
-  --color-danger: #d04444;
-  --color-surprise: #7d69cb;
-  --color-info: #1c90b4;
-  --color-boring: #333;
-
-  // Default Pretty Foreground Colors
-  --color-font-success: #fff;
-  --color-font-notice: #fff;
-  --color-font-warning: #fff;
-  --color-font-danger: #fff;
-  --color-font-surprise: #fff;
-  --color-font-info: #fff;
-
-  --hl-xxs: rgba(140, 140, 140, 0.05);
-  --hl-xs: rgba(140, 140, 140, 0.1);
-  --hl-sm: rgba(140, 140, 140, 0.2);
-  --hl-md: rgba(140, 140, 140, 0.3);
-  --hl-lg: rgba(140, 140, 140, 0.5);
-  --hl-xl: rgba(140, 140, 140, 0.8);
-  --hl: rgba(140, 140, 140, 1);
-
-  // Default Colors
-  --color-bg: #fff;
-  --color-font: #555;
-
-  .theme--overlay {
-    --color-bg: rgba(30, 30, 30, 0.8);
-    --color-font: #ddd;
-  }
-}
-
-*[theme='default'] {
-  --hl-xxs: rgba(130, 130, 130, 0.05);
-  --hl-xs: rgba(130, 130, 130, 0.1);
-  --hl-sm: rgba(130, 130, 130, 0.2);
-  --hl-md: rgba(130, 130, 130, 0.3);
-  --hl-lg: rgba(130, 130, 130, 0.5);
-  --hl-xl: rgba(130, 130, 130, 0.8);
-  --hl: rgba(130, 130, 130, 1);
-
-  --color-success: #59a210;
-  --color-notice: #ae9602;
-  --color-warning: #d07502;
-  --color-danger: #d04444;
-  --color-surprise: #7461bd;
-  --color-info: #1c90b4;
-
-  .sidebar,
-  .pane__body {
-    --color-success: #8ccf3b;
-    --color-notice: #ead950;
-    --color-warning: #ff9a1f;
-    --color-danger: #ff5d4b;
-    --color-surprise: #a896ff;
-    --color-info: #46c1e6;
-  }
-
-  // Make the tags a little lighter
-  .pane__header .tag {
-    --color-font: #666;
-    --color-success: #75ba24;
-    --color-notice: #d8c84d;
-    --color-warning: #ec8702;
-    --color-danger: #ee5655;
-    --color-surprise: #a590ff;
-    --color-info: #22c1ee;
-  }
-
-  .sidebar__header {
-    --color-bg: #695eb8;
-    --color-font: #fff;
-  }
-
-  .pane__header,
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .modal {
-    --color-bg: #fff;
-    --color-font: #555;
-  }
-
-  .modal__header {
-    --color-bg: #eff0ed;
-    --color-font: #444;
-  }
-
-  .sidebar {
-    --color-bg: #2e2f2b;
-    --color-font: #e0e0e0;
-    --hl: #999;
-  }
-
-  .request-pane,
-  .response-pane {
-    --color-bg: #282925;
-    --color-font: #ddd;
-  }
-}
-
-*[theme='one-dark'] {
-  --hl-xxs: rgba(114, 121, 133, 0.05);
-  --hl-xs: rgba(114, 121, 133, 0.1);
-  --hl-sm: rgba(114, 121, 133, 0.2);
-  --hl-md: rgba(114, 121, 133, 0.3);
-  --hl-lg: rgba(114, 121, 133, 0.5);
-  --hl-xl: rgba(114, 121, 133, 0.8);
-  --hl: rgba(114, 121, 133, 1);
-
-  --color-success: #98c379;
-  --color-notice: #d19a66;
-  --color-warning: #d19a66;
-  --color-danger: #e06c75;
-  --color-surprise: #c678dd;
-  --color-info: #56b6c2;
-
-  .sidebar,
-  .pane__body {
-    --color-success: #98c379;
-    --color-notice: #d19a66;
-    --color-warning: #d19a66;
-    --color-danger: #e06c75;
-    --color-surprise: #c678dd;
-    --color-info: #56b6c2;
-  }
-
-  // Make the tags a little lighter
-  .pane__header .tag {
-    --color-font: #bbbbbb;
-    --color-success: #98c379;
-    --color-notice: #d19a66;
-    --color-warning: #d19a66;
-    --color-danger: #e06c75;
-    --color-surprise: #c678dd;
-    --color-info: #56b6c2;
-  }
-
-  .sidebar__header {
-    --color-bg: #20252c;
-    --color-font: #bbbbbb;
-  }
-
-  .pane__header,
-  .theme--dropdown__menu,
-  .CodeMirror-info {
-    --color-bg: #272c35;
-    --color-font: #bbbbbb;
-  }
-
-  .modal {
-    --color-bg: #272c35;
-    --color-font: #bbbbbb;
-  }
-
-  .modal__header {
-    --color-bg: #272c35;
-    --color-font: #bbbbbb;
-  }
-
-  .sidebar {
-    --color-bg: #20252c;
-    --color-font: #bbbbbb;
-    --hl: #bbbbbb;
-  }
-
-  .request-pane,
-  .response-pane {
-    --color-bg: #272c35;
-    --color-font: #bbbbbb;
-  }
-}
-
-*[theme='one-light'] {
-  --hl-xxs: rgba(130, 130, 130, 0.05);
-  --hl-xs: rgba(130, 130, 130, 0.1);
-  --hl-sm: rgba(130, 130, 130, 0.2);
-  --hl-md: rgba(130, 130, 130, 0.3);
-  --hl-lg: rgba(130, 130, 130, 0.5);
-  --hl-xl: rgba(130, 130, 130, 0.8);
-  --hl: rgba(130, 130, 130, 1);
-
-  --color-success: #50a14f;
-  --color-notice: #c18401;
-  --color-warning: #c18401;
-  --color-danger: #e45649;
-  --color-surprise: #a626a4;
-  --color-info: #0184bc;
-
-  .sidebar,
-  .pane__body {
-    --color-success: #50a14f;
-    --color-notice: #c18401;
-    --color-warning: #c18401;
-    --color-danger: #e45649;
-    --color-surprise: #a626a4;
-    --color-info: #0184bc;
-  }
-
-  // Make the tags a little lighter
-  .pane__header .tag {
-    --color-font: #777777;
-    --color-success: #50a14f;
-    --color-notice: #c18401;
-    --color-warning: #c18401;
-    --color-danger: #e45649;
-    --color-surprise: #a626a4;
-    --color-info: #0184bc;
-  }
-
-  .sidebar__header {
-    --color-bg: #eaeaeb;
-    --color-font: #777777;
-  }
-
-  .pane__header,
-  .theme--dropdown__menu,
-  .CodeMirror-info {
-    --color-bg: #fafafa;
-    --color-font: #777777;
-  }
-
-  .modal {
-    --color-bg: #fafafa;
-    --color-font: #777777;
-  }
-
-  .modal__header {
-    --color-bg: #fafafa;
-    --color-font: #777777;
-  }
-
-  .sidebar {
-    --color-bg: #eaeaeb;
-    --color-font: #777777;
-    --hl: #777777;
-  }
-
-  .request-pane,
-  .response-pane {
-    --color-bg: #fafafa;
-    --color-font: #777777;
-  }
-}
-
-*[theme='purple'] {
+*[theme],
+*[subtheme] {
   --color-bg: #fff;
   --color-font: #555;
 
@@ -257,133 +10,12 @@ body {
   --color-surprise: #8570d2;
   --color-info: #0092bf;
 
-  // Light Parts
-  .request-pane,
-  .response-pane,
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .modal {
-    --hl-xxs: rgba(130, 130, 130, 0.05);
-    --hl-xs: rgba(130, 130, 130, 0.1);
-    --hl-sm: rgba(130, 130, 130, 0.2);
-    --hl-md: rgba(130, 130, 130, 0.3);
-    --hl-lg: rgba(130, 130, 130, 0.5);
-    --hl-xl: rgba(130, 130, 130, 0.8);
-    --hl: rgba(130, 130, 130, 1);
-  }
-
-  .request-pane .pane__body,
-  .request-pane .pane__header {
-    border-left: 0;
-  }
-
-  .sidebar {
-    --color-success: #a9ea6e;
-    --color-notice: #ffdb02;
-    --color-warning: #ffac49;
-    --color-danger: #ff7472;
-    --color-surprise: #c5bbff;
-    --color-info: #75ddff;
-
-    --color-bg: #695eb8;
-    --color-font: #fff;
-
-    --hl-xxs: rgba(207, 190, 255, 0.05);
-    --hl-xs: rgba(207, 190, 255, 0.1);
-    --hl-sm: rgba(207, 190, 255, 0.2);
-    --hl-md: rgba(207, 190, 255, 0.3);
-    --hl-lg: rgba(207, 190, 255, 0.5);
-    --hl-xl: rgba(207, 190, 255, 0.8);
-    --hl: rgb(217, 204, 255);
-  }
-
-  .tag {
-    --hl: rgb(102, 99, 112);
-    --hl-sm: rgba(240, 235, 255, 0.3);
-  }
-
-  .sidebar__header {
-    --color-font: #eee;
-  }
-
-  .pane {
-    --color-bg: #fafaff;
-  }
-
-  .CodeMirror-info,
-  .theme--dropdown__menu {
-    --color-bg: #fff;
-    --color-font: #666;
-  }
-
-  .theme--overlay {
-    --color-bg: rgba(243, 242, 250, 0.8);
-    --color-font: #555;
-  }
-}
-
-*[theme='dark'] {
-  --color-success: #83c438;
-  --color-notice: #d8c84d;
-  --color-warning: #f48d02;
-  --color-danger: #ff5b5a;
-  --color-surprise: #9886ff;
-  --color-info: #22c1ee;
-
-  --color-bg: #232421;
-  --color-font: #ddd;
-
-  --hl-xxs: rgba(130, 130, 130, 0.05);
-  --hl-xs: rgba(130, 130, 130, 0.1);
-  --hl-sm: rgba(130, 130, 130, 0.2);
-  --hl-md: rgba(130, 130, 130, 0.3);
-  --hl-lg: rgba(130, 130, 130, 0.5);
-  --hl-xl: rgba(130, 130, 130, 0.8);
-  --hl: rgba(140, 140, 140, 1);
-
-  .tag {
-    --color-success: #6ea932;
-    --color-notice: #d0c14a;
-    --color-warning: #d77802;
-    --color-danger: #dc5251;
-    --color-surprise: #8f7cdf;
-    --color-info: #329fbf;
-  }
-
-  .theme--overlay {
-    --color-bg: rgba(20, 20, 20, 0.8);
-    --color-font: #ddd;
-  }
-
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .modal {
-    --color-bg: #282925;
-  }
-
-  .sidebar__header {
-    --color-font: #ccc;
-  }
-
-  .CodeMirror-info,
-  .theme--dropdown__menu {
-    --color-font: #aaa;
-  }
-}
-
-*[theme='light'] {
-  --color-success: #59a210;
-  --color-notice: #ae9602;
-  --color-warning: #d07502;
-  --color-danger: #d04444;
-  --color-surprise: #7d69cb;
-  --color-info: #1c90b4;
-
-  &,
-  .dropdown {
-    --color-bg: #fff;
-    --color-font: #333;
-  }
+  --color-font-success: #fff;
+  --color-font-notice: #fff;
+  --color-font-warning: #fff;
+  --color-font-danger: #fff;
+  --color-font-surprise: #fff;
+  --color-font-info: #fff;
 
   --hl-xxs: rgba(130, 130, 130, 0.05);
   --hl-xs: rgba(130, 130, 130, 0.1);
@@ -393,248 +25,9 @@ body {
   --hl-xl: rgba(130, 130, 130, 0.8);
   --hl: rgba(130, 130, 130, 1);
 
-  .theme--overlay {
-    --color-bg: rgba(255, 255, 255, 0.8);
-    --color-font: #333;
-  }
-}
-
-*[theme='solarized-light'] {
-  --color-success: #859900;
-  --color-notice: #b58900;
-  --color-warning: #cb4b16;
-  --color-danger: #dc322f;
-  --color-surprise: #6c71c4;
-  --color-info: #2aa198;
-
-  --color-bg: #fdf6e3;
-  --color-font: #657b83;
-
-  --hl-xxs: rgba(159, 167, 164, 0.05);
-  --hl-xs: rgba(159, 167, 164, 0.1);
-  --hl-sm: rgba(159, 167, 164, 0.2);
-  --hl-md: rgba(142, 149, 146, 0.3);
-  --hl-lg: rgba(142, 149, 146, 0.6);
-  --hl-xl: rgba(142, 149, 146, 0.8);
-  --hl: rgb(142, 149, 146);
-
-  .theme--overlay {
-    --color-bg: rgba(238, 231, 213, 0.8);
-    --color-font: #657b83;
-  }
-
-  .CodeMirror-info,
-  .theme--dropdown__menu,
-  .modal {
-    --color-bg: #fff8e5;
-  }
-}
-
-*[theme='solarized-dark'] {
-  --color-success: #859900;
-  --color-notice: #b58900;
-  --color-warning: #cb4b16;
-  --color-danger: #dc322f;
-  --color-surprise: #6c71c4;
-  --color-info: #2aa198;
-
-  --color-bg: #002b36;
-  --color-font: #8ea0a2;
-
-  --hl-xxs: rgba(91, 118, 133, 0.05);
-  --hl-xs: rgba(91, 118, 133, 0.1);
-  --hl-sm: rgba(91, 118, 133, 0.2);
-  --hl-md: rgba(91, 118, 133, 0.3);
-  --hl-lg: rgba(91, 118, 133, 0.6);
-  --hl-xl: rgba(91, 118, 133, 0.8);
-  --hl: rgb(91, 118, 133);
-
-  .theme--overlay {
-    --color-bg: rgba(0, 31, 41, 0.8);
-    --color-font: #8ea0a2;
-  }
-
-  .CodeMirror-info,
-  .theme--dropdown__menu,
-  .modal {
-    --color-bg: #073642;
-  }
-}
-
-*[theme='material'] {
-  --color-bg: #263238;
-  --color-font: #dde1e1;
-
-  --color-success: #80cbc4;
-  --color-notice: #ffcb6b;
-  --color-warning: #f77669;
-  --color-danger: #ff5370;
-  --color-surprise: #c792ea;
-  --color-info: #82b1ff;
-
-  --hl-xxs: rgba(114, 145, 143, 0.05);
-  --hl-xs: rgba(114, 145, 143, 0.1);
-  --hl-sm: rgba(114, 145, 143, 0.2);
-  --hl-md: rgba(114, 145, 143, 0.3);
-  --hl-lg: rgba(114, 145, 143, 0.6);
-  --hl-xl: rgba(114, 145, 143, 0.8);
-  --hl: rgb(114, 145, 143);
-
-  .tag {
-    --color-success: #68a9a2;
-    --color-notice: #e6b564;
-    --color-warning: #e27164;
-    --color-danger: #d64b66;
-    --color-surprise: #b482d6;
-    --color-info: #6c93d8;
-  }
-
-  a {
-    --color-surprise: #68a9a2;
-  }
-
-  .modal > *,
-  .CodeMirror-info,
-  .theme--dropdown__menu {
-    --color-bg: #303c43;
-    --color-font: #dde1e1;
-  }
-
-  .ReactTabs > *,
-  .pane > *,
-  .modal,
-  .sidebar {
-    --hl-xxs: rgba(114, 145, 143, 0);
-    --hl-xs: rgba(114, 145, 143, 0);
-    --hl-sm: rgba(114, 145, 143, 0);
-    --hl-md: rgba(114, 145, 143, 0);
-    --hl-lg: rgba(114, 145, 143, 0.1);
-    --hl-xl: rgba(114, 145, 143, 0.1);
-    --hl: rgb(125, 153, 151);
-  }
-
-  .sidebar {
-    --color-bg: #1f2b31;
-  }
-
-  input,
-  textarea,
-  table,
-  .sidebar__item,
-  .btn,
-  .tag,
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .CodeMirror,
-  .pane__body,
-  .modal__header,
-  .sidebar__header,
-  .form-control {
-    --hl-xxs: rgba(114, 145, 143, 0.05);
-    --hl-xs: rgba(114, 145, 143, 0.08);
-    --hl-sm: rgba(114, 145, 143, 0.1);
-    --hl-md: rgba(114, 145, 143, 0.2);
-    --hl-lg: rgba(114, 145, 143, 0.4);
-    --hl-xl: rgba(114, 145, 143, 0.5);
-  }
-
-  .pane__body,
-  .pane__header,
-  ::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-thumb {
-    --hl-xxs: rgba(114, 145, 143, 0.05);
-    --hl-xs: rgba(114, 145, 143, 0.08);
-    --hl-sm: rgba(114, 145, 143, 0.1);
-    --hl-md: rgba(114, 145, 143, 0.15);
-    --hl-lg: rgba(114, 145, 143, 0.2);
-    --hl-xl: rgba(114, 145, 143, 0.2);
-  }
-
-  .theme--overlay {
-    --color-bg: rgba(29, 39, 44, 0.8);
-  }
-}
-
-*[theme='solarized'] {
-  --color-success: #859900;
-  --color-notice: #b58900;
-  --color-warning: #cb4b16;
-  --color-danger: #dc322f;
-  --color-surprise: #6c71c4;
-  --color-info: #2aa198;
-
-  --color-bg: #fdf6e3;
-  --color-font: #657b83;
-
-  --hl-xxs: rgba(159, 167, 164, 0.05);
-  --hl-xs: rgba(159, 167, 164, 0.1);
-  --hl-sm: rgba(159, 167, 164, 0.2);
-  --hl-md: rgba(142, 149, 146, 0.3);
-  --hl-lg: rgba(142, 149, 146, 0.6);
-  --hl-xl: rgba(142, 149, 146, 0.8);
-  --hl: rgb(142, 149, 146);
-
-  .theme--overlay {
-    --color-bg: rgba(238, 231, 213, 0.8);
-  }
-
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .modal {
-    --color-bg: #fff8e5;
-    --color-font: #657b83;
-  }
-
-  .pane__header {
-    --color-bg: #faf4e0;
-  }
-
-  .sidebar__header {
-    --color-bg: #073440;
-  }
-
-  .sidebar {
-    --color-bg: #073642;
-    --color-font: #8ea0a2;
-
-    --hl-xxs: rgba(91, 127, 143, 0.05);
-    --hl-xs: rgba(91, 127, 143, 0.1);
-    --hl-sm: rgba(91, 127, 143, 0.2);
-    --hl-md: rgba(91, 127, 143, 0.3);
-    --hl-lg: rgba(91, 127, 143, 0.6);
-    --hl-xl: rgba(91, 127, 143, 0.8);
-    --hl: rgb(98, 127, 143);
-  }
-}
-
-*[theme='railscasts'] {
-  --color-success: #a5c261;
-  --color-notice: #ffc66d;
-  --color-warning: #cc7833;
-  --color-danger: #da4939;
-  --color-surprise: #b6b3eb;
-  --color-info: #6d9cbe;
-
-  --color-bg: #2b2b2b;
-  --color-font: #e1deda;
-
-  --hl-xxs: rgba(120, 120, 120, 0.05);
-  --hl-xs: rgba(120, 120, 120, 0.09);
-  --hl-sm: rgba(120, 120, 120, 0.15);
-  --hl-md: rgba(120, 120, 120, 0.25);
-  --hl-lg: rgba(120, 120, 120, 0.4);
-  --hl-xl: rgba(120, 120, 120, 0.7);
-  --hl: rgba(130, 130, 130, 1);
-
-  .theme--overlay {
-    --color-bg: rgba(30, 30, 30, 0.8);
-    --color-font: #e1deda;
-  }
-
-  .theme--dropdown__menu,
-  .CodeMirror-info,
-  .modal {
-    --color-bg: #323232;
+  .theme--transparent-overlay {
+    --color-bg: rgba(5, 5, 5, 0.7);
+    --color-font: #ddd;
   }
 }
 
diff --git a/packages/insomnia-app/app/ui/css/editor/nunjucks-tag.less b/packages/insomnia-app/app/ui/css/editor/nunjucks-tag.less
index 02ecb563d72..e05a4cfd109 100644
--- a/packages/insomnia-app/app/ui/css/editor/nunjucks-tag.less
+++ b/packages/insomnia-app/app/ui/css/editor/nunjucks-tag.less
@@ -19,13 +19,16 @@
       left: 0;
       height: 100%;
       width: 100%;
-      opacity: 0.7; // not so bright!
-      content: " ";
+      content: ' ';
       z-index: -1;
       border-radius: 0.2em;
       box-sizing: border-box;
       box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.4);
       transition: background-color 300ms;
+
+      // not so bright!
+      opacity: 0.8;
+      filter: grayscale(20%);
     }
 
     label {
@@ -61,14 +64,14 @@
       background: rgba(255, 255, 255, 0.1);
     }
 
-    &[data-error="on"] {
+    &[data-error='on'] {
       color: var(--color-font-danger);
       &::after {
         background: var(--color-danger);
       }
     }
 
-    &[data-ignore="on"]::after {
+    &[data-ignore='on']::after {
       background: var(--hl-xl);
       color: bar(--color-font);
     }
diff --git a/packages/insomnia-app/app/ui/images/dark.png b/packages/insomnia-app/app/ui/images/dark.png
deleted file mode 100644
index 31765ba4625..00000000000
Binary files a/packages/insomnia-app/app/ui/images/dark.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/default.png b/packages/insomnia-app/app/ui/images/default.png
deleted file mode 100644
index 29693f6b5bc..00000000000
Binary files a/packages/insomnia-app/app/ui/images/default.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/light.png b/packages/insomnia-app/app/ui/images/light.png
deleted file mode 100644
index dd10b48a494..00000000000
Binary files a/packages/insomnia-app/app/ui/images/light.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/material.png b/packages/insomnia-app/app/ui/images/material.png
deleted file mode 100644
index d60733de93f..00000000000
Binary files a/packages/insomnia-app/app/ui/images/material.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/purple.png b/packages/insomnia-app/app/ui/images/purple.png
deleted file mode 100644
index f2c9feb0b0c..00000000000
Binary files a/packages/insomnia-app/app/ui/images/purple.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/railscasts.png b/packages/insomnia-app/app/ui/images/railscasts.png
deleted file mode 100644
index cc71934ea25..00000000000
Binary files a/packages/insomnia-app/app/ui/images/railscasts.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/solarized-dark.png b/packages/insomnia-app/app/ui/images/solarized-dark.png
deleted file mode 100644
index ffd02ac51f5..00000000000
Binary files a/packages/insomnia-app/app/ui/images/solarized-dark.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/solarized-light.png b/packages/insomnia-app/app/ui/images/solarized-light.png
deleted file mode 100644
index 667bf22ffd0..00000000000
Binary files a/packages/insomnia-app/app/ui/images/solarized-light.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/images/solarized.png b/packages/insomnia-app/app/ui/images/solarized.png
deleted file mode 100644
index ca55a9be580..00000000000
Binary files a/packages/insomnia-app/app/ui/images/solarized.png and /dev/null differ
diff --git a/packages/insomnia-app/app/ui/index.js b/packages/insomnia-app/app/ui/index.js
index 8e0d84ad72d..7adda7e632d 100644
--- a/packages/insomnia-app/app/ui/index.js
+++ b/packages/insomnia-app/app/ui/index.js
@@ -12,11 +12,13 @@ import { init as initPlugins } from '../plugins';
 import DNDBackend from './dnd-backend';
 import './css/index.less';
 import { isDevelopment } from '../common/constants';
+import { setThemes } from '../plugins/misc';
 
 // Handy little helper
 document.body.setAttribute('data-platform', process.platform);
 
 (async function() {
+  await setThemes();
   await db.initClient();
 
   // Create Redux store
diff --git a/packages/insomnia-app/package.json b/packages/insomnia-app/package.json
index 78373cc67eb..8b75ca01a85 100644
--- a/packages/insomnia-app/package.json
+++ b/packages/insomnia-app/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.0.27",
+  "version": "1.0.30",
   "name": "insomnia-app",
   "app": {
     "name": "insomnia",
@@ -110,6 +110,7 @@
     "insomnia-importers": "^2.0.6",
     "insomnia-libcurl": "^0.0.10",
     "insomnia-plugin-base64": "^1.0.4",
+    "insomnia-plugin-core-themes": "^1.0.3",
     "insomnia-plugin-file": "^1.0.4",
     "insomnia-plugin-hash": "^1.0.4",
     "insomnia-plugin-jsonpath": "^1.0.4",
diff --git a/plugins/insomnia-plugin-core-themes/README.md b/plugins/insomnia-plugin-core-themes/README.md
new file mode 100644
index 00000000000..6b6b9843013
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/README.md
@@ -0,0 +1,5 @@
+# Insomnia Core Themes
+
+[![Npm Version](https://img.shields.io/npm/v/insomnia-plugin-core-themes.svg)](https://www.npmjs.com/package/insomnia-plugin-core-themes)
+
+This is a core Insomnia plugin.
diff --git a/plugins/insomnia-plugin-core-themes/index.js b/plugins/insomnia-plugin-core-themes/index.js
new file mode 100644
index 00000000000..beb5f16955e
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/index.js
@@ -0,0 +1,14 @@
+module.exports.themes = [
+  require('./themes/default'),
+  require('./themes/material'),
+  require('./themes/simple-light'),
+  require('./themes/simple-dark'),
+  require('./themes/one-light'),
+  require('./themes/one-dark'),
+  require('./themes/purple'),
+  require('./themes/hyper'),
+  require('./themes/railscasts'),
+  require('./themes/solarized-light'),
+  require('./themes/solarized'),
+  require('./themes/solarized-dark')
+];
diff --git a/plugins/insomnia-plugin-core-themes/package.json b/plugins/insomnia-plugin-core-themes/package.json
new file mode 100644
index 00000000000..c047712bce5
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "insomnia-plugin-core-themes",
+  "version": "1.0.3",
+  "author": "Gregory Schier <gschier1990@gmail.com>",
+  "description": "Insomnia core themes",
+  "license": "MIT",
+  "repository": "https://github.com/getinsomnia/insomnia/tree/master/plugins/insomnia-plugin-core-themes",
+  "bugs": {
+    "url": "https://github.com/getinsomnia/insomnia"
+  },
+  "main": "index.js",
+  "insomnia": {
+    "name": "core-themes"
+  },
+  "scripts": {
+    "test": "node --version"
+  }
+}
diff --git a/plugins/insomnia-plugin-core-themes/themes/default.js b/plugins/insomnia-plugin-core-themes/themes/default.js
new file mode 100644
index 00000000000..fe0404d9b88
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/default.js
@@ -0,0 +1,92 @@
+module.exports = {
+  name: 'default',
+  displayName: 'Default',
+  theme: {
+    background: {
+      default: '#555',
+      success: '#59a210',
+      notice: '#ae9602',
+      warning: '#d07502',
+      danger: '#d04444',
+      surprise: '#7d69cb',
+      info: '#1c90b4'
+    },
+    foreground: {
+      default: '#eee'
+    },
+    styles: {
+      transparentOverlay: {
+        background: {
+          default: 'rgba(30, 30, 30, 0.8)'
+        },
+        foreground: {
+          default: '#ddd'
+        }
+      },
+      dialog: {
+        background: {
+          default: '#fff'
+        },
+        foreground: {
+          default: '#333'
+        }
+      },
+      sidebar: {
+        background: {
+          default: '#2e2f2b',
+          success: '#7ecf2b',
+          notice: '#f0e137',
+          warning: '#ff9a1f',
+          danger: '#ff5631',
+          surprise: '#a896ff',
+          info: '#46c1e6'
+        },
+        foreground: {
+          default: 'e0e0e0'
+        },
+        highlight: {
+          default: '#999'
+        }
+      },
+      sidebarHeader: {
+        background: {
+          default: '#695eb8'
+        },
+        foreground: {
+          default: '#fff'
+        }
+      },
+      paneHeader: {
+        foreground: {
+          default: '#666'
+        },
+        background: {
+          default: '#fff',
+          success: '#75ba24',
+          notice: '#d8c84d',
+          warning: '#ec8702',
+          danger: '#ee5655',
+          surprise: '#a590ff',
+          info: '#22c1ee'
+        }
+      },
+      pane: {
+        background: {
+          default: '#282925',
+          success: '{{ styles.sidebar.background.success }}',
+          notice: '{{ styles.sidebar.background.notice }}',
+          warning: '{{ styles.sidebar.background.warning }}',
+          danger: '{{ styles.sidebar.background.danger }}',
+          surprise: '{{ styles.sidebar.background.surprise }}',
+          info: '{{ styles.sidebar.background.info }}'
+        },
+        foreground: {
+          default: 'e0e0e0'
+        },
+        highlight: {
+          default: '#999'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/hyper.js b/plugins/insomnia-plugin-core-themes/themes/hyper.js
new file mode 100644
index 00000000000..dfea4fed843
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/hyper.js
@@ -0,0 +1,41 @@
+module.exports = {
+  name: 'hyper',
+  displayName: 'Hyper',
+  theme: {
+    foreground: {
+      default: '#ccc'
+    },
+    background: {
+      default: '#000',
+      success: '#87ee59',
+      notice: '#f8d245',
+      warning: '#f9ac2a',
+      danger: '#ff505c',
+      surprise: '#ec48f9',
+      info: '#23dce8'
+    },
+    styles: {
+      dialog: {
+        background: {
+          default: '#111'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      paneHeader: {
+        background: {
+          default: '#000',
+          success: '#6ac04b',
+          notice: '#ebc742',
+          warning: '#ea9f29',
+          danger: '#df4b56',
+          surprise: '#d945e5',
+          info: '#20bec9'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/material.js b/plugins/insomnia-plugin-core-themes/themes/material.js
new file mode 100644
index 00000000000..145252e3bbc
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/material.js
@@ -0,0 +1,89 @@
+module.exports = {
+  name: 'material',
+  displayName: 'Material',
+  theme: {
+    background: {
+      default: '#263238',
+      success: '#80cbc4',
+      notice: '#ffcb6b',
+      warning: '#f77669',
+      danger: '#ff5370',
+      surprise: '#c792ea',
+      info: '#82b1ff'
+    },
+    foreground: {
+      default: '#dde1e1',
+      success: '#fff',
+      notice: '#fff',
+      warning: '#fff',
+      danger: '#fff',
+      surprise: '#fff',
+      info: '#fff'
+    },
+    highlight: {
+      default: 'rgba(114, 145, 143, 1)',
+      xxs: 'rgba(114, 145, 143, 0.05)',
+      xs: 'rgba(114, 145, 143, 0.1)',
+      sm: 'rgba(114, 145, 143, 0.15)',
+      md: 'rgba(114, 145, 143, 0.2)',
+      lg: 'rgba(114, 145, 143, 0.6)',
+      xl: 'rgba(114, 145, 143, 0.8)'
+    },
+    styles: {
+      link: {
+        foreground: {
+          default: '#68a9a2'
+        }
+      },
+      dialog: {
+        background: {
+          default: '#303c43'
+        },
+        foreground: {
+          default: '#dde1e1'
+        }
+      },
+      paneHeader: {
+        background: {
+          success: '#68a9a2',
+          notice: '#e6b564',
+          warning: '#e27164',
+          danger: '#d64b66',
+          surprise: '#b482d6',
+          info: '#6c93d8'
+        }
+      },
+      sidebar: {
+        highlight: {
+          default: 'rgb(125, 153, 151)',
+          xxs: 'rgba(114, 145, 143, 0)',
+          xs: 'rgba(114, 145, 143, 0)',
+          sm: 'rgba(114, 145, 143, 0)',
+          md: 'rgba(114, 145, 143, 0)',
+          lg: 'rgba(114, 145, 143, 0.1)',
+          xl: 'rgba(114, 145, 143, 0.1)'
+        }
+      },
+      sidebarHeader: {
+        highlight: {
+          xxs: 'rgba(114, 145, 143, 0.05)',
+          xs: 'rgba(114, 145, 143, 0.08)',
+          sm: 'rgba(114, 145, 143, 0.1)',
+          md: 'rgba(114, 145, 143, 0.2)',
+          lg: 'rgba(114, 145, 143, 0.4)',
+          xl: 'rgba(114, 145, 143, 0.5)'
+        }
+      },
+      sidebarActions: {
+        highlight: {
+          xxs: 'rgba(114, 145, 143, 0.05)',
+          xs: 'rgba(114, 145, 143, 0.08)',
+          sm: 'rgba(114, 145, 143, 0.1)',
+          md: 'rgba(114, 145, 143, 0.2)',
+          lg: 'rgba(114, 145, 143, 0.5)',
+          xl: 'rgba(114, 145, 143, 0.7)'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/one-dark.js b/plugins/insomnia-plugin-core-themes/themes/one-dark.js
new file mode 100644
index 00000000000..aefe1263974
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/one-dark.js
@@ -0,0 +1,60 @@
+module.exports = {
+  name: 'one-dark',
+  displayName: 'One Dark',
+  theme: {
+    background: {
+      default: '#272c35',
+      success: '#98c379',
+      notice: '#d19a66',
+      warning: '#d19a66',
+      danger: '#e06c75',
+      surprise: '#c678dd',
+      info: '#56b6c2'
+    },
+    foreground: {
+      default: '#bbb',
+      success: '#fff',
+      notice: '#fff',
+      warning: '#fff',
+      danger: '#fff',
+      surprise: '#fff',
+      info: '#fff'
+    },
+    highlight: {
+      default: 'rgba(114, 121, 133, 1)',
+      xxs: 'rgba(114, 121, 133, 0.05)',
+      xs: 'rgba(114, 121, 133, 0.1)',
+      sm: 'rgba(114, 121, 133, 0.2)',
+      md: 'rgba(114, 121, 133, 0.3)',
+      lg: 'rgba(114, 121, 133, 0.5)',
+      xl: 'rgba(114, 121, 133, 0.8)'
+    },
+    styles: {
+      sidebar: {
+        background: {
+          default: '#20252c'
+        }
+      },
+      dialog: {
+        background: {
+          default: '#2b303a'
+        }
+      },
+      paneHeader: {
+        background: {
+          success: '#8ab46d',
+          notice: '#d19a66',
+          warning: '#d19a66',
+          danger: '#d86a6f',
+          surprise: '#c678dd',
+          info: '#51acb7'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(30, 33, 40, 0.8)'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/one-light.js b/plugins/insomnia-plugin-core-themes/themes/one-light.js
new file mode 100644
index 00000000000..2501953ce87
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/one-light.js
@@ -0,0 +1,61 @@
+module.exports = {
+  name: 'one-light',
+  displayName: 'One Light',
+  theme: {
+    background: {
+      default: '#fafafa',
+      success: '#50a14f',
+      notice: '#c18401',
+      warning: '#c18401',
+      danger: '#e45649',
+      surprise: '#a626a4',
+      info: '#0184bc'
+    },
+    foreground: {
+      default: '#777'
+    },
+    highlight: {
+      default: 'rgba(114, 121, 133, 1)',
+      xxs: 'rgba(114, 121, 133, 0.05)',
+      xs: 'rgba(114, 121, 133, 0.1)',
+      sm: 'rgba(114, 121, 133, 0.2)',
+      md: 'rgba(114, 121, 133, 0.3)',
+      lg: 'rgba(114, 121, 133, 0.5)',
+      xl: 'rgba(114, 121, 133, 0.8)'
+    },
+    styles: {
+      sidebar: {
+        background: {
+          default: '#eaeaeb',
+          success: '#50a14f',
+          notice: '#c18401',
+          warning: '#c18401',
+          danger: '#e45649',
+          surprise: '#a626a4',
+          info: '#0184bc'
+        },
+        foreground: {
+          default: '#444'
+        },
+        highlight: {
+          default: '#888'
+        }
+      },
+      paneHeader: {
+        background: {
+          success: '{{ styles.sidebar.background.success }}',
+          notice: '{{ styles.sidebar.background.notice }}',
+          warning: '{{ styles.sidebar.background.warning }}',
+          danger: '{{ styles.sidebar.background.danger }}',
+          surprise: '{{ styles.sidebar.background.surprise }}',
+          info: '{{ styles.sidebar.background.info }}'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(30, 33, 40, 0.8)'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/purple.js b/plugins/insomnia-plugin-core-themes/themes/purple.js
new file mode 100644
index 00000000000..3ed75429e6f
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/purple.js
@@ -0,0 +1,52 @@
+module.exports = {
+  name: 'purple',
+  displayName: 'Purple',
+  theme: {
+    foreground: {
+      default: '#555'
+    },
+    styles: {
+      link: {
+        foreground: {
+          default: '#68a9a2'
+        }
+      },
+      sidebar: {
+        background: {
+          default: '#695eb8',
+          success: '#a9ea6e',
+          notice: '#ffdb02',
+          warning: '#ffac49',
+          danger: '#ff7472',
+          surprise: '#c5bbff',
+          info: '#75ddff'
+        },
+        foreground: {
+          default: '#fff'
+        },
+        highlight: {
+          default: 'rgb(217, 204, 255)',
+          xxs: 'rgba(207, 190, 255, 0.05)',
+          xs: 'rgba(207, 190, 255, 0.1)',
+          sm: 'rgba(207, 190, 255, 0.2)',
+          md: 'rgba(207, 190, 255, 0.3)',
+          lg: 'rgba(207, 190, 255, 0.5)',
+          xl: 'rgba(207, 190, 255, 0.8)'
+        }
+      },
+      sidebarHeader: {
+        foreground: {
+          default: '#eee'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(243, 242, 250, 0.8)'
+        },
+        foreground: {
+          default: '#555'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/railscasts.js b/plugins/insomnia-plugin-core-themes/themes/railscasts.js
new file mode 100644
index 00000000000..b1f1197a475
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/railscasts.js
@@ -0,0 +1,44 @@
+module.exports = {
+  name: 'railscasts',
+  displayName: 'Railscasts',
+  theme: {
+    foreground: {
+      default: '#ddd'
+    },
+    background: {
+      default: '#2b2b2b',
+      success: '#a5c261',
+      notice: '#ffc66d',
+      warning: '#e48a37',
+      danger: '#dc4939',
+      surprise: '#b6b3eb',
+      info: '#6d9cbe'
+    },
+    styles: {
+      paneHeader: {
+        background: {
+          default: '#2b2b2b',
+          success: '#97b159',
+          notice: '#efba66',
+          warning: '#e48a37',
+          danger: '#dc4939',
+          surprise: '#a3a1d3',
+          info: '#6d9cbe'
+        }
+      },
+      dialog: {
+        background: {
+          default: '#323232'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(30, 30, 30, 0.8)'
+        },
+        foreground: {
+          default: '#e1deda'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/simple-dark.js b/plugins/insomnia-plugin-core-themes/themes/simple-dark.js
new file mode 100644
index 00000000000..974f81e95ba
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/simple-dark.js
@@ -0,0 +1,35 @@
+module.exports = {
+  name: 'dark',
+  displayName: 'Simple Dark',
+  theme: {
+    foreground: {
+      default: '#ddd'
+    },
+    background: {
+      default: '#222',
+      success: '#8fc860',
+      notice: '#e5ca1e',
+      warning: '#f9a230',
+      danger: '#f06d6b',
+      surprise: '#aca0f2',
+      info: '#6eccec'
+    },
+    styles: {
+      paneHeader: {
+        background: {
+          success: '#77a855',
+          notice: '#d1b81c',
+          warning: '#d9892c',
+          danger: '#d35855',
+          surprise: '#8e84cb',
+          info: '#62a6c3'
+        }
+      },
+      dialog: {
+        background: {
+          default: '#2a2a2a'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/simple-light.js b/plugins/insomnia-plugin-core-themes/themes/simple-light.js
new file mode 100644
index 00000000000..31dddeb562c
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/simple-light.js
@@ -0,0 +1,16 @@
+module.exports = {
+  name: 'light',
+  displayName: 'Simple Light',
+  theme: {
+    styles: {
+      transparentOverlay: {
+        background: {
+          default: 'rgba(240, 240, 240, 0.8)'
+        },
+        foreground: {
+          default: '#555'
+        }
+      }
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js b/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js
new file mode 100644
index 00000000000..2605b723fcb
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js
@@ -0,0 +1,27 @@
+module.exports = {
+  name: 'solarized-dark',
+  displayName: 'Solarized Dark',
+  theme: {
+    background: {
+      default: '#073642',
+      success: '#859900',
+      notice: '#b58900',
+      warning: '#cb4b16',
+      danger: '#dc322f',
+      surprise: '#6c71c4',
+      info: '#2aa198'
+    },
+    foreground: {
+      default: '#8ea0a2'
+    },
+    highlight: {
+      default: 'rgb(142, 149, 146)',
+      xxs: 'rgba(159, 167, 164, 0.05)',
+      xs: 'rgba(159, 167, 164, 0.1)',
+      sm: 'rgba(159, 167, 164, 0.2)',
+      md: 'rgba(142, 149, 146, 0.3)',
+      lg: 'rgba(142, 149, 146, 0.6)',
+      xl: 'rgba(142, 149, 146, 0.8)'
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized-light.js b/plugins/insomnia-plugin-core-themes/themes/solarized-light.js
new file mode 100644
index 00000000000..8baeb89f4a4
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/solarized-light.js
@@ -0,0 +1,27 @@
+module.exports = {
+  name: 'solarized-light',
+  displayName: 'Solarized Light',
+  theme: {
+    background: {
+      default: '#fdf6e3',
+      success: '#859900',
+      notice: '#b58900',
+      warning: '#cb4b16',
+      danger: '#dc322f',
+      surprise: '#6c71c4',
+      info: '#2aa198'
+    },
+    foreground: {
+      default: '#657b83'
+    },
+    highlight: {
+      default: 'rgb(142, 149, 146)',
+      xxs: 'rgba(159, 167, 164, 0.05)',
+      xs: 'rgba(159, 167, 164, 0.1)',
+      sm: 'rgba(159, 167, 164, 0.2)',
+      md: 'rgba(142, 149, 146, 0.3)',
+      lg: 'rgba(142, 149, 146, 0.6)',
+      xl: 'rgba(142, 149, 146, 0.8)'
+    }
+  }
+};
diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized.js b/plugins/insomnia-plugin-core-themes/themes/solarized.js
new file mode 100644
index 00000000000..4f7ee4f0b99
--- /dev/null
+++ b/plugins/insomnia-plugin-core-themes/themes/solarized.js
@@ -0,0 +1,37 @@
+module.exports = {
+  name: 'solarized',
+  displayName: 'Solarized',
+  theme: {
+    background: {
+      default: '#fdf6e3',
+      success: '#859900',
+      notice: '#b58900',
+      warning: '#cb4b16',
+      danger: '#dc322f',
+      surprise: '#6c71c4',
+      info: '#2aa198'
+    },
+    foreground: {
+      default: '#657b83'
+    },
+    highlight: {
+      default: 'rgb(142, 149, 146)',
+      xxs: 'rgba(159, 167, 164, 0.05)',
+      xs: 'rgba(159, 167, 164, 0.1)',
+      sm: 'rgba(159, 167, 164, 0.2)',
+      md: 'rgba(142, 149, 146, 0.3)',
+      lg: 'rgba(142, 149, 146, 0.6)',
+      xl: 'rgba(142, 149, 146, 0.8)'
+    },
+    styles: {
+      sidebar: {
+        background: {
+          default: '#073642'
+        },
+        foreground: {
+          default: '#8ea0a2'
+        }
+      }
+    }
+  }
+};