First pass at one light/dark themes (#1044)

Kong · Jul 16, 2018 · 1a23dc2 · 1a23dc2
1 parent f3a6905
commit 1a23dc2
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 1 deletion.
diff --git a/packages/insomnia-app/app/ui/components/settings/theme.js b/packages/insomnia-app/app/ui/components/settings/theme.js
@@ -23,7 +23,9 @@ const THEMES = [
   { 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: 'railscasts', name: 'Railscasts', img: imgRailscasts },
+  { key: 'one-dark', name: 'One Dark', img: imgRailscasts },
+  { key: 'one-light', name: 'One Light', img: imgRailscasts }
 ];
 
 @autobind

diff --git a/packages/insomnia-app/app/ui/css/constants/colors.less b/packages/insomnia-app/app/ui/css/constants/colors.less
@@ -102,6 +102,150 @@ body {
   }
 }
 
+*[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'] {
   --color-bg: #fff;
   --color-font: #555;