feat(ui): Improve dark theme (#140)

packages/ui/src/components/ContextMenu.vue

@@ -138,25 +138,26 @@ export default {
 .context-menu {
  position: fixed;
  z-index: 1;
- border: 1px solid #82828240;
- box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--menu-border-color);
+ box-shadow: 0 0 1rem 0 var(--box-shadow-color);
  border-radius: calc(1rem * 0.3);
  min-width: 15rem;
  padding-top: 5px;
  padding-bottom: 5px;
- background: #ffffff;
+ background: var(--background-color);
  overflow-y: auto;
  left: -9999px;
 }
 
 button.context-menu-item {
  padding: 0.5rem;
  outline: 0;
- background: #ffffff;
+ background: var(--background-color);
  border: 0;
  display: block;
  width: 100%;
  text-align: left;
+ color: var(--text-color);
 }
 
 button.context-menu-item:not(:active):focus {

packages/ui/src/components/Modal.vue

@@ -74,7 +74,6 @@ export default {
 <style scoped>
 .modal {
  --gutter: 14px;
- --soft-color: #fafafa;
  top: 0;
  left: 0;
  width: 100vw;
@@ -138,10 +137,9 @@ export default {
 .modal__container footer {
  height: auto;
  text-align: right;
- border-top: solid 1px #cccccc;
+ border-top: solid 1px var(--modal-border-color);
  padding: var(--gutter);
- background-color: #ffffff;
- background-color: var(--soft-color);
+ background-color: var(--modal-footer-background-color);
 }
 
 .modal__container footer button, .modal__container footer input {

packages/ui/src/components/modals/EnvironmentModal.vue

@@ -19,7 +19,7 @@
  <div class="environment-sidebar-item-menu" :class="{ 'environment-sidebar-item-menu-disable-hide': environment.name === clickedContextMenuEnvironment.name && showEnvironmentContextMenuPopup === true }" @click.stop="showEnvironmentContextMenu($event, environment)">
  <svg viewBox="0 0 24 24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">
  <g>
- <path d="M12,16.5c0.83,0,1.5,0.67,1.5,1.5s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S11.17,16.5,12,16.5z M10.5,12 c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S10.5,11.17,10.5,12z M10.5,6c0,0.83,0.67,1.5,1.5,1.5 s1.5-0.67,1.5-1.5S12.83,4.5,12,4.5S10.5,5.17,10.5,6z"></path>
+ <path d="M12,16.5c0.83,0,1.5,0.67,1.5,1.5s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S11.17,16.5,12,16.5z M10.5,12 c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S10.5,11.17,10.5,12z M10.5,6c0,0.83,0.67,1.5,1.5,1.5 s1.5-0.67,1.5-1.5S12.83,4.5,12,4.5S10.5,5.17,10.5,6z" style="fill: var(--text-color);"></path>
  </g>
  </svg>
  </div>

packages/ui/src/components/modals/SidebarSettingsModal.vue

@@ -2,7 +2,7 @@
  <form @submit.prevent="showModalComp = false" v-if="showModalComp">
  <modal :title="title" v-model="showModalComp" width="600px">
  <label>
- <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Name <span style="color: #7b7a7a; font-weight: normal; font-style: italic;" v-if="collectionItem._type === 'request' || collectionItem._type === 'socket'">(also rename by double-clicking in sidebar)</span></div>
+ <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Name <span style="color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;" v-if="collectionItem._type === 'request' || collectionItem._type === 'socket'">(also rename by double-clicking in sidebar)</span></div>
  <input type="text" class="full-width-input" v-model="collectionItem.name" :placeholder="placeholder" spellcheck="false" required v-focus>
  </label>
 
@@ -27,7 +27,7 @@
  <div>
  <RequestPanelHeaders :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelHeaders>
  </div>
- <div style="margin-top: 0.5rem; color: #7b7a7a; font-weight: normal; font-style: italic;">These will be applied to all requests in this folder and its subfolders</div>
+ <div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">These will be applied to all requests in this folder and its subfolders</div>
  </div>
 
  <div style="padding-bottom: 1rem"></div>
@@ -36,7 +36,7 @@
  <div>
  <RequestPanelAuth :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelAuth>
  </div>
- <div style="margin-top: 0.5rem; color: #7b7a7a; font-weight: normal; font-style: italic;">This will be applied to all requests in this folder and its subfolders</div>
+ <div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">This will be applied to all requests in this folder and its subfolders</div>
  </div>
  </div>
 

packages/ui/src/styles/main.css

@@ -31,11 +31,16 @@ html {
  --modal-link-color: var(--link-color);
  --input-disabled-background-color: rgba(239, 239, 239, 0.3);
  --input-disabled-color: rgb(84, 84, 84);
+ --input-selection-background-color: #9cc3f5;
+ --input-highlight-outline-color: #1a73e8;
+ --input-border-color: var(--default-border-color);
+ --input-disabled-border-color: var(--input-border-color);
  --button-background-color: white;
  --button-hover-background-color: #f8f8f8;
  --button-text-color: black;
  --button-border-color: #8c8c8c;
  --modal-background-color: white;
+ --modal-footer-background-color: #fafafa;
  --modal-text-color: black;
  --modal-caret-color: black;
  --modal-border-color: lightgrey;
@@ -45,6 +50,9 @@ html {
  --modal-button-hover-background-color: #f8f8f8;
  --modal-button-text-color: black;
  --modal-button-border-color: #8c8c8c;
+ --modal-input-disabled-background-color: var(--input-disabled-background-color);
+ --modal-input-disabled-color: var(--input-disabled-color);
+ --modal-input-selection-background-color: var(--input-selection-background-color);
  --sidebar-item-active-color: #f3f3f3;
  --resizer-background-color: #f1f1f1;
  --response-panel-history-select-hover-color: #f7f7f7;
@@ -92,42 +100,55 @@ html {
  --modal-valid-env-highlight-background-color: #e8f5e9;
  --modal-invalid-env-highlight-color: #d32f2f;
  --modal-invalid-env-highlight-background-color: #ffebee;
+ --box-shadow-color: rgba(0, 0, 0, 0.1);
+ --tip-text-color: #7b7a7a;
+ --modal-tip-text-color: var(--tip-text-color);
+ --primary-text-color: white;
+ --primary-background-color: #1a73e8;
+ --primary-hover-background-color: rgba(26, 115, 232, 0.5);
+ --menu-border-color: #82828240;
 }
 
 html.theme-dark {
  --default-border-color: #484848;
- --default-border-color-modal: lightgrey;
+ --default-border-color-modal: var(--default-border-color);
  --border-color-lighter: #484848;
  --border-color-lighter-darkened: #48484847;
  --base-color-success: #0bb27e;
  --base-color-info: #097bed;
  --base-color-warning: #ffb400;
  --base-color-error: #f06f57;
  --background-color: #292929;
- --text-color: #e0e0e0;
- --caret-color: #e0e0e0;
+ --text-color: #d9d9d9;
+ --caret-color: var(--text-color);
  --scrollbar: #505050;
  --scrollbar-background: #353535;
  --link-color: #d9c9ff;
- --modal-link-color: rgb(0, 0, 238);
+ --modal-link-color: var(--link-color);
  --input-disabled-background-color: rgba(59, 59, 59, 0.3);
  --input-disabled-color: rgb(170, 170, 170);
- --modal-input-disabled-background-color: rgba(239, 239, 239, 0.3);
- --modal-input-disabled-color: rgb(84, 84, 84);
+ --input-selection-background-color: #083ca6;
+ --input-highlight-outline-color: #1a73e899;
+ --input-border-color: var(--default-border-color);
+ --input-disabled-border-color: var(--input-border-color);
+ --modal-input-disabled-background-color: var(--input-disabled-background-color);
+ --modal-input-disabled-color: var(--input-disabled-color);
+ --modal-input-selection-background-color: var(--input-selection-background-color);
  --button-background-color: #292929;
  --button-hover-background-color: #595858;
- --button-text-color: #e0e0e0;
+ --button-text-color: var(--text-color);
  --button-border-color: #8c8c8c;
- --modal-background-color: white;
- --modal-text-color: black;
- --modal-caret-color: black;
- --modal-border-color: lightgrey;
- --modal-scrollbar: #dfdfdf;
- --modal-scrollbar-background: #f3f2f2;
- --modal-button-background-color: white;
- --modal-button-hover-background-color: #f8f8f8;
- --modal-button-text-color: black;
- --modal-button-border-color: #8c8c8c;
+ --modal-background-color: var(--background-color);
+ --modal-footer-background-color: #232323;
+ --modal-text-color: var(--text-color);
+ --modal-caret-color: var(--caret-color);
+ --modal-border-color: var(--default-border-color-modal);
+ --modal-scrollbar: var(--scrollbar);
+ --modal-scrollbar-background: var(--background-color);
+ --modal-button-background-color: var(--button-background-color);
+ --modal-button-hover-background-color: var(--button-hover-background-color);
+ --modal-button-text-color: var(--button-text-color);
+ --modal-button-border-color: var(--button-border-color);
  --sidebar-item-active-color: #353535;
  --resizer-background-color: #353535;
  --response-panel-history-select-hover-color: #353535;
@@ -144,16 +165,16 @@ html.theme-dark {
  --cm-tooltip-background-color: var(--background-color);
  --cm-selection-background-color: #ffffff33;
  --cm-selection-match-background-color: #99ff773d;
- --modal-cm-string: #a11;
- --modal-cm-boolean: #219;
- --modal-cm-null: #708;
- --modal-cm-number: #164;
- --modal-cm-comment: #940;
- --modal-cm-keyword: #708;
- --modal-cm-variable: #00f;
- --modal-cm-tooltip-background-color: #f5f5f5;
- --modal-cm-selection-background-color: #00000021;
- --modal-cm-selection-match-background-color: #99ff7780;
+ --modal-cm-string: var(--cm-string);
+ --modal-cm-boolean: var(--cm-boolean);
+ --modal-cm-null: var(--cm-null);
+ --modal-cm-number: var(--cm-number);
+ --modal-cm-comment: var(--cm-comment);
+ --modal-cm-keyword: var(--cm-keyword);
+ --modal-cm-variable: var(--cm-variable);
+ --modal-cm-tooltip-background-color: var(--cm-tooltip-background-color);
+ --modal-cm-selection-background-color: var(--cm-selection-background-color);
+ --modal-cm-selection-match-background-color: var(--cm-selection-match-background-color);
  --drop-target-background-color: #f8889b41;
  --workspace-menu-hover-background-color: #505050;
  --socket-header-background-color: var(--sidebar-item-active-color);
@@ -164,10 +185,17 @@ html.theme-dark {
  --valid-env-highlight-background-color: #1b5e20;
  --invalid-env-highlight-color: #ffcccb;
  --invalid-env-highlight-background-color: #7c0404;
- --modal-valid-env-highlight-color: #2e7d32;
- --modal-valid-env-highlight-background-color: #e8f5e9;
- --modal-invalid-env-highlight-color: #d32f2f;
- --modal-invalid-env-highlight-background-color: #ffebee;
+ --modal-valid-env-highlight-color: var(--valid-env-highlight-color);
+ --modal-valid-env-highlight-background-color: var(--valid-env-highlight-background-color);
+ --modal-invalid-env-highlight-color: var(--invalid-env-highlight-color);
+ --modal-invalid-env-highlight-background-color: var(--invalid-env-highlight-background-color);
+ --box-shadow-color: rgba(255, 255, 255, 0.1);
+ --tip-text-color: #b1b1b1;
+ --modal-tip-text-color: var(--tip-text-color);
+ --primary-text-color: var(--text-color);
+ --primary-background-color: #1a73e8;
+ --primary-hover-background-color: rgba(26, 115, 232, 0.5);
+ --menu-border-color: #48484880;
 }
 
 * {
@@ -258,12 +286,12 @@ select option {
 input:disabled {
  background-color: var(--input-disabled-background-color);
  color: var(--input-disabled-color);
- border: 1px solid var(--default-border-color);
+ border: 1px solid var(--input-disabled-border-color);
 }
 
 input.full-width-input, select.full-width-input {
  width: 100%;
- border: 1px solid var(--modal-border-color);
+ border: 1px solid var(--input-border-color);
  border-radius: var(--default-border-radius);
  outline: 0;
  padding: 0.4rem;
@@ -283,6 +311,11 @@ select.full-width-input option {
  padding: 0.1rem;
 }
 
+.full-width-input:focus {
+ outline: 1px solid var(--input-highlight-outline-color);
+ border: 1px solid var(--input-highlight-outline-color);
+}
+
 .modal * {
  caret-color: var(--modal-caret-color);
 }

packages/ui/src/web-components/alert-confirm-prompt.ts

@@ -159,7 +159,6 @@ class AlertConfirmPrompt extends HTMLElement {
  left: 0;
  z-index: 9999;
  --border-radius: 3px;
- --primary-color: #1a73e8;
  }
 
  .dialog {
@@ -168,7 +167,7 @@ class AlertConfirmPrompt extends HTMLElement {
  padding: 1rem;
  box-shadow: 1px 1px 42px -16px black;
  border-radius: 4px;
- border: 1px solid #c6c6c6;
+ border: 1px solid var(--modal-border-color);
  word-break: break-word;
  }
 
@@ -184,41 +183,49 @@ class AlertConfirmPrompt extends HTMLElement {
  .dialog-primary-button, .dialog-secondary-button {
  padding: 8px 16px;
  border-radius: var(--border-radius);
- border: 1px solid lightgrey;
  }
 
  .dialog-primary-button {
- background: var(--primary-color);
- border-color: var(--primary-color);
- color: white;
+ background: var(--primary-background-color);
+ color: var(--primary-text-color);
+ border: none;
  width: 75px;
  }
 
  .dialog-primary-button:hover {
- background: #2f7de3;
+ background: var(--primary-hover-background-color);
  }
 
  .dialog-secondary-button {
  margin-left: 0.5rem;
- color: var(--primary-color);
- background: white;
+ background: var(--button-background-color);
+ color: var(--button-text-color);
+ border: 1px solid var(--button-border-color);
  }
 
  .dialog-secondary-button:hover {
- background: #ebf3fd;
+ background: var(--button-hover-background-color);
  }
 
  .dialog-input {
  padding: 7px;
  width: 25rem;
  border-radius: var(--border-radius);
- border: 1px solid lightgrey;
+ border: 1px solid var(--input-border-color);
  caret-color: var(--modal-caret-color);
+ background-color: var(--modal-background-color);
+ color: var(--text-color);
+ }
+
+ .dialog-input::selection {
+ background-color: var(--modal-input-selection-background-color);
  }
 
- .dialog-input:focus, .dialog-primary-button:focus, .dialog-secondary-button:focus {
- outline: 2px solid var(--primary-color);
- border-color: white;
+ .dialog-input:focus {
+ outline: 1px solid var(--input-highlight-outline-color);
+ border: 1px solid var(--input-highlight-outline-color);
+ background-color: var(--modal-background-color);
+ color: var(--text-color);
  }
  </style>
  `