自定义
您能够输入自定义主色等，根据输入的颜色将自动分配一组互补色调
Primary
Secondary
Tertiary
Neutral
Theme
:root, .light-theme {--md-sys-color-primary-rgb: 103,80,164;--md-sys-color-primary: #6750a4;--md-sys-color-on-primary-rgb: 255,255,255;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container-rgb: 233,221,255;--md-sys-color-primary-container: #e9ddff;--md-sys-color-on-primary-container-rgb: 34,0,93;--md-sys-color-on-primary-container: #22005d;--md-sys-color-secondary-rgb: 98,91,113;--md-sys-color-secondary: #625b71;--md-sys-color-on-secondary-rgb: 255,255,255;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container-rgb: 232,222,248;--md-sys-color-secondary-container: #e8def8;--md-sys-color-on-secondary-container-rgb: 30,25,43;--md-sys-color-on-secondary-container: #1e192b;--md-sys-color-tertiary-rgb: 126,82,96;--md-sys-color-tertiary: #7e5260;--md-sys-color-on-tertiary-rgb: 255,255,255;--md-sys-color-on-tertiary: #ffffff;--md-sys-color-tertiary-container-rgb: 255,217,227;--md-sys-color-tertiary-container: #ffd9e3;--md-sys-color-on-tertiary-container-rgb: 49,16,29;--md-sys-color-on-tertiary-container: #31101d;--md-sys-color-error-rgb: 186,26,26;--md-sys-color-error: #ba1a1a;--md-sys-color-on-error-rgb: 255,255,255;--md-sys-color-on-error: #ffffff;--md-sys-color-error-container-rgb: 255,218,214;--md-sys-color-error-container: #ffdad6;--md-sys-color-on-error-container-rgb: 65,0,2;--md-sys-color-on-error-container: #410002;--md-sys-color-background-rgb: 255,251,255;--md-sys-color-background: #fffbff;--md-sys-color-on-background-rgb: 28,27,30;--md-sys-color-on-background: #1c1b1e;--md-sys-color-surface-rgb: 255,251,255;--md-sys-color-surface: #fffbff;--md-sys-color-on-surface-rgb: 28,27,30;--md-sys-color-on-surface: #1c1b1e;--md-sys-color-surface-variant-rgb: 231,224,235;--md-sys-color-surface-variant: #e7e0eb;--md-sys-color-on-surface-variant-rgb: 73,69,78;--md-sys-color-on-surface-variant: #49454e;--md-sys-color-outline-rgb: 122,117,127;--md-sys-color-outline: #7a757f;--md-sys-color-outline-variant-rgb: 202,196,207;--md-sys-color-outline-variant: #cac4cf;--md-sys-color-shadow-rgb: 0,0,0;--md-sys-color-shadow: #000000;--md-sys-color-scrim-rgb: 0,0,0;--md-sys-color-scrim: #000000;--md-sys-color-inverse-surface-rgb: 49,48,51;--md-sys-color-inverse-surface: #313033;--md-sys-color-inverse-on-surface-rgb: 244,239,244;--md-sys-color-inverse-on-surface: #f4eff4;--md-sys-color-inverse-primary-rgb: 207,188,255;--md-sys-color-inverse-primary: #cfbcff;}.dark-theme {--md-sys-color-primary-rgb: 207,188,255;--md-sys-color-primary: #cfbcff;--md-sys-color-on-primary-rgb: 56,30,114;--md-sys-color-on-primary: #381e72;--md-sys-color-primary-container-rgb: 79,55,138;--md-sys-color-primary-container: #4f378a;--md-sys-color-on-primary-container-rgb: 233,221,255;--md-sys-color-on-primary-container: #e9ddff;--md-sys-color-secondary-rgb: 203,194,219;--md-sys-color-secondary: #cbc2db;--md-sys-color-on-secondary-rgb: 51,45,65;--md-sys-color-on-secondary: #332d41;--md-sys-color-secondary-container-rgb: 74,68,88;--md-sys-color-secondary-container: #4a4458;--md-sys-color-on-secondary-container-rgb: 232,222,248;--md-sys-color-on-secondary-container: #e8def8;--md-sys-color-tertiary-rgb: 239,184,200;--md-sys-color-tertiary: #efb8c8;--md-sys-color-on-tertiary-rgb: 74,37,50;--md-sys-color-on-tertiary: #4a2532;--md-sys-color-tertiary-container-rgb: 99,59,72;--md-sys-color-tertiary-container: #633b48;--md-sys-color-on-tertiary-container-rgb: 255,217,227;--md-sys-color-on-tertiary-container: #ffd9e3;--md-sys-color-error-rgb: 255,180,171;--md-sys-color-error: #ffb4ab;--md-sys-color-on-error-rgb: 105,0,5;--md-sys-color-on-error: #690005;--md-sys-color-error-container-rgb: 147,0,10;--md-sys-color-error-container: #93000a;--md-sys-color-on-error-container-rgb: 255,180,171;--md-sys-color-on-error-container: #ffb4ab;--md-sys-color-background-rgb: 28,27,30;--md-sys-color-background: #1c1b1e;--md-sys-color-on-background-rgb: 230,225,230;--md-sys-color-on-background: #e6e1e6;--md-sys-color-surface-rgb: 28,27,30;--md-sys-color-surface: #1c1b1e;--md-sys-color-on-surface-rgb: 230,225,230;--md-sys-color-on-surface: #e6e1e6;--md-sys-color-surface-variant-rgb: 73,69,78;--md-sys-color-surface-variant: #49454e;--md-sys-color-on-surface-variant-rgb: 202,196,207;--md-sys-color-on-surface-variant: #cac4cf;--md-sys-color-outline-rgb: 148,143,153;--md-sys-color-outline: #948f99;--md-sys-color-outline-variant-rgb: 73,69,78;--md-sys-color-outline-variant: #49454e;--md-sys-color-shadow-rgb: 0,0,0;--md-sys-color-shadow: #000000;--md-sys-color-scrim-rgb: 0,0,0;--md-sys-color-scrim: #000000;--md-sys-color-inverse-surface-rgb: 230,225,230;--md-sys-color-inverse-surface: #e6e1e6;--md-sys-color-inverse-on-surface-rgb: 49,48,51;--md-sys-color-inverse-on-surface: #313033;--md-sys-color-inverse-primary-rgb: 103,80,164;--md-sys-color-inverse-primary: #6750a4;}
Surface
:root, .light-theme {--md-sys-color-surface-0-rgb: 255,251,255;--md-sys-color-surface-0: #fffbff;--md-sys-color-surface-1-rgb: 248,243,251;--md-sys-color-surface-1: #f8f3fb;--md-sys-color-surface-2-rgb: 243,238,248;--md-sys-color-surface-2: #f3eef8;--md-sys-color-surface-3-rgb: 238,232,245;--md-sys-color-surface-3: #eee8f5;--md-sys-color-surface-4-rgb: 237,231,244;--md-sys-color-surface-4: #ede7f4;--md-sys-color-surface-5-rgb: 234,228,243;--md-sys-color-surface-5: #eae4f3;}.dark-theme {--md-sys-color-surface-0-rgb: 28,27,30;--md-sys-color-surface-0: #1c1b1e;--md-sys-color-surface-1-rgb: 36,35,41;--md-sys-color-surface-1: #242329;--md-sys-color-surface-2-rgb: 42,40,48;--md-sys-color-surface-2: #2a2830;--md-sys-color-surface-3-rgb: 48,45,55;--md-sys-color-surface-3: #302d37;--md-sys-color-surface-4-rgb: 49,46,56;--md-sys-color-surface-4: #312e38;--md-sys-color-surface-5-rgb: 53,49,61;--md-sys-color-surface-5: #35313d;}
Palettes
:root{--md-ref-palette-primary-0: #000000;--md-ref-palette-primary-10: #22005d;--md-ref-palette-primary-20: #381e72;--md-ref-palette-primary-30: #4f378a;--md-ref-palette-primary-40: #6750a4;--md-ref-palette-primary-50: #8069bf;--md-ref-palette-primary-60: #9a83db;--md-ref-palette-primary-70: #b69df8;--md-ref-palette-primary-80: #cfbcff;--md-ref-palette-primary-90: #e9ddff;--md-ref-palette-primary-95: #f6eeff;--md-ref-palette-primary-99: #fffbff;--md-ref-palette-primary-100: #ffffff;--md-ref-palette-secondary-0: #000000;--md-ref-palette-secondary-10: #1e192b;--md-ref-palette-secondary-20: #332d41;--md-ref-palette-secondary-30: #4a4458;--md-ref-palette-secondary-40: #625b71;--md-ref-palette-secondary-50: #7b748a;--md-ref-palette-secondary-60: #958da4;--md-ref-palette-secondary-70: #b0a7c0;--md-ref-palette-secondary-80: #cbc2db;--md-ref-palette-secondary-90: #e8def8;--md-ref-palette-secondary-95: #f6eeff;--md-ref-palette-secondary-99: #fffbff;--md-ref-palette-secondary-100: #ffffff;--md-ref-palette-tertiary-0: #000000;--md-ref-palette-tertiary-10: #31101d;--md-ref-palette-tertiary-20: #4a2532;--md-ref-palette-tertiary-30: #633b48;--md-ref-palette-tertiary-40: #7e5260;--md-ref-palette-tertiary-50: #996a79;--md-ref-palette-tertiary-60: #b58392;--md-ref-palette-tertiary-70: #d29dad;--md-ref-palette-tertiary-80: #efb8c8;--md-ref-palette-tertiary-90: #ffd9e3;--md-ref-palette-tertiary-95: #ffecf0;--md-ref-palette-tertiary-99: #fffbff;--md-ref-palette-tertiary-100: #ffffff;--md-ref-palette-neutral-0: #000000;--md-ref-palette-neutral-10: #1c1b1e;--md-ref-palette-neutral-20: #313033;--md-ref-palette-neutral-30: #48464a;--md-ref-palette-neutral-40: #605d62;--md-ref-palette-neutral-50: #79767a;--md-ref-palette-neutral-60: #938f94;--md-ref-palette-neutral-70: #aeaaae;--md-ref-palette-neutral-80: #cac5ca;--md-ref-palette-neutral-90: #e6e1e6;--md-ref-palette-neutral-95: #f4eff4;--md-ref-palette-neutral-99: #fffbff;--md-ref-palette-neutral-100: #ffffff;--md-ref-palette-neutral-variant-0: #000000;--md-ref-palette-neutral-variant-10: #1d1a22;--md-ref-palette-neutral-variant-20: #322f38;--md-ref-palette-neutral-variant-30: #49454e;--md-ref-palette-neutral-variant-40: #615d66;--md-ref-palette-neutral-variant-50: #7a757f;--md-ref-palette-neutral-variant-60: #948f99;--md-ref-palette-neutral-variant-70: #afa9b4;--md-ref-palette-neutral-variant-80: #cac4cf;--md-ref-palette-neutral-variant-90: #e7e0eb;--md-ref-palette-neutral-variant-95: #f5eefa;--md-ref-palette-neutral-variant-99: #fffbff;--md-ref-palette-neutral-variant-100: #ffffff;--md-ref-palette-error-0: #000000;--md-ref-palette-error-10: #410002;--md-ref-palette-error-20: #690005;--md-ref-palette-error-30: #93000a;--md-ref-palette-error-40: #ba1a1a;--md-ref-palette-error-50: #de3730;--md-ref-palette-error-60: #ff5449;--md-ref-palette-error-70: #ff897d;--md-ref-palette-error-80: #ffb4ab;--md-ref-palette-error-90: #ffdad6;--md-ref-palette-error-95: #ffedea;--md-ref-palette-error-99: #fffbff;--md-ref-palette-error-100: #ffffff;}