I really like the color scheme that I see on glitch a lot. Why did you choose these colors in particular, and what inspired them?
2 Likes
Glitch uses a theme called “sugar”
/* Propreties */
--variable-shim-primary: #222;
--variable-shim-primary-background: #fff;
--variable-shim-general-link: #244776;
--variable-shim-secondary: #c3c3c3;
--variable-shim-secondary-background: #f5f5f5;
--variable-shim-secondary-background-hover: #eaeaea;
--variable-shim-secondary-background-active: #e2e2e2;
--variable-shim-text-on-secondary-background: #636363;
--variable-shim-line-on-secondary-background: var(--variable-shim-secondary);
--variable-shim-section-line: #e5e5e5;
--variable-shim-input-border: #ccc;
--variable-shim-input-border-focused: #a2d7ff;
--variable-shim-tertiary: #636363;
--variable-shim-secondary-hover-on-color: rgba(255, 255, 255, .6);
--variable-shim-tooltip-background: rgba(0, 0, 0, .85);
--variable-shim-cta: #83ffcd;
--variable-shim-error: #dc352c;
--variable-shim-warning: #ffaabf;
--variable-shim-warning-background: #ffdadf;
--variable-shim-notification: #7460e1;
--variable-shim-success: #05d458;
--variable-shim-private: #fcf3b0;
--variable-shim-private-secondary: #efe59b;
--variable-shim-line-added: #e2ffe6;
--variable-shim-line-added-active: #8ce298;
--variable-shim-line-removed: #ffe7e7;
--variable-shim-line-removed-active: #ffa3a3;
--variable-shim-rewind-playhead: #7460e1;
--variable-shim-pop-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .27), 0px 1px 1px 0px rgba(0, 0, 0, .15);
--variable-shim-file-logic: #b8145f;
--variable-shim-file-logic-secondary: rgba(184, 20, 95, .1);
--variable-shim-file-data: #661e81;
--variable-shim-file-data-secondary: rgba(102, 30, 129, .1);
--variable-shim-file-info: #3652d3;
--variable-shim-file-info-secondary: rgba(54, 82, 211, .1);
--variable-shim-file-view: #a63adf;
--variable-shim-file-view-secondary: rgba(166, 58, 223, .1);
--variable-shim-file-styles: #cb4a3a;
--variable-shim-file-styles-secondary: rgba(203, 74, 58, .1);
--variable-shim-file-image: #b68a08;
--variable-shim-file-image-secondary: rgba(182, 138, 8, .1);
--variable-shim-file-env: #222;
--variable-shim-file-env-secondary: rgba(34, 34, 34, .2);
--variable-shim-file-env-color: var(--variable-shim-primary);
--variable-shim-file-env-active-color: var(--variable-shim-primary-background);
--variable-shim-file-other: #158085;
--variable-shim-file-other-secondary: rgba(21, 128, 133, .1);
--variable-shim-new-stuff: #a2162d;
--variable-shim-overlay-background: rgba(0, 0, 0, .5);
--variable-shim-keyboard-shortcut: var(--variable-shim-success);
--variable-shim-logs-panel-errors: var(--variable-shim-new-stuff);
--variable-shim-logs-panel-success: var(--variable-shim-file-info);
--variable-shim-selection-highlight: #c4ddff;
--variable-shim-selection-unfocused-highlight: #dcdcdc;
--variable-shim-active-line-color: rgba(0, 0, 0, .05);
--variable-shim-gutter-active-line-color: rgba(0, 0, 0, .03);
--variable-shim-gutter-text-color: var(--variable-shim-secondary);
--variable-shim-comment: #898989;
--variable-shim-keyword: #00119e;
--variable-shim-string: #a2162d;
--variable-shim-number: #15959c;
--variable-shim-operator: #0820b2;
--variable-shim-property: #9445b0;
--variable-shim-definition: var(--variable-shim-primary);
--variable-shim-matching-bracket-highlight: rgba(137, 219, 221, .5);
--variable-shim-matching-tag-highlight: #fffeca;
--variable-shim-onboarding-background: #bfe3ff;
You can change the themes using the dev tools console. There are 2 themes: theme-cosmos and theme-sugar (theme-sugar works way better!)
1 Like
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.