What color palette does glitch use?

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!)