2019-02-01 01:42:07 +08:00
|
|
|
|
:root {
|
2019-02-13 09:41:39 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
2019-02-05 19:23:37 +08:00
|
|
|
|
/* Light theme */
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-attribute-name: #ef6632;
|
2020-05-20 00:42:00 +08:00
|
|
|
|
--light-color-attribute-name-not-editable: #23272f;
|
2019-06-02 09:05:59 +08:00
|
|
|
|
--light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-attribute-value: #1a1aa6;
|
2019-06-02 09:05:59 +08:00
|
|
|
|
--light-color-attribute-value-inverted: #ffffff;
|
2019-02-18 05:07:39 +08:00
|
|
|
|
--light-color-attribute-editable-value: #1a1aa6;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-background: #ffffff;
|
2019-06-02 00:34:39 +08:00
|
|
|
|
--light-color-background-hover: rgba(0, 136, 250, 0.1);
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--light-color-background-inactive: #e5e5e5;
|
2019-07-14 01:05:04 +08:00
|
|
|
|
--light-color-background-invalid: #fff0f0;
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--light-color-background-selected: #0088fa;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-button-background: #ffffff;
|
2019-04-21 06:44:24 +08:00
|
|
|
|
--light-color-button-background-focus: #ededed;
|
|
|
|
|
|
--light-color-button: #5f6673;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-button-disabled: #cfd1d5;
|
2019-04-21 06:44:24 +08:00
|
|
|
|
--light-color-button-active: #0088fa;
|
2019-04-21 23:23:20 +08:00
|
|
|
|
--light-color-button-focus: #23272f;
|
|
|
|
|
|
--light-color-button-hover: #23272f;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-border: #eeeeee;
|
2019-05-16 05:15:14 +08:00
|
|
|
|
--light-color-commit-did-not-render-fill: #cfd1d5;
|
|
|
|
|
|
--light-color-commit-did-not-render-fill-text: #000000;
|
|
|
|
|
|
--light-color-commit-did-not-render-pattern: #cfd1d5;
|
2019-05-22 23:32:10 +08:00
|
|
|
|
--light-color-commit-did-not-render-pattern-text: #333333;
|
2019-03-14 05:57:52 +08:00
|
|
|
|
--light-color-commit-gradient-0: #37afa9;
|
|
|
|
|
|
--light-color-commit-gradient-1: #63b19e;
|
|
|
|
|
|
--light-color-commit-gradient-2: #80b393;
|
|
|
|
|
|
--light-color-commit-gradient-3: #97b488;
|
|
|
|
|
|
--light-color-commit-gradient-4: #abb67d;
|
|
|
|
|
|
--light-color-commit-gradient-5: #beb771;
|
|
|
|
|
|
--light-color-commit-gradient-6: #cfb965;
|
|
|
|
|
|
--light-color-commit-gradient-7: #dfba57;
|
|
|
|
|
|
--light-color-commit-gradient-8: #efbb49;
|
|
|
|
|
|
--light-color-commit-gradient-9: #febc38;
|
2019-03-17 05:06:41 +08:00
|
|
|
|
--light-color-commit-gradient-text: #000000;
|
2019-04-18 02:40:55 +08:00
|
|
|
|
--light-color-component-name: #6a51b2;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-component-name-inverted: #ffffff;
|
2019-06-04 03:47:26 +08:00
|
|
|
|
--light-color-component-badge-background: rgba(0, 0, 0, 0.1);
|
2019-05-14 05:51:56 +08:00
|
|
|
|
--light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
|
2019-06-02 09:48:24 +08:00
|
|
|
|
--light-color-component-badge-count: #777d88;
|
|
|
|
|
|
--light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
|
2020-12-23 00:09:29 +08:00
|
|
|
|
--light-color-console-error-badge-text: #ffffff;
|
|
|
|
|
|
--light-color-console-error-background: #fff0f0;
|
|
|
|
|
|
--light-color-console-error-border: #ffd6d6;
|
|
|
|
|
|
--light-color-console-error-icon: #eb3941;
|
|
|
|
|
|
--light-color-console-error-text: #fe2e31;
|
|
|
|
|
|
--light-color-console-warning-badge-text: #000000;
|
|
|
|
|
|
--light-color-console-warning-background: #fffbe5;
|
|
|
|
|
|
--light-color-console-warning-border: #fff5c1;
|
|
|
|
|
|
--light-color-console-warning-icon: #f4bd00;
|
|
|
|
|
|
--light-color-console-warning-text: #64460c;
|
2019-12-19 04:12:34 +08:00
|
|
|
|
--light-color-context-background: rgba(0,0,0,.9);
|
|
|
|
|
|
--light-color-context-background-hover: rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
--light-color-context-background-selected: #178fb9;
|
|
|
|
|
|
--light-color-context-border: #3d424a;
|
|
|
|
|
|
--light-color-context-text: #ffffff;
|
|
|
|
|
|
--light-color-context-text-selected: #ffffff;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-dim: #777d88;
|
|
|
|
|
|
--light-color-dimmer: #cfd1d5;
|
|
|
|
|
|
--light-color-dimmest: #eff0f1;
|
2020-05-22 02:21:22 +08:00
|
|
|
|
--light-color-error-background: hsl(0, 100%, 97%);
|
|
|
|
|
|
--light-color-error-border: hsl(0, 100%, 92%);
|
|
|
|
|
|
--light-color-error-text: #ff0000;
|
2019-04-11 02:03:32 +08:00
|
|
|
|
--light-color-expand-collapse-toggle: #777d88;
|
2020-05-22 02:21:22 +08:00
|
|
|
|
--light-color-link: #0000ff;
|
2019-04-03 06:04:04 +08:00
|
|
|
|
--light-color-modal-background: rgba(255, 255, 255, 0.75);
|
2021-03-19 21:52:59 +08:00
|
|
|
|
--light-color-primitive-hook-badge-background: #e5e5e5;
|
|
|
|
|
|
--light-color-primitive-hook-badge-text: #5f6673;
|
2019-03-11 00:01:05 +08:00
|
|
|
|
--light-color-record-active: #fc3a4b;
|
2019-03-31 00:01:52 +08:00
|
|
|
|
--light-color-record-hover: #3578e5;
|
|
|
|
|
|
--light-color-record-inactive: #0088fa;
|
2019-06-07 01:39:07 +08:00
|
|
|
|
--light-color-scroll-thumb: #c2c2c2;
|
|
|
|
|
|
--light-color-scroll-track: #fafafa;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--light-color-search-match: yellow;
|
|
|
|
|
|
--light-color-search-match-current: #f7923b;
|
2019-06-11 10:10:24 +08:00
|
|
|
|
--light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
|
2019-06-04 00:39:31 +08:00
|
|
|
|
--light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
|
2019-07-25 02:25:11 +08:00
|
|
|
|
--light-color-shadow: rgba(0, 0, 0, 0.25);
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--light-color-tab-selected-border: #0088fa;
|
2019-04-21 23:29:51 +08:00
|
|
|
|
--light-color-text: #000000;
|
2019-07-14 01:05:04 +08:00
|
|
|
|
--light-color-text-invalid: #ff0000;
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--light-color-text-selected: #ffffff;
|
2019-05-02 01:43:40 +08:00
|
|
|
|
--light-color-toggle-background-invalid: #fc3a4b;
|
|
|
|
|
|
--light-color-toggle-background-on: #0088fa;
|
|
|
|
|
|
--light-color-toggle-background-off: #cfd1d5;
|
|
|
|
|
|
--light-color-toggle-text: #ffffff;
|
2019-04-21 05:20:48 +08:00
|
|
|
|
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
|
|
|
|
|
|
--light-color-tooltip-text: #ffffff;
|
2019-02-01 01:42:07 +08:00
|
|
|
|
|
2019-02-12 22:45:00 +08:00
|
|
|
|
/* Dark theme */
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-attribute-name: #9d87d2;
|
2020-05-20 00:42:00 +08:00
|
|
|
|
--dark-color-attribute-name-not-editable: #ededed;
|
2019-06-02 09:05:59 +08:00
|
|
|
|
--dark-color-attribute-name-inverted: #282828;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-attribute-value: #cedae0;
|
2019-06-02 09:05:59 +08:00
|
|
|
|
--dark-color-attribute-value-inverted: #ffffff;
|
2019-02-18 05:07:39 +08:00
|
|
|
|
--dark-color-attribute-editable-value: yellow;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-background: #282c34;
|
2019-06-02 00:34:39 +08:00
|
|
|
|
--dark-color-background-hover: rgba(255, 255, 255, 0.1);
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--dark-color-background-inactive: #3d424a;
|
2019-07-14 01:05:04 +08:00
|
|
|
|
--dark-color-background-invalid: #5c0000;
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--dark-color-background-selected: #178fb9;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-button-background: #282c34;
|
|
|
|
|
|
--dark-color-button-background-focus: #3d424a;
|
2019-04-21 06:44:24 +08:00
|
|
|
|
--dark-color-button: #afb3b9;
|
|
|
|
|
|
--dark-color-button-active: #61dafb;
|
2019-05-25 07:00:12 +08:00
|
|
|
|
--dark-color-button-disabled: #4f5766;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-button-focus: #a2e9fc;
|
2019-04-21 23:23:20 +08:00
|
|
|
|
--dark-color-button-hover: #ededed;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-border: #3d424a;
|
2019-05-16 05:15:14 +08:00
|
|
|
|
--dark-color-commit-did-not-render-fill: #777d88;
|
|
|
|
|
|
--dark-color-commit-did-not-render-fill-text: #000000;
|
|
|
|
|
|
--dark-color-commit-did-not-render-pattern: #666c77;
|
|
|
|
|
|
--dark-color-commit-did-not-render-pattern-text: #ffffff;
|
2019-03-14 05:57:52 +08:00
|
|
|
|
--dark-color-commit-gradient-0: #37afa9;
|
|
|
|
|
|
--dark-color-commit-gradient-1: #63b19e;
|
|
|
|
|
|
--dark-color-commit-gradient-2: #80b393;
|
|
|
|
|
|
--dark-color-commit-gradient-3: #97b488;
|
|
|
|
|
|
--dark-color-commit-gradient-4: #abb67d;
|
|
|
|
|
|
--dark-color-commit-gradient-5: #beb771;
|
|
|
|
|
|
--dark-color-commit-gradient-6: #cfb965;
|
|
|
|
|
|
--dark-color-commit-gradient-7: #dfba57;
|
|
|
|
|
|
--dark-color-commit-gradient-8: #efbb49;
|
|
|
|
|
|
--dark-color-commit-gradient-9: #febc38;
|
2019-03-17 05:06:41 +08:00
|
|
|
|
--dark-color-commit-gradient-text: #000000;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-component-name: #61dafb;
|
2019-06-02 09:48:24 +08:00
|
|
|
|
--dark-color-component-name-inverted: #282828;
|
2019-05-14 05:51:56 +08:00
|
|
|
|
--dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
|
|
|
|
|
|
--dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
|
2019-06-02 09:48:24 +08:00
|
|
|
|
--dark-color-component-badge-count: #8f949d;
|
|
|
|
|
|
--dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
|
2020-12-23 00:09:29 +08:00
|
|
|
|
--dark-color-console-error-badge-text: #000000;
|
|
|
|
|
|
--dark-color-console-error-background: #290000;
|
|
|
|
|
|
--dark-color-console-error-border: #5c0000;
|
|
|
|
|
|
--dark-color-console-error-icon: #eb3941;
|
|
|
|
|
|
--dark-color-console-error-text: #fc7f7f;
|
|
|
|
|
|
--dark-color-console-warning-badge-text: #000000;
|
|
|
|
|
|
--dark-color-console-warning-background: #332b00;
|
|
|
|
|
|
--dark-color-console-warning-border: #665500;
|
|
|
|
|
|
--dark-color-console-warning-icon: #f4bd00;
|
|
|
|
|
|
--dark-color-console-warning-text: #f5f2ed;
|
2019-12-19 04:12:34 +08:00
|
|
|
|
--dark-color-context-background: rgba(255,255,255,.9);
|
|
|
|
|
|
--dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
|
|
|
|
|
|
--dark-color-context-background-selected: #0088fa;
|
|
|
|
|
|
--dark-color-context-border: #eeeeee;
|
|
|
|
|
|
--dark-color-context-text: #000000;
|
|
|
|
|
|
--dark-color-context-text-selected: #ffffff;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-dim: #8f949d;
|
|
|
|
|
|
--dark-color-dimmer: #777d88;
|
|
|
|
|
|
--dark-color-dimmest: #4f5766;
|
2020-05-22 02:21:22 +08:00
|
|
|
|
--dark-color-error-background: #200;
|
|
|
|
|
|
--dark-color-error-border: #900;
|
|
|
|
|
|
--dark-color-error-text: #f55;
|
2019-04-11 02:03:32 +08:00
|
|
|
|
--dark-color-expand-collapse-toggle: #8f949d;
|
2020-05-22 02:21:22 +08:00
|
|
|
|
--dark-color-link: #61dafb;
|
2019-04-03 06:04:04 +08:00
|
|
|
|
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
|
2021-03-19 21:52:59 +08:00
|
|
|
|
--dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
|
|
|
|
|
|
--dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
|
2019-03-11 00:01:05 +08:00
|
|
|
|
--dark-color-record-active: #fc3a4b;
|
2019-03-31 00:01:52 +08:00
|
|
|
|
--dark-color-record-hover: #a2e9fc;
|
|
|
|
|
|
--dark-color-record-inactive: #61dafb;
|
2019-06-07 01:39:07 +08:00
|
|
|
|
--dark-color-scroll-thumb: #afb3b9;
|
|
|
|
|
|
--dark-color-scroll-track: #313640;
|
2019-02-15 05:20:24 +08:00
|
|
|
|
--dark-color-search-match: yellow;
|
|
|
|
|
|
--dark-color-search-match-current: #f7923b;
|
2019-06-04 00:39:31 +08:00
|
|
|
|
--dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
|
|
|
|
|
|
--dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
|
2019-07-25 02:25:11 +08:00
|
|
|
|
--dark-color-shadow: rgba(0, 0, 0, 0.5);
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--dark-color-tab-selected-border: #178fb9;
|
2019-04-21 23:29:51 +08:00
|
|
|
|
--dark-color-text: #ffffff;
|
2019-07-14 01:05:04 +08:00
|
|
|
|
--dark-color-text-invalid: #ff8080;
|
2019-04-21 23:38:58 +08:00
|
|
|
|
--dark-color-text-selected: #ffffff;
|
2019-05-02 01:43:40 +08:00
|
|
|
|
--dark-color-toggle-background-invalid: #fc3a4b;
|
|
|
|
|
|
--dark-color-toggle-background-on: #178fb9;
|
|
|
|
|
|
--dark-color-toggle-background-off: #777d88;
|
|
|
|
|
|
--dark-color-toggle-text: #ffffff;
|
2019-04-21 05:20:48 +08:00
|
|
|
|
--dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
|
--dark-color-tooltip-text: #000000;
|
2019-02-01 01:42:07 +08:00
|
|
|
|
|
2019-04-18 02:40:55 +08:00
|
|
|
|
/* Font smoothing */
|
|
|
|
|
|
--light-font-smoothing: auto;
|
|
|
|
|
|
--dark-font-smoothing: antialiased;
|
|
|
|
|
|
--font-smoothing: auto;
|
|
|
|
|
|
|
2019-02-13 09:41:39 +08:00
|
|
|
|
/* Compact density */
|
2019-04-12 08:19:03 +08:00
|
|
|
|
--compact-font-size-monospace-small: 9px;
|
2019-02-13 09:41:39 +08:00
|
|
|
|
--compact-font-size-monospace-normal: 11px;
|
|
|
|
|
|
--compact-font-size-monospace-large: 15px;
|
2019-04-12 08:19:03 +08:00
|
|
|
|
--compact-font-size-sans-small: 10px;
|
2019-02-13 09:41:39 +08:00
|
|
|
|
--compact-font-size-sans-normal: 12px;
|
|
|
|
|
|
--compact-font-size-sans-large: 14px;
|
|
|
|
|
|
--compact-line-height-data: 18px;
|
2019-06-04 22:24:14 +08:00
|
|
|
|
--compact-root-font-size: 16px;
|
2019-02-05 19:23:37 +08:00
|
|
|
|
|
2019-02-13 09:41:39 +08:00
|
|
|
|
/* Comfortable density */
|
2019-04-12 08:19:03 +08:00
|
|
|
|
--comfortable-font-size-monospace-small: 10px;
|
2019-02-13 09:41:39 +08:00
|
|
|
|
--comfortable-font-size-monospace-normal: 13px;
|
|
|
|
|
|
--comfortable-font-size-monospace-large: 17px;
|
2019-04-12 08:19:03 +08:00
|
|
|
|
--comfortable-font-size-sans-small: 12px;
|
2019-02-13 09:41:39 +08:00
|
|
|
|
--comfortable-font-size-sans-normal: 14px;
|
|
|
|
|
|
--comfortable-font-size-sans-large: 16px;
|
|
|
|
|
|
--comfortable-line-height-data: 22px;
|
2019-06-04 22:24:14 +08:00
|
|
|
|
--comfortable-root-font-size: 20px;
|
2019-02-01 01:42:07 +08:00
|
|
|
|
|
|
|
|
|
|
/* GitHub.com system fonts */
|
|
|
|
|
|
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
|
|
|
|
|
|
Courier, monospace;
|
2019-02-03 05:57:32 +08:00
|
|
|
|
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
|
|
|
|
|
|
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
2019-02-01 01:42:07 +08:00
|
|
|
|
}
|