pxt-core/react-common/styles/theming/base-theme.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.pxt-theme-root {
    --pxt-header-background: #888888;
    --pxt-header-foreground: #ffffff;
    --pxt-header-background-hover: #777777;
    --pxt-header-foreground-hover: #ffffff;
    --pxt-header-stencil: #ffffff;

    --pxt-primary-background: #aaaaaa;
    --pxt-primary-background-hover: #bbbbbb;
    --pxt-primary-foreground: #ffffff;
    --pxt-primary-foreground-hover: #ffffff;
    --pxt-primary-accent: #888888;

    --pxt-secondary-background: #aaaaaa;
    --pxt-secondary-background-hover: #bbbbbb;
    --pxt-secondary-foreground: #f0f0f0;
    --pxt-secondary-foreground-hover: #f0f0f0;
    --pxt-secondary-accent: #9a9a9a;

    --pxt-tertiary-background: #909090;
    --pxt-tertiary-background-hover: "#777777";
    --pxt-tertiary-foreground: #ffffff;
    --pxt-tertiary-foreground-hover: #ffffff;
    --pxt-tertiary-accent: #9a9a9a;

    --pxt-target-background1: #f0f0f0;
    --pxt-target-foreground1: #333333;
    --pxt-target-background1-hover: #d7d7d7;
    --pxt-target-foreground1-hover: #1a1a1a;
    --pxt-target-stencil1: #e1e1e1;

    --pxt-target-background2: #f0f0f0;
    --pxt-target-foreground2: #333333;
    --pxt-target-background2-hover: #d7d7d7;
    --pxt-target-foreground2-hover: #1a1a1a;
    --pxt-target-stencil2: #e1e1e1;

    --pxt-target-background3: #f0f0f0;
    --pxt-target-foreground3: #333333;
    --pxt-target-background3-hover: #d7d7d7;
    --pxt-target-foreground3-hover: #1a1a1a;
    --pxt-target-stencil3: #e1e1e1;

    --pxt-neutral-background1: #ffffff;
    --pxt-neutral-foreground1: rgba(0, 0, 0, 0.85);
    --pxt-neutral-background1-hover: #e6e6e6;
    --pxt-neutral-foreground1-hover: rgba(0, 0, 0, 0.85);
    --pxt-neutral-stencil1: rgba(136, 136, 136, 0.15);

    --pxt-neutral-background2: #F8F8F8;
    --pxt-neutral-foreground2: rgba(0,0,0,.85);
    --pxt-neutral-background2-hover: #DFDFDF;
    --pxt-neutral-foreground2-hover: rgba(0,0,0,.85);
    --pxt-neutral-stencil2: #e9eef2;

    --pxt-neutral-background3: #4e5758;
    --pxt-neutral-foreground3: #FFFFFF;
    --pxt-neutral-background3-hover: #363c3d;
    --pxt-neutral-foreground3-hover: #FFFFFF;
    --pxt-neutral-stencil3: #FFFFFF;
    --pxt-neutral-background3-alpha90: #4E5758E5; /* Needed for monaco toolbox */

    --pxt-neutral-base: rgba(0, 0, 0, 1);
    --pxt-neutral-alpha0: rgba(0, 0, 0, 0);
    --pxt-neutral-alpha10: rgba(0, 0, 0, 0.1);
    --pxt-neutral-alpha20: rgba(0, 0, 0, 0.2);
    --pxt-neutral-alpha50: rgba(0, 0, 0, 0.5);
    --pxt-neutral-alpha80: rgba(0, 0, 0, 0.8);

    --pxt-link: #3977B4;
    --pxt-link-hover: #204467;
    --pxt-focus-border: #0078D4;

    --pxt-success: #2ecc71;
    --pxt-success-foreground: #FFFFFF;
    --pxt-success-hover: #22be64;
    --pxt-success-alpha10:  #2ecc7119;

    --pxt-warning: #c0a000;
    --pxt-warning-foreground: #FFFFFF;
    --pxt-warning-hover: rgb(153, 132, 0);
    --pxt-warning-alpha10: #c0a00019;

    --pxt-error: #a80000;
    --pxt-error-foreground: #FFFFFF;
    --pxt-error-hover: #8f0000;
    --pxt-error-alpha10: #a8000019;

    --pxt-colors-purple-background: #9932cc;
    --pxt-colors-purple-foreground: #FFFFFF;
    --pxt-colors-purple-hover: #7a28a3;
    --pxt-colors-purple-alpha10: #9932cc19;

    --pxt-colors-orange-background: #ff7f50;
    --pxt-colors-orange-foreground: #FFFFFF;
    --pxt-colors-orange-hover: #ff5a1d;
    --pxt-colors-orange-alpha10: #ff7f5019;

    --pxt-colors-brown-background: #663905;
    --pxt-colors-brown-foreground: #FFFFFF;
    --pxt-colors-brown-hover: #351e03;
    --pxt-colors-brown-alpha10:  #66390519;

    --pxt-colors-blue-background: #0000ff;
    --pxt-colors-blue-foreground: #FFFFFF;
    --pxt-colors-blue-hover: #0000cc;
    --pxt-colors-blue-alpha10:   #0000ff19;

    --pxt-colors-green-background: #2ecc71;
    --pxt-colors-green-foreground: #FFFFFF;
    --pxt-colors-green-hover: #22be64;
    --pxt-colors-green-alpha10:  #2ecc7119;

    --pxt-colors-red-background: #a80000;
    --pxt-colors-red-foreground: #FFFFFF;
    --pxt-colors-red-hover: #8f0000;
    --pxt-colors-red-alpha10:    #a8000019;

    --pxt-colors-teal-background: #008272;
    --pxt-colors-teal-foreground: #FFFFFF;
    --pxt-colors-teal-hover: #004f45;
    --pxt-colors-teal-alpha10:   #00827219;

    --pxt-colors-yellow-background: #c0a000;
    --pxt-colors-yellow-foreground: #FFFFFF;
    --pxt-colors-yellow-hover: rgb(153, 132, 0);
    --pxt-colors-yellow-alpha10: #c0a00019;
}