body.dark-mode{
    --brand: red;
    --color-text: #172B4D;
    --color-text-subtle: #607395;
    --color-text-subtlest: #B0B7C2;
    --color-text-disable: #8993A5;
    --color-text-inverse: #FFFFFF;
    --color-text-label: #607395;
    --color-text-placeholder: #8993A5;
    --color-text-selected: red;
    --color-text-accent-warning: #D97008;
    --color-text-accent-danger: #AE2A19;
    --color-text-accent-success: #22A06B;
    --color-link: red;
    --color-link-press: #0055CC;
    --color-bttn-default-default: #F7F8F9;
    --color-bttn-default-hover: #DCDFE4;
    --color-bttn-default-press: #B3B9C4;
    --color-bttn-subtle-default: #FFFFFF;
    --color-bttn-subtle-hover: #DCDFE4;
    --color-bttn-subtle-press: #B3B9C4;
    --color-bttn-primary-default: red;
    --color-bttn-primary-hover: #0055CC;
    --color-bttn-primary-press: #09326C;
    --color-bttn-warning-default: #E2B203;
    --color-bttn-warning-hover: #E2B203;
    --color-bttn-warning-press: #E2B203;
    --color-bttn-danger-default: #CA3521;
    --color-bttn-danger-hover: #AE2A19;
    --color-bttn-danger-press: #601E16;
    --color-bttn-success-default: #22A06B;
    --color-bttn-success-hover: #1F845A;
    --color-bttn-success-press: #164B35;
    --color-bttn-isselect-default: #E9F2FF;
    --color-bttn-isselect-hover: #CCE0FF;
    --color-bttn-isselect-press: #85B8FF;
    --color-bttn-isdisabled: #F0F2F4;
    --color-bg-input: #FFFFFF;
    --color-bg-input-hover: #F7F8F9;
    --color-border: #DCDFE4;
    --color-border-input: #DCDFE4;
    --color-border-disabled: #F0F2F4;
    --color-border-hover: #626F86;
    --color-border-focus: #388BFF;
    --color-border-warning: #D97008;
    --color-border-danger: #E34935;
    --color-border-success: #22A06B;
    --color-icon: #44546F;
    --color-icon-sutle: #626F86;
    --color-icon-disabled: #8993A5;
    --color-icon-subtlest: #ADBCD8;
    --color-icon-inverse: #FFFFFF;
    --color-icon-selected: #0C66E4;
    --color-icon-warning: #D97008;
    --color-icon-danger: #E34935;
    --color-icon-sucess: #22A06B;
    --color-bg: #FFFFFF;
    --color-bg-neutral: #F7F8F9;
    --color-bg-disabled: #F0F2F4;
    --color-bg-neutral-subtle-hover: #F0F2F4;
    --color-bg-neutral-subtle-press: #DCDFE4;
    --color-bg-neutral-hover: #DCDFE4;
    --color-bg-neutral-press: #B3B9C4;
    --color-bg-neutral-bold: #44546F;
    --color-bg-selected: #E9F2FF;
    --color-bg-selected-hover: #CCE0FF;
    --color-bg-selected-bold: #0C66E4;
    --color-bg-selected-bold-hover: #0055CC;
    --color-bg-accent-danger-subtlest: #FFEDEB;
    --color-bg-danger-bold: #CA3521;
    --color-bg-accent-warning-subtlest: #FFFAE6;
    --color-bg-warning-bold: #E2B203;
    --color-bg-accent-success-subtlest: #DFFCF0;
    --color-bg-success-bold: #22A06B;
    --font-family:Roboto;
    --font-family-mono:Roboto Mono;
    --font-family-condensed:Roboto Condensed;
}
.dark-mode .light-layout{display:block}.dark-mode .dark-layout{display:none}