MTP2.0_WEB/src/assets/styles/theme.css

/* 默认主题 */
 :root {
    --m-grey0: #364048 ;
    --m-grey1: #7a8a94;
    --m-grey2: #88a0ae;
    --m-grey5: #363F45;
    --m-grey6: #272F36;
    --m-grey7: #171A1B;
    --m-grey8: #272E32;
    --m-grey9: #252D34;
    --m-grey10: #394753;
    --m-grey11: #0F1A25;
    --m-grey12: #343D46;
    --m-grey12-hover: rgba(52, 61, 70, .8);
    --m-grey13: #38444F;
    --m-grey13-hover: rgba(56, 68, 79, .8);
    --m-grey14: #2B3F52;
    --m-grey15: #455773;
    --m-grey15-hover: rgba(69, 87, 115, .8);
    --m-grey16: #405066;
    --m-grey16-hover: rgba(64, 80, 102, .8);
    --m-grey18: #1D2327;
    --m-grey19: #162534;
    --m-grey20: #1B2A38;
    --m-grey21: #15202B;
    --m-grey22: #424E59;
    --m-grey22-hover: rgba(66, 78, 89, .8);
    --m-grey23: #48545F;
    --m-grey26: #343e48;

    --m-grey31: #212629;
    --m-grey32: #7a8a94;
    --m-grey33: #88a0ae;
    --m-grey34: #88A0AE;
    --m-grey35: #343D46;
    --m-grey36: #38444F;
    --m-grey37: transpant;
    --m-grey38: #88a0ae;
    --m-grey39: #455773;
    --m-grey39-hover: rgba(69, 87, 115, .8);
    --m-grey40: #405066;
    --m-grey40-hover: rgba(64, 80, 102, .8);
    /* --m-green1: #e8ffef; */

    --m-black0: #242a2e;
    --m-black1: #181e22;
    --m-black2: #0E0E0F;
    --m-black3: #4D5A64;
    --m-black4: #14181B;
    --m-black5: #121415;
    --m-black6: #1B2F41;
    --m-black7: #15293A;
    --m-black7-hover: rgba(21, 41, 58, .8);
    --m-black8: #212629;
    --m-black9: #161A1C;
    --m-black10: #121618;
    --m-black11: #0B1620;
    --m-black12: #13202D;
    --m-black13: #08131F;
    --m-black14: #1F262B;
    --m-black15: #0f161c;
    --m-black16: #181d1f;
    --m-black17: #2E3539;
    --m-black18: rgba(18, 22, 24, 0.36);
    --m-black19: rgb(26 187 207 / 20%);
    --m-black20: #4b5861;
    --m-black21: #182635;
    --m-black22: #1d2f3f;
    --m-black23: #173025;
    --m-black24: #2c3e50;
    --m-black25: #282e34;
    --m-black26: #192125;
    --m-black27: #0E1A25;
    --m-black28: #000c17;
    --m-black29: #2B3F52;
    --m-black30: #15202B;
    --m-black31: #0E0E0F;
    --m-black32: #0E0E0F;

    --m-blue0: #3a87f7;
    --m-blue0-hover: rgba(58, 135, 247, .8);
    --m-blue2: #3270d2;
    --m-blue2-hover: rgba(58, 135, 247, .8);
    --m-blue3: #172B56;
    --m-blue4: #112C43;
    --m-blue5: #084258;
    --m-blue6: #26487C;
    --m-blue6-hover: rgba(38, 72, 124,.8);
    --m-blue7: #29538C;
    --m-blue7-hover: rgba(41, 83, 140, .8);
    --m-blue8: #3163BA;
    --m-blue8-hover: rgba(49, 99, 186, .8);
    --m-blue9: #4179DB;
    --m-blue9-hover: rgba(65, 121, 219, .8);
    --m-blue10: #0C95FF;
    --m-blue10-hover: rgba(12, 149, 255, .8);
    --m-blue11: #1271BA;
    --m-blue12: #1556B5;
    --m-blue13: #193778;
    --m-blue14: #1D2F3F;
    --m-blue15: #0D8AEB;
    --m-blue16: #334c5c;
    --m-blue17: #1F3245;
    --m-blue18:#1b3356;
    --m-blue19: #102442;
    --m-blue20: #122d55;
    --m-blue21: #102e45;

    --body-bg: #e9eef3;
    --m-white0: #ffffff;
    --m-white0-hover: rgba(255, 255, 255, .8);
    --m-white1: #E5E5E5;
    --m-white5: #fffefe;
    --m-white6: #ffffff;
    --m-white7: #ffffff;
    --m-white8: #ffffff;

    --m-green0: #1FF195;
    --m-green1: #10251d;

    --m-red2: #271112;
    
    --m-nodata: url("../images/nodata.png");
} 
/* 白色主题 */
/* :root[theme="light"] { */
:root[theme="light"] { 
    --m-grey0: #5179E2;
    --m-grey1: #7A8A94;
    --m-grey2: #7A8A94;
    --m-grey5: #B2C4DD;
    --m-grey6: #ffffff;
    --m-grey7: #F5FAFC;
    --m-grey8: #D2DAEF;
    --m-grey9: #FFFFFF;
    --m-grey10: #99B5FF;
    --m-grey11: #ffffff;
    --m-grey12: #727C98;
    --m-grey12-hover: rgba(114, 124, 152, .8);
    --m-grey13: #727C98;
    --m-grey13-hover: rgba(114, 124, 152, .8);
    --m-grey14: #ECF2F5;
    --m-grey15: #727C98;
    --m-grey15-hover: rgba(114, 124, 152, .8);
    --m-grey16: #727C98;
    --m-grey16-hover: rgba(114, 124, 152, .8);
    --m-grey17: #808E97;
    --m-grey18: #FFFFFF; /* #ECF2F5 */
    --m-grey19: #F6F8FA;
    --m-grey20: #DAE5EC;
    --m-grey21: #F6F8FA;
    --m-grey22: #E4F5FF;
    --m-grey22-hover: rgba(228, 245, 255, .8);
    --m-grey23: #A5CDFF;
    --m-grey26: #5179E2;

    --m-grey31: #D6DEE3;
    --m-grey32: #FEFFFF;
    --m-grey33: #5E6E78;
    --m-grey34: #808E97;
    --m-grey35: #ffffff;
    --m-grey36: #ffffff;
    --m-grey37: #CBD7DD;
    --m-grey38: #7A8A94;
    --m-grey39: #5179E2;
    --m-grey39-hover: rgba(81, 121, 226, .8);
    --m-grey40: #5179E2;
    --m-grey40-hover: rgba(81, 121, 226, .8);

    --m-black0: #F8FBFF;
    --m-black1: #ECF2F5;
    --m-black2: #FFFFFF;
    --m-black3: #718FAE;
    --m-black4: #EDF2F7;
    --m-black5: #ECF2F5;
    --m-black6: #DAE5EC;
    --m-black7: #D4E0FF;
    --m-black7-hover: rgba(212, 224, 255, .8);
    --m-black8: #DAE5EC;
    --m-black9: #e3ebf1;
    --m-black10: #ddebed;
    --m-black11: #ECF2F5;
    --m-black12: #ECF2F5;
    --m-black13: #ECF2F5;
    --m-black14: #FFFFFF;
    --m-black15: #F6F8FA;
    --m-black16: #CBD7DD;
    --m-black17: #DAE5EC;
    --m-black18: rgba(18, 22, 24, 0.15);
    --m-black19: rgba(246 248 250 / 20%);
    --m-black20: #EDF2F7;
    --m-black21: #182635;
    --m-black22: #ffffff;
    --m-black23: #173025;
    --m-black24: #2c3e50;
    --m-black25: #E4F5FF;
    --m-black26: #3A87F7;
    --m-black27: #ffffff;
    --m-black28: #DDE3E8;
    --m-black29: #2B3F52;
    --m-black30: #15202B;
    --m-black31: #FFFFFF;
    --m-black32: #CED8E6;

    --m-blue0: #5179E2;
    --m-blue0-hover: rgba(81, 121, 226, .8);
    --m-blue2: #5179E2;
    --m-blue2-hover: rgba(81, 121, 226, .8);
    --m-blue3: #DEEFFF;
    --m-blue4: #5179E2;
    --m-blue5: #7497F4;
    --m-blue6: #5179E2;
    --m-blue6-hover: rgba(81, 121, 226, .8);
    --m-blue7: #5179E2;
    --m-blue7-hover: rgba(81, 121, 226, .8);
    --m-blue8: #5179E2;
    --m-blue8-hover: rgba(81, 121, 226, .8);
    --m-blue9: #5179E2;
    --m-blue9-hover: rgba(81, 121, 226, .8);
    --m-blue10: #0C95FF;
    --m-blue10-hover: rgba(12, 149, 255, .8);
    --m-blue11: #ffffff;
    --m-blue12: #D4E0FF;
    --m-blue13: #DEEFFF;
    --m-blue14: #ECF2F5;
    --m-blue15: #0D8AEB;
    --m-blue16: #ADBCC5;
    --m-blue17: #3A87F7;
    --m-blue18:#5179E2;
    --m-blue19: #ECF2F5;
    --m-blue20: #D6E0F0;
    --m-blue21: #5179E2;

    --body-bg: #FFFFFF;
    --m-white0: #ffffff;
    --m-white0-hover: rgba(255, 255, 255, .8);
    --m-white1: #333333;
    --m-white5: #FFFFFF;
    --m-white6: #333333;
    --m-white7: #718FAE;
    --m-white8: #ffffff;

    --m-green0: #00A843;
    --m-green1: #e8ffef;

    --m-red2: #ffe2e2;

    --m-nodata: url("../images/nodata_white.png");
}

/* 黑色主题 */
:root[theme="black"] {
    --m-grey0: #364048 ;
    --m-grey1: #7a8a94;
    --m-grey2: #88a0ae;
    --m-grey5: #363F45;
    --m-grey6: #272F36;
    --m-grey7: #171A1B;
    --m-grey8: #272E32;
    --m-grey9: #252D34;
    --m-grey10: #394753;
    --m-grey11: #0F1A25;
    --m-grey12: #343D46;
    --m-grey12-hover: rgba(52, 61, 70, .8);
    --m-grey13: #38444F;
    --m-grey13-hover: rgba(56, 68, 79, .8);
    --m-grey14: #2B3F52;
    --m-grey15: #455773;
    --m-grey15-hover: rgba(69, 87, 115, .8);
    --m-grey16: #405066;
    --m-grey16-hover: rgba(64, 80, 102, .8);
    --m-grey17: #556772;
    --m-grey18: #1D2327;
    --m-grey19: #162534;
    --m-grey20: #1B2A38;
    --m-grey21: #15202B;
    --m-grey22: #424E59;
    --m-grey22-hover: rgba(66, 78, 89, .8);
    --m-grey23: #48545F;
    --m-grey26: #343e48;

    --m-grey31: #212629;
    --m-grey32: #7a8a94;
    --m-grey33: #88a0ae;
    --m-grey34: #88A0AE;
    --m-grey35: #343D46;
    --m-grey36: #38444F;
    --m-grey37: transpant;
    --m-grey38: #88a0ae;
    --m-grey39: #455773;
    --m-grey39-hover: rgba(69, 87, 115, .8);
    --m-grey40: #405066;
    --m-grey40-hover: rgba(64, 80, 102, .8);
    /* --m-green1: #e8ffef; */

    --m-black0: #242a2e;
    --m-black1: #181e22;
    --m-black2: #0E0E0F;
    --m-black3: #4D5A64;
    --m-black4: #14181B;
    --m-black5: #121415;
    --m-black6: #1B2F41;
    --m-black7: #15293A;
    --m-black7-hover: rgba(21, 41, 58, .8);
    --m-black8: #212629;
    --m-black9: #161A1C;
    --m-black10: #121618;
    --m-black11: #0B1620;
    --m-black12: #13202D;
    --m-black13: #08131F;
    --m-black14: #1F262B;
    --m-black15: #0f161c;
    --m-black16: #181d1f;
    --m-black17: #2E3539;
    --m-black18: rgba(18, 22, 24, 0.36);
    --m-black19: rgb(26 187 207 / 20%);
    --m-black20: #4b5861;
    --m-black21: #182635;
    --m-black22: #1d2f3f;
    --m-black23: #173025;
    --m-black24: #2c3e50;
    --m-black25: #282e34;
    --m-black26: #192125;
    --m-black27: #0E1A25;
    --m-black28: #000c17;
    --m-black29: #2B3F52;
    --m-black30: #15202B;
    --m-black31: #0E0E0F;
    --m-black32: #0E0E0F;

    --m-blue0: #3a87f7;
    --m-blue0-hover: rgba(58, 135, 247, .8);
    --m-blue2: #3270d2;
    --m-blue2-hover: rgba(58, 135, 247, .8);
    --m-blue3: #172B56;
    --m-blue4: #112C43;
    --m-blue5: #084258;
    --m-blue6: #26487C;
    --m-blue6-hover: rgba(38, 72, 124,.8);
    --m-blue7: #29538C;
    --m-blue7-hover: rgba(41, 83, 140, .8);
    --m-blue8: #3163BA;
    --m-blue8-hover: rgba(49, 99, 186, .8);
    --m-blue9: #4179DB;
    --m-blue9-hover: rgba(65, 121, 219, .8);
    --m-blue10: #0C95FF;
    --m-blue10-hover: rgba(12, 149, 255, .8);
    --m-blue11: #1271BA;
    --m-blue12: #1556B5;
    --m-blue13: #193778;
    --m-blue14: #1D2F3F;
    --m-blue15: #0D8AEB;
    --m-blue16: #334c5c;
    --m-blue17: #1F3245;
    --m-blue18:#1b3356;
    --m-blue19: #102442;
    --m-blue20: #122d55;
    --m-blue21: #102e45;

    --body-bg: #e9eef3;
    --m-white0: #ffffff;
    --m-white0-hover: rgba(255, 255, 255, .8);
    --m-white1: #E5E5E5;
    --m-white5: #fffefe;
    --m-white6: #ffffff;
    --m-white7: #ffffff;
    --m-white8: #ffffff;

    --m-green0: #1FF195;
    --m-green1: #10251d;

    --m-red2: #271112;

    --m-nodata: url("../images/nodata.png");
}