Theme tweaks

packages/insomnia-app/app/plugins/misc.js

@@ -1,6 +1,7 @@
 // @flow
 import { render, THROW_ON_ERROR } from '../common/render';
 import { getThemes } from './index';
+import type { Theme } from './index';
 
 type ThemeBlock = {
   background?: {
@@ -144,9 +145,7 @@ export async function generateThemeCSS(theme: PluginTheme): Promise<string> {
     css += wrapStyles(n, '.CodeMirror-info', getThemeBlockCSS(styles.dialog));
   }
 
-  return typeof renderedTheme.rawCss === 'string'
-    ? css + '\n\n' + renderedTheme.rawCss
-    : css;
+  return css;
 }
 
 function getThemeBlockCSS(block?: ThemeBlock): string {
@@ -229,31 +228,38 @@ function wrapStyles(theme: string, selector: string, styles: string) {
   ].join('\n');
 }
 
-export async function setThemes() {
+export async function setTheme(themeName: string) {
   if (!document) {
     return;
   }
 
   const head = document.head;
+  const body = document.body;
 
-  if (!head) {
+  if (!head || !body) {
     return;
   }
 
-  const themes = await getThemes();
+  body.setAttribute('theme', themeName);
+  const themes: Array<Theme> = await getThemes();
 
   for (const theme of themes) {
-    const themeCSS = (await generateThemeCSS(theme.theme)) + '\n';
+    let themeCSS = (await generateThemeCSS(theme.theme)) + '\n';
+    const { name } = theme.theme;
+    const { rawCss } = theme.theme.theme;
+
+    let s = document.querySelector(`style[data-theme-name="${name}"]`);
 
-    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);
+      s.setAttribute('data-theme-name', name);
       head.appendChild(s);
     }
 
+    if (typeof rawCss === 'string' && name === themeName) {
+      themeCSS += '\n\n' + rawCss;
+    }
+
     s.innerHTML = themeCSS;
   }
 }

packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js

@@ -402,7 +402,7 @@ class Dropdown extends PureComponent {
               />
             </div>
             {noResults && (
-              <div className="text-center pad faint">Nothing to show</div>
+              <div className="text-center pad warning">No match :(</div>
             )}
             <ul className={classnames({ hide: noResults })}>{dropdownItems}</ul>
           </div>

packages/insomnia-app/app/ui/components/modals/settings-modal.js

@@ -18,6 +18,7 @@ import { Curl } from 'insomnia-libcurl';
 import { getAppName, getAppVersion } from '../../../common/constants';
 import * as session from '../../../sync/session';
 import Tooltip from '../tooltip';
+import { setTheme } from '../../../plugins/misc';
 
 export const TAB_INDEX_EXPORT = 1;
 export const TAB_INDEX_SHORTCUTS = 3;
@@ -58,7 +59,7 @@ class SettingsModal extends PureComponent {
   }
 
   async _handleChangeTheme(theme, persist = true) {
-    document.body.setAttribute('theme', theme);
+    setTheme(theme);
 
     if (persist) {
       models.settings.update(this.props.settings, { theme });

packages/insomnia-app/app/ui/components/settings/theme.js

@@ -5,7 +5,7 @@ import Button from '../base/button';
 import type { Theme as ThemeType } from '../../../plugins';
 import { getThemes } from '../../../plugins';
 
-const THEMES_PER_ROW = 4;
+const THEMES_PER_ROW = 5;
 
 type Props = {
   handleChangeTheme: string => void,

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 theme--sidebar__actions">
+        <div className="sidebar__filter">
           <div className="form-control form-control--outlined form-control--btn-right">
             <input
               ref={this._setInputRef}

packages/insomnia-app/app/ui/components/sidebar/sidebar.js

@@ -78,28 +78,32 @@ class Sidebar extends PureComponent {
           isLoading={isLoading}
         />
 
-        <div className="sidebar__menu">
-          <EnvironmentsDropdown
-            handleChangeEnvironment={this._handleChangeEnvironment}
-            activeEnvironment={activeEnvironment}
-            environments={environments}
-            workspace={workspace}
-            environmentHighlightColorStyle={environmentHighlightColorStyle}
-          />
-          <button className="btn btn--super-compact" onClick={showCookiesModal}>
-            <div className="sidebar__menu__thing">
-              <span>Cookies</span>
-            </div>
-          </button>
-        </div>
+        <div className="sidebar__top theme--sidebar__actions">
+          <div className="sidebar__menu">
+            <EnvironmentsDropdown
+              handleChangeEnvironment={this._handleChangeEnvironment}
+              activeEnvironment={activeEnvironment}
+              environments={environments}
+              workspace={workspace}
+              environmentHighlightColorStyle={environmentHighlightColorStyle}
+            />
+            <button
+              className="btn btn--super-compact"
+              onClick={showCookiesModal}>
+              <div className="sidebar__menu__thing">
+                <span>Cookies</span>
+              </div>
+            </button>
+          </div>
 
-        <SidebarFilter
-          key={`${workspace._id}::filter`}
-          onChange={handleChangeFilter}
-          requestCreate={this._handleCreateRequestInWorkspace}
-          requestGroupCreate={this._handleCreateRequestGroupInWorkspace}
-          filter={filter || ''}
-        />
+          <SidebarFilter
+            key={`${workspace._id}::filter`}
+            onChange={handleChangeFilter}
+            requestCreate={this._handleCreateRequestInWorkspace}
+            requestGroupCreate={this._handleCreateRequestGroupInWorkspace}
+            filter={filter || ''}
+          />
+        </div>
 
         <SidebarChildren
           childObjects={childObjects}

packages/insomnia-app/app/ui/containers/app.js

@@ -839,9 +839,10 @@ class App extends PureComponent {
     });
 
     ipcRenderer.on('reload-plugins', async () => {
+      const { settings } = this.props;
       await plugins.getPlugins(true);
       templating.reload();
-      themes.setThemes();
+      themes.setTheme(settings.theme);
       console.log('[plugins] reloaded');
     });
 

packages/insomnia-app/app/ui/css/components/dropdown.less

@@ -25,8 +25,6 @@
 }
 
 .dropdown__menu {
-  opacity: 0.96;
-
   &.dropdown__menu--open .dropdown__backdrop {
     display: block;
   }
@@ -69,7 +67,10 @@
       input {
         margin: 0;
         padding: @padding-xs @padding-sm;
+        color: var(--color-font);
       }
+
+      color: var(--hl);
     }
 
     &.dropdown__list--filtering {

packages/insomnia-app/app/ui/css/components/sidebar.less

@@ -149,6 +149,11 @@
     }
   }
 
+  .sidebar__top {
+    background: var(--color-bg);
+    color: var(--color-font);
+  }
+
   &.sidebar--skinny .sidebar__filter {
     grid-template-columns: 100%;
     padding-right: @padding-sm;

packages/insomnia-app/app/ui/css/components/tag.less

@@ -11,7 +11,6 @@
   background: @hl-sm;
   border: 1px solid rgba(0, 0, 0, 0.07);
   white-space: nowrap;
-  color: var(--hl);
 
   &:last-child {
     margin-right: 0;

packages/insomnia-app/app/ui/css/components/themes.less

@@ -7,7 +7,7 @@
   .themes__row {
     display: flex;
     flex-direction: row;
-    margin-bottom: @padding-md;
+    margin-bottom: @padding-lg;
   }
 
   .themes__theme {

packages/insomnia-app/app/ui/css/components/tooltip.less

@@ -3,11 +3,6 @@
 .tooltip {
   position: relative;
   display: inline-block;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-  }
 }
 
 .tooltip__bubble {

packages/insomnia-app/app/ui/css/constants/colors.less

@@ -19,8 +19,8 @@
 
   --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-sm: rgba(130, 130, 130, 0.25);
+  --hl-md: rgba(130, 130, 130, 0.35);
   --hl-lg: rgba(130, 130, 130, 0.5);
   --hl-xl: rgba(130, 130, 130, 0.8);
   --hl: rgba(130, 130, 130, 1);

packages/insomnia-app/app/ui/index.js

@@ -12,14 +12,17 @@ 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';
+import { setTheme } from '../plugins/misc';
 
 // Handy little helper
 document.body.setAttribute('data-platform', process.platform);
 
 (async function() {
-  await setThemes();
   await db.initClient();
+  await initPlugins();
+
+  const settings = await models.settings.getOrCreate();
+  await setTheme(settings.theme);
 
   // Create Redux store
   const store = await initStore();
@@ -48,7 +51,6 @@ document.body.setAttribute('data-platform', process.platform);
 
   // Do things that can wait
   process.nextTick(initSync);
-  process.nextTick(initPlugins);
 })();
 
 // Export some useful things for dev

plugins/insomnia-plugin-core-themes/themes/default.js

@@ -65,9 +65,9 @@ module.exports = {
           success: '#75ba24',
           notice: '#d8c84d',
           warning: '#ec8702',
-          danger: '#ee5655',
-          surprise: '#a590ff',
-          info: '#22c1ee'
+          danger: '#e15251',
+          surprise: '#8776d5',
+          info: '#20aed9'
         }
       },
       pane: {
@@ -80,9 +80,6 @@ module.exports = {
           surprise: '{{ styles.sidebar.background.surprise }}',
           info: '{{ styles.sidebar.background.info }}'
         },
-        foreground: {
-          default: 'e0e0e0'
-        },
         highlight: {
           default: '#999'
         }

plugins/insomnia-plugin-core-themes/themes/hyper.js

@@ -3,7 +3,7 @@ module.exports = {
   displayName: 'Hyper',
   theme: {
     foreground: {
-      default: '#ccc'
+      default: '#ddd'
     },
     background: {
       default: '#000',
@@ -14,6 +14,11 @@ module.exports = {
       surprise: '#f24aff',
       info: '#23dce8'
     },
+    rawCss: `
+      .tooltip, .dropdown__menu {
+        opacity: 0.95;
+      }
+    `,
     styles: {
       dialog: {
         background: {
@@ -25,6 +30,11 @@ module.exports = {
           default: 'rgba(0, 0, 0, 0.5)'
         }
       },
+      sidebar: {
+        highlight: {
+          default: '#aaa'
+        }
+      },
       paneHeader: {
         background: {
           default: '#000',

plugins/insomnia-plugin-core-themes/themes/material.js

@@ -29,6 +29,11 @@ module.exports = {
       lg: 'rgba(114, 145, 143, 0.6)',
       xl: 'rgba(114, 145, 143, 0.8)'
     },
+    rawCss: `
+      .tooltip, .dropdown__menu {
+        opacity: 0.95;
+      }
+    `,
     styles: {
       link: {
         foreground: {
@@ -83,6 +88,11 @@ module.exports = {
           lg: 'rgba(114, 145, 143, 0.5)',
           xl: 'rgba(114, 145, 143, 0.7)'
         }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(37, 49, 55, 0.9)'
+        }
       }
     }
   }

plugins/insomnia-plugin-core-themes/themes/one-dark.js

@@ -5,7 +5,7 @@ module.exports = {
     background: {
       default: '#272c35',
       success: '#98c379',
-      notice: '#d19a66',
+      notice: '#e3a96c',
       warning: '#d19a66',
       danger: '#e06c75',
       surprise: '#c678dd',
@@ -25,8 +25,8 @@ module.exports = {
       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)',
+      md: 'rgba(114, 121, 133, 0.4)',
+      lg: 'rgba(114, 121, 133, 0.6)',
       xl: 'rgba(114, 121, 133, 0.8)'
     },
     styles: {
@@ -37,7 +37,7 @@ module.exports = {
       },
       dialog: {
         background: {
-          default: '#2b303a'
+          default: '#303640'
         }
       },
       paneHeader: {

plugins/insomnia-plugin-core-themes/themes/railscasts.js

@@ -10,7 +10,7 @@ module.exports = {
       success: '#a5c261',
       notice: '#ffc66d',
       warning: '#e48a37',
-      danger: '#dc4939',
+      danger: '#ee4b3b',
       surprise: '#b6b3eb',
       info: '#6d9cbe'
     },

plugins/insomnia-plugin-core-themes/themes/solarized-dark.js

@@ -12,7 +12,7 @@ module.exports = {
       info: '#2aa198'
     },
     foreground: {
-      default: '#8ea0a2'
+      default: '#98aaac'
     },
     highlight: {
       default: 'rgb(142, 149, 146)',

plugins/insomnia-plugin-core-themes/themes/solarized-light.js

@@ -12,7 +12,7 @@ module.exports = {
       info: '#2aa198'
     },
     foreground: {
-      default: '#657b83'
+      default: '#586d75'
     },
     highlight: {
       default: 'rgb(142, 149, 146)',

plugins/insomnia-plugin-core-themes/themes/solarized.js

@@ -12,7 +12,7 @@ module.exports = {
       info: '#2aa198'
     },
     foreground: {
-      default: '#657b83'
+      default: '#556970'
     },
     highlight: {
       default: 'rgb(142, 149, 146)',
@@ -29,7 +29,7 @@ module.exports = {
           default: '#073642'
         },
         foreground: {
-          default: '#8ea0a2'
+          default: '#9cafb1'
         }
       }
     }