COLORS.md

Light Theme Colors

Default color values for light layouts:

.replit-ui-theme-root.light {
    --color-background-1: #ffffff;
    --color-background-2: #f6f6f6;
    --color-background-3: #eeeeee;
    --color-control-1: #e0e0e0;
    --color-control-2: #e9e9e9;
    --color-control-3: #f3f3f3;
    --color-border: #e0e0e0;
    --color-foreground-1: #363636;
    --color-foreground-2: #6f6f6f;
    --color-foreground-3: #949494;
    --color-foreground-4: #b7b7b7;
    --color-foreground-transparent-1: rgba(255, 255, 255, 0.48);
    --color-foreground-transparent-2: rgba(255, 255, 255, 0.24);
    --color-foreground-transparent-3: rgba(255, 255, 255, 0.12);
    --color-primary-1: #3485e4;
    --color-primary-2: #337ad1;
    --color-primary-3: #3272c2;
    --color-primary-4: #316ab4;
    --color-primary-transparent-1: rgba(52, 133, 228, 0.48);
    --color-primary-transparent-2: rgba(52, 133, 228, 0.24);
    --color-primary-transparent-3: rgba(52, 133, 228, 0.12);
    --color-negative-1: #ff491c;
    --color-negative-2: #e9441b;
    --color-negative-3: #d8411b;
    --color-negative-4: #c93d1a;
    --color-negative-transparent-1: rgba(255, 73, 28, 0.48);
    --color-negative-transparent-2: rgba(255, 73, 28, 0.24);
    --color-negative-transparent-3: rgba(255, 73, 28, 0.12);
    --color-warning-1: #eb6404;
    --color-warning-2: #d65c08;
    --color-warning-3: #c7560b;
    --color-warning-4: #b8510d;
    --color-warning-transparent-1: rgba(242, 103, 2, 0.48);
    --color-warning-transparent-2: rgba(242, 103, 2, 0.24);
    --color-warning-transparent-3: rgba(242, 103, 2, 0.12);
    --color-positive-1: #21a243;
    --color-positive-2: #21953e;
    --color-positive-3: #228a3a;
    --color-positive-4: #228037;
    --color-positive-transparent-1: rgba(24, 204, 81, 0.48);
    --color-positive-transparent-2: rgba(24, 204, 81, 0.24);
    --color-positive-transparent-3: rgba(24, 204, 81, 0.12);
}

Dark Theme Colors

Default color values for dark layouts:

.replit-ui-theme-root.dark {
    --color-background-1: #1d2333;
    --color-background-2: #171d2d;
    --color-background-3: #0e1525;
    --color-control-1: #313646;
    --color-control-2: #2b3140;
    --color-control-3: #262b3b;
    --color-border: #313646;
    --color-foreground-1: #e1e2e4;
    --color-foreground-2: #90939c;
    --color-foreground-3: #696d78;
    --color-foreground-4: #4e525f;
    --color-foreground-transparent-1: rgba(14, 21, 37, 0.48);
    --color-foreground-transparent-2: rgba(14, 21, 37, 0.24);
    --color-foreground-transparent-3: rgba(14, 21, 37, 0.12);
    --color-primary-1: #3485e4;
    --color-primary-2: #337bd2;
    --color-primary-3: #3273c4;
    --color-primary-4: #316cb8;
    --color-primary-transparent-1: rgba(52, 133, 228, 0.48);
    --color-primary-transparent-2: rgba(52, 133, 228, 0.24);
    --color-primary-transparent-3: rgba(52, 133, 228, 0.12);
    --color-negative-1: #ff491c;
    --color-negative-2: #eb451b;
    --color-negative-3: #db411b;
    --color-negative-4: #cd3e1a;
    --color-negative-transparent-1: rgba(255, 73, 28, 0.48);
    --color-negative-transparent-2: rgba(255, 73, 28, 0.24);
    --color-negative-transparent-3: rgba(255, 73, 28, 0.12);
    --color-warning-1: #f26702;
    --color-warning-2: #de5f07;
    --color-warning-3: #ce590a;
    --color-warning-4: #c0540c;
    --color-warning-transparent-1: rgba(242, 103, 2, 0.48);
    --color-warning-transparent-2: rgba(242, 103, 2, 0.24);
    --color-warning-transparent-3: rgba(242, 103, 2, 0.12);
    --color-positive-1: #20ab46;
    --color-positive-2: #219d41;
    --color-positive-3: #22923d;
    --color-positive-4: #22883a;
    --color-positive-transparent-1: rgba(24, 204, 81, 0.48);
    --color-positive-transparent-2: rgba(24, 204, 81, 0.24);
    --color-positive-transparent-3: rgba(24, 204, 81, 0.12);
}