body.mgd-theme {
    /* 亮色主题允许的色值 */
    --common-color-bright-1: #333333;
    --common-color-bright-2: #444444;
    --common-color-bright-3: #666666;
    --common-color-bright-4: #999999;
    --common-color-bright-5: #cccccc;
    --common-color-bright-6: #dddddd;
    --common-color-bright-7: #eeeeee;
    --common-color-bright-8: #409eff;
    --common-color-bright-9: #1393ff;
    --common-color-bright-10: #409eff66;
    --common-color-bright-11: #ffffff33;
    --common-color-bright-12: #ffffff;
    --common-color-bright-13: #409eff33;
    /* bright color end */


    
    /* 暗色主题允许的色值 */
    --common-color-dark-1: #000000;
    --common-color-dark-2: #1a1a1a;
    --common-color-dark-3: #222222;
    --common-color-dark-4: #2a2a2a;
    --common-color-dark-5: #333333;
    --common-color-dark-6: #444444;
    --common-color-dark-7: #666666;
    --common-color-dark-8: #999999;
    --common-color-dark-9: #cccccc;
    --common-color-dark-10: #ffffff;
    --common-color-dark-11: #ff9c25;
    --common-color-dark-12: #996633;
    --common-color-dark-13: #cccccc33; /* #ccc 0.2*/
    --common-color-dark-14: #ff9c2533; /* ff9c25 0.2*/
    --common-color-dark-15: #dddddd;
    /* dark color end*/
}

/* TODO 保证亮色和暗色的变量对齐*/
body.mgd-theme.mgd-theme__bright {
    --default-font-color: var(--common-color-bright-1);
    /* 此变量被废弃，不建议使用 */
    --default-font-color-hightlight: var(--common-color-bright-2);
    --default-border-color: var(--common-color-bright-5);
    --default-placeholder-color: var(--common-color-bright-4);

    --button-color-background: var(--common-color-bright-12);
    --button-color-border: var(--common-color-bright-5);
    --button-color-font: var(--default-font-color);

    --button-color-hover-background: var(--common-color-bright-6);
    --button-color-hover-border: var(--common-color-bright-5);
    --button-color-hover-font: var(--common-color-bright-1);
    --button-color-disabled-font: var(--common-color-bright-9);

    
    --button-primary-color-background: var(--common-color-bright-11);
    --button-primary-color-border: var(--common-color-bright-12);
    --button-primary-color-font: var(--common-color-bright-12);

    /* 这两个是亮色主题下的变种，在暗色主题下无此变种 */
    --button-primary-bright1-color-background: var(--common-color-bright-13);
    --button-primary-bright1-border: var(--common-color-bright-8);
    --button-primary-bright1-font: var(--common-color-bright-8);

    --button-primary-bright2-color-background: var(--common-color-bright-12);
    --button-primary-bright2-border: var(--common-color-bright-5);
    --button-primary-bright2-font: var(--common-color-bright-1);

    --button-primary-bright3-color-background: var(--common-color-bright-13);
    --button-primary-bright3-border: var(--common-color-bright-8);
    --button-primary-bright3-font: var(--common-color-bright-8);
    
    --button-primary-color-hover-background: var(--common-color-bright-8);
    --button-primary-color-hover-border: var(--common-color-bright-8);
    --button-primary-color-hover-font: var(--common-color-bright-12);
    
    --button-colour-color-background: var(--common-color-bright-8);
    --button-colour-color-border: var(--common-color-bright-8);
    --button-colour-color-font: var(--common-color-bright-7);

    --button-colour-color-hover-background: var(--common-color-bright-9);
    --button-colour-color-hover-border: var(--common-color-bright-9);
    --button-colour-color-hover-font: var(--common-color-bright-7);

    /* 下拉框 */
    --input-color-font-default: var(--default-font-color);
    --input-color-background-default: var(--common-color-bright-12);
    --input-color-background-disabled: var(--common-color-bright-7);
    --input-color-border-default: var(--common-color-bright-5);
    --input-color-border-focus: var(--common-color-bright-12);
    --input-color-placeholder: var(--common-color-bright-4);

    --select-color-font-default: var(--default-font-color);
    --select-color-background-default: var(--common-color-bright-12);
    --select-color-border-default: var(--common-color-bright-5);
    /* end */
   
    /* window */
    --window-font-color: var(--default-font-color);
    --window-background-color: var(--common-color-bright-7);
    --window-background-color2: var(--common-color-bright-12);
    --window-border-color: var(--common-color-bright-5);
    --window-header-background-color: var(--common-color-bright-7);
    /* window end */

    /* color picker */
    --color-picker-background: var(--common-color-bright-6);
    --color-picker-trangle: var(--common-color-bright-1);
    --color-picker-border: var(--common-color-bright-5);
    --input-color-picker-border: var(--common-color-bright-12);
    /* color picker end */

    /* checkbox */
    --color-checkbox-border: var(--common-color-bright-5);
    --color-checkbox-unchecked-backgound: var(--common-color-bright-6);
    --color-checkbox-checked-backgound: var(--common-color-bright-8);
    --color-checkbox-checked-hover: var(--common-color-dark-10);
    /* checkbox end */

    /* switch */
    --input-switch-unchecked-background: var(--common-color-bright-6);
    --input-switch-unchecked-circle: var(--common-color-bright-6);
    --input-switch-checked-background: color-mix(in srgb, var(--common-color-bright-8) 60%, transparent);
    --input-switch-checked-circle: var(--common-color-bright-8);
    /* switch end */

    --link-color-default: var(--common-color-bright-8);
}
body.mgd-theme.mgd-theme__dark {
    --default-font-color: var(--common-color-dark-9); /* #cccccc */
    /* 此变量被废弃，不建议使用 */
    --default-font-color-hightlight: var(--common-color-dark-10); /* #ffffff */
    --default-border-color: var(--common-color-dark-6);
    --default-placeholder-color: var(--common-color-dark-7);
    
    --button-color-background: var(--common-color-dark-6);
    --button-color-border: var(--common-color-dark-7);
    --button-color-font: var(--default-font-color);

    --button-color-hover-background: var(--common-color-dark-7);
    --button-color-hover-border: var(--common-color-dark-8);
    --button-color-hover-font: var(--common-color-dark-10);

    --button-color-disabled-font: var(--common-color-dark-7);

    --button-primary-color-background: var(--common-color-dark-13);
    --button-primary-color-border: var(--common-color-dark-9);
    --button-primary-color-font: var(--default-font-color-hightlight);

    --button-primary-bright1-color-background: var(--button-primary-color-background);
    --button-primary-bright1-border: var(--button-primary-color-border);
    --button-primary-bright1-font: var(--button-primary-color-font);

    --button-primary-bright2-color-background: var(--button-primary-color-background);
    --button-primary-bright2-border: var(--button-primary-color-border);
    --button-primary-bright2-font: var(--button-primary-color-font);

    --button-primary-bright3-color-background: var(--common-color-dark-6);
    --button-primary-bright3-border: var(--common-color-dark-7);
    --button-primary-bright3-font: var(--default-font-color);

    --button-primary-color-hover-background: var(--common-color-dark-11);
    --button-primary-color-hover-border: var(--common-color-dark-11);
    --button-primary-color-hover-font: var(--default-font-color-hightlight);

    /* 面包屑导航的颜色变量 */
    --breadcrumb-color-font-default: var(--default-font-color);
    --breadcrumb-color-font-hover: var(--common-color-dark-10);
    --breadcrumb-color-separator-default: var(--common-color-dark-8);
    /* 分页器 */
    --pagination-color-font-default: var(--default-font-color);
    --pagination-color-border-default: var(--common-color-dark-7);
    --pagination-color-background-btn: var(--common-color-dark-6);
    --pagination-color-num-current-background: var(--common-color-dark-9);
    --pagination-color-num-current-font: var(--common-color-dark-5);


    /* 下拉框 */
    --input-color-font-default: var(--default-font-color);
    --input-color-background-default: var(--common-color-dark-4);
    --input-color-border-default: var(--common-color-dark-6);
    --input-color-border-focus: var(--common-color-dark-11);
    --input-color-placeholder: var(--common-color-dark-7);

    --select-color-font-default: var(--default-font-color);
    --select-color-background-default: var(--common-color-dark-4);
    --select-color-border-default: var(--common-color-dark-6);
    /* end */
    
    /* window */
    --window-font-color: var(--default-font-color);
    --window-background-color: var(--common-color-dark-5);
    --window-background-color2: var(--common-color-dark-5);
    --window-border-color: var(--common-color-dark-6);
    --window-header-background-color: var(--common-color-dark-3);
    /* window end */

    /* color picker */
    --color-picker-background: var(--common-color-dark-6);
    --color-picker-trangle: var(--common-color-dark-9);
    --color-picker-border: var(--common-color-dark-6);
    --input-color-picker-border: var(--common-color-dark-6);
    /* color picker end */

    /* checkbox */
    --color-checkbox-border: var(--common-color-dark-7);
    --color-checkbox-unchecked-backgound: var(--common-color-dark-6);
    --color-checkbox-checked-backgound: var(--common-color-dark-11);
    --color-checkbox-checked-hover: var(--common-color-dark-10);
    /* checkbox end */

    /* switch */
    --input-switch-unchecked-background: var(--common-color-dark-6);
    --input-switch-unchecked-circle: var(--common-color-dark-15);
    --input-switch-checked-background: color-mix(in srgb, var(--common-color-dark-11) 60%, transparent);
    --input-switch-checked-circle: var(--common-color-dark-11);
    /* switch end */

    --link-color-default: var(--common-color-dark-11);
    --mugeda-primary-color: var(--common-color-dark-11);
}