mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sean Washington 2018-07-15 19:12:46 -07:00 committed by Gregory Schier
parent f3a690576b
commit 1a23dc2b4b
2 changed files with 147 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/insomnia-app/app/ui/components/settings/theme.js
View File

@ -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

144
packages/insomnia-app/app/ui/css/constants/colors.less
View File

@ -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;