动态颜色
通过获取图片主色调自动生成主题方案
^_^ 我只吃小于2MB的图片哦
Theme
:root, .light-theme {--md-sys-color-primary-rgb: 0,89,199;--md-sys-color-primary: #0059c7;--md-sys-color-on-primary-rgb: 255,255,255;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container-rgb: 217,226,255;--md-sys-color-primary-container: #d9e2ff;--md-sys-color-on-primary-container-rgb: 0,26,67;--md-sys-color-on-primary-container: #001a43;--md-sys-color-secondary-rgb: 87,94,113;--md-sys-color-secondary: #575e71;--md-sys-color-on-secondary-rgb: 255,255,255;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container-rgb: 219,226,249;--md-sys-color-secondary-container: #dbe2f9;--md-sys-color-on-secondary-container-rgb: 20,27,44;--md-sys-color-on-secondary-container: #141b2c;--md-sys-color-tertiary-rgb: 114,85,115;--md-sys-color-tertiary: #725573;--md-sys-color-on-tertiary-rgb: 255,255,255;--md-sys-color-on-tertiary: #ffffff;--md-sys-color-tertiary-container-rgb: 252,215,251;--md-sys-color-tertiary-container: #fcd7fb;--md-sys-color-on-tertiary-container-rgb: 42,19,45;--md-sys-color-on-tertiary-container: #2a132d;--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: 254,251,255;--md-sys-color-background: #fefbff;--md-sys-color-on-background-rgb: 27,27,31;--md-sys-color-on-background: #1b1b1f;--md-sys-color-surface-rgb: 254,251,255;--md-sys-color-surface: #fefbff;--md-sys-color-on-surface-rgb: 27,27,31;--md-sys-color-on-surface: #1b1b1f;--md-sys-color-surface-variant-rgb: 225,226,236;--md-sys-color-surface-variant: #e1e2ec;--md-sys-color-on-surface-variant-rgb: 68,70,79;--md-sys-color-on-surface-variant: #44464f;--md-sys-color-outline-rgb: 117,119,128;--md-sys-color-outline: #757780;--md-sys-color-outline-variant-rgb: 197,198,208;--md-sys-color-outline-variant: #c5c6d0;--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: 48,48,52;--md-sys-color-inverse-surface: #303034;--md-sys-color-inverse-on-surface-rgb: 242,240,244;--md-sys-color-inverse-on-surface: #f2f0f4;--md-sys-color-inverse-primary-rgb: 175,198,255;--md-sys-color-inverse-primary: #afc6ff;}.dark-theme {--md-sys-color-primary-rgb: 175,198,255;--md-sys-color-primary: #afc6ff;--md-sys-color-on-primary-rgb: 0,45,108;--md-sys-color-on-primary: #002d6c;--md-sys-color-primary-container-rgb: 0,67,152;--md-sys-color-primary-container: #004398;--md-sys-color-on-primary-container-rgb: 217,226,255;--md-sys-color-on-primary-container: #d9e2ff;--md-sys-color-secondary-rgb: 191,198,220;--md-sys-color-secondary: #bfc6dc;--md-sys-color-on-secondary-rgb: 41,48,66;--md-sys-color-on-secondary: #293042;--md-sys-color-secondary-container-rgb: 63,71,89;--md-sys-color-secondary-container: #3f4759;--md-sys-color-on-secondary-container-rgb: 219,226,249;--md-sys-color-on-secondary-container: #dbe2f9;--md-sys-color-tertiary-rgb: 223,187,222;--md-sys-color-tertiary: #dfbbde;--md-sys-color-on-tertiary-rgb: 64,39,67;--md-sys-color-on-tertiary: #402743;--md-sys-color-tertiary-container-rgb: 89,62,90;--md-sys-color-tertiary-container: #593e5a;--md-sys-color-on-tertiary-container-rgb: 252,215,251;--md-sys-color-on-tertiary-container: #fcd7fb;--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: 27,27,31;--md-sys-color-background: #1b1b1f;--md-sys-color-on-background-rgb: 227,226,230;--md-sys-color-on-background: #e3e2e6;--md-sys-color-surface-rgb: 27,27,31;--md-sys-color-surface: #1b1b1f;--md-sys-color-on-surface-rgb: 227,226,230;--md-sys-color-on-surface: #e3e2e6;--md-sys-color-surface-variant-rgb: 68,70,79;--md-sys-color-surface-variant: #44464f;--md-sys-color-on-surface-variant-rgb: 197,198,208;--md-sys-color-on-surface-variant: #c5c6d0;--md-sys-color-outline-rgb: 143,144,153;--md-sys-color-outline: #8f9099;--md-sys-color-outline-variant-rgb: 68,70,79;--md-sys-color-outline-variant: #44464f;--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: 227,226,230;--md-sys-color-inverse-surface: #e3e2e6;--md-sys-color-inverse-on-surface-rgb: 48,48,52;--md-sys-color-inverse-on-surface: #303034;--md-sys-color-inverse-primary-rgb: 0,89,199;--md-sys-color-inverse-primary: #0059c7;}
Surface
:root, .light-theme {--md-sys-color-surface-0-rgb: 254,251,255;--md-sys-color-surface-0: #fefbff;--md-sys-color-surface-1-rgb: 242,243,252;--md-sys-color-surface-1: #f2f3fc;--md-sys-color-surface-2-rgb: 234,238,251;--md-sys-color-surface-2: #eaeefb;--md-sys-color-surface-3-rgb: 226,233,249;--md-sys-color-surface-3: #e2e9f9;--md-sys-color-surface-4-rgb: 224,232,248;--md-sys-color-surface-4: #e0e8f8;--md-sys-color-surface-5-rgb: 219,229,247;--md-sys-color-surface-5: #dbe5f7;}.dark-theme {--md-sys-color-surface-0-rgb: 27,27,31;--md-sys-color-surface-0: #1b1b1f;--md-sys-color-surface-1-rgb: 34,35,42;--md-sys-color-surface-1: #22232a;--md-sys-color-surface-2-rgb: 39,40,49;--md-sys-color-surface-2: #272831;--md-sys-color-surface-3-rgb: 43,46,56;--md-sys-color-surface-3: #2b2e38;--md-sys-color-surface-4-rgb: 44,47,57;--md-sys-color-surface-4: #2c2f39;--md-sys-color-surface-5-rgb: 47,50,62;--md-sys-color-surface-5: #2f323e;}
Palettes
:root{--md-ref-palette-primary-0: #000000;--md-ref-palette-primary-10: #001a43;--md-ref-palette-primary-20: #002d6c;--md-ref-palette-primary-30: #004398;--md-ref-palette-primary-40: #0059c7;--md-ref-palette-primary-50: #0070f7;--md-ref-palette-primary-60: #528dff;--md-ref-palette-primary-70: #83aaff;--md-ref-palette-primary-80: #afc6ff;--md-ref-palette-primary-90: #d9e2ff;--md-ref-palette-primary-95: #edf0ff;--md-ref-palette-primary-99: #fefbff;--md-ref-palette-primary-100: #ffffff;--md-ref-palette-secondary-0: #000000;--md-ref-palette-secondary-10: #141b2c;--md-ref-palette-secondary-20: #293042;--md-ref-palette-secondary-30: #3f4759;--md-ref-palette-secondary-40: #575e71;--md-ref-palette-secondary-50: #70778b;--md-ref-palette-secondary-60: #8990a5;--md-ref-palette-secondary-70: #a4abc0;--md-ref-palette-secondary-80: #bfc6dc;--md-ref-palette-secondary-90: #dbe2f9;--md-ref-palette-secondary-95: #edf0ff;--md-ref-palette-secondary-99: #fefbff;--md-ref-palette-secondary-100: #ffffff;--md-ref-palette-tertiary-0: #000000;--md-ref-palette-tertiary-10: #2a132d;--md-ref-palette-tertiary-20: #402743;--md-ref-palette-tertiary-30: #593e5a;--md-ref-palette-tertiary-40: #725573;--md-ref-palette-tertiary-50: #8c6d8c;--md-ref-palette-tertiary-60: #a786a7;--md-ref-palette-tertiary-70: #c3a0c2;--md-ref-palette-tertiary-80: #dfbbde;--md-ref-palette-tertiary-90: #fcd7fb;--md-ref-palette-tertiary-95: #ffebfb;--md-ref-palette-tertiary-99: #fffbff;--md-ref-palette-tertiary-100: #ffffff;--md-ref-palette-neutral-0: #000000;--md-ref-palette-neutral-10: #1b1b1f;--md-ref-palette-neutral-20: #303034;--md-ref-palette-neutral-30: #46464a;--md-ref-palette-neutral-40: #5e5e62;--md-ref-palette-neutral-50: #77777a;--md-ref-palette-neutral-60: #919094;--md-ref-palette-neutral-70: #acabaf;--md-ref-palette-neutral-80: #c7c6ca;--md-ref-palette-neutral-90: #e3e2e6;--md-ref-palette-neutral-95: #f2f0f4;--md-ref-palette-neutral-99: #fefbff;--md-ref-palette-neutral-100: #ffffff;--md-ref-palette-neutral-variant-0: #000000;--md-ref-palette-neutral-variant-10: #191b23;--md-ref-palette-neutral-variant-20: #2e3038;--md-ref-palette-neutral-variant-30: #44464f;--md-ref-palette-neutral-variant-40: #5c5e67;--md-ref-palette-neutral-variant-50: #757780;--md-ref-palette-neutral-variant-60: #8f9099;--md-ref-palette-neutral-variant-70: #a9abb4;--md-ref-palette-neutral-variant-80: #c5c6d0;--md-ref-palette-neutral-variant-90: #e1e2ec;--md-ref-palette-neutral-variant-95: #eff0fa;--md-ref-palette-neutral-variant-99: #fefbff;--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;}