xt/comfy-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 更新颜色主题并增加表面颜色变量

Browse Source 
- 更新了主要颜色变量的值，使其更加鲜艳和对比度更高
- 增加了新的表面颜色变量，用于在浅色和深色主题之间切换
- 调整了部分颜色的明暗度，以适应不同的使用场景
- 优化了颜色搭配，提高了可读性和视觉效果
This commit is contained in:
Vixalie
2025-07-28 08:34:11 +08:00
parent 911c17f52d
commit 5bc2b4d75d
1 changed files with 130 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/theme.css
View File

@@ -1,11 +1,18 @@
@theme inline { @theme inline {
--color-primary: light-dark(#9d0035, #9d0035); --color-primary: light-dark(#ef3473, #ef3473);
--color-primary-hover: light-dark(#dd1b65, #dd1b65); --color-primary-hover: light-dark(#ff5e94, #ff5e94);
--color-primary-active: light-dark(#7f0020, #7f0020); --color-primary-active: light-dark(#c1004f, #c1004f);
--color-primary-focus: light-dark(#ff5088, #ff5088); --color-primary-focus: light-dark(#ff78aa, #ff78aa);
--color-primary-disabled: light-dark(#766568, #766568); --color-primary-disabled: light-dark(#ae9b9e, #ae9b9e);
--color-on-primary: light-dark(#ffffff, #ffffff); --color-on-primary: light-dark(#ffffff, #ffffff);
--color-on-primary-disabled: light-dark(#ffffff, #ffffff); --color-on-primary-disabled: light-dark(#000000, #000000);
--color-primary-surface: light-dark(#9d0035, #9d0035);
--color-primary-surface-hover: light-dark(#dd1b65, #dd1b65);
--color-primary-surface-active: light-dark(#7f0020, #7f0020);
--color-primary-surface-focus: light-dark(#ff5088, #ff5088);
--color-primary-surface-disabled: light-dark(#766568, #766568);
--color-on-primary-surface: light-dark(#ffffff, #ffffff);
--color-on-primary-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-primary-10: light-dark(#2f0000, #2f0000); --color-swatch-primary-10: light-dark(#2f0000, #2f0000);
--color-swatch-primary-15: light-dark(#410000, #410000); --color-swatch-primary-15: light-dark(#410000, #410000);
--color-swatch-primary-20: light-dark(#530005, #530005); --color-swatch-primary-20: light-dark(#530005, #530005);
@@ -22,13 +29,20 @@
--color-swatch-primary-90: light-dark(#ff95c5, #ff95c5); --color-swatch-primary-90: light-dark(#ff95c5, #ff95c5);
--color-swatch-primary-95: light-dark(#ffa6d5, #ffa6d5); --color-swatch-primary-95: light-dark(#ffa6d5, #ffa6d5);
--color-swatch-primary-98: light-dark(#ffb0df, #ffb0df); --color-swatch-primary-98: light-dark(#ffb0df, #ffb0df);
--color-secondary: light-dark(#890073, #890073); --color-secondary: light-dark(#d742ba, #d742ba);
--color-secondary-hover: light-dark(#c630aa, #c630aa); --color-secondary-hover: light-dark(#fe69de, #fe69de);
--color-secondary-active: light-dark(#6e005b, #6e005b); --color-secondary-active: light-dark(#ab0192, #ab0192);
--color-secondary-focus: light-dark(#f05bd1, #f05bd1); --color-secondary-focus: light-dark(#ff81f7, #ff81f7);
--color-secondary-disabled: light-dark(#73666f, #73666f); --color-secondary-disabled: light-dark(#aa9ba5, #aa9ba5);
--color-on-secondary: light-dark(#fffffe, #fffffe); --color-on-secondary: light-dark(#ffffff, #ffffff);
--color-on-secondary-disabled: light-dark(#ffffff, #ffffff); --color-on-secondary-disabled: light-dark(#000000, #000000);
--color-secondary-surface: light-dark(#890073, #890073);
--color-secondary-surface-hover: light-dark(#c630aa, #c630aa);
--color-secondary-surface-active: light-dark(#6e005b, #6e005b);
--color-secondary-surface-focus: light-dark(#f05bd1, #f05bd1);
--color-secondary-surface-disabled: light-dark(#73666f, #73666f);
--color-on-secondary-surface: light-dark(#fffffe, #fffffe);
--color-on-secondary-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-secondary-10: light-dark(#23001d, #23001d); --color-swatch-secondary-10: light-dark(#23001d, #23001d);
--color-swatch-secondary-15: light-dark(#34002a, #34002a); --color-swatch-secondary-15: light-dark(#34002a, #34002a);
--color-swatch-secondary-20: light-dark(#450038, #450038); --color-swatch-secondary-20: light-dark(#450038, #450038);
@@ -45,13 +59,20 @@
--color-swatch-secondary-90: light-dark(#ff9dff, #ff9dff); --color-swatch-secondary-90: light-dark(#ff9dff, #ff9dff);
--color-swatch-secondary-95: light-dark(#ffaeff, #ffaeff); --color-swatch-secondary-95: light-dark(#ffaeff, #ffaeff);
--color-swatch-secondary-98: light-dark(#ffb8ff, #ffb8ff); --color-swatch-secondary-98: light-dark(#ffb8ff, #ffb8ff);
--color-tertiary: light-dark(#a00000, #a00000); --color-tertiary: light-dark(#f24000, #f24000);
--color-tertiary-hover: light-dark(#e02b00, #e02b00); --color-tertiary-hover: light-dark(#ff6931, #ff6931);
--color-tertiary-active: light-dark(#820000, #820000); --color-tertiary-active: light-dark(#c40000, #c40000);
--color-tertiary-focus: light-dark(#ff5b1f, #ff5b1f); --color-tertiary-focus: light-dark(#ff824d, #ff824d);
--color-tertiary-disabled: light-dark(#776661, #776661); --color-tertiary-disabled: light-dark(#ae9c97, #ae9c97);
--color-on-tertiary: light-dark(#ffffff, #ffffff); --color-on-tertiary: light-dark(#ffffff, #ffffff);
--color-on-tertiary-disabled: light-dark(#ffffff, #ffffff); --color-on-tertiary-disabled: light-dark(#000000, #000000);
--color-tertiary-surface: light-dark(#a00000, #a00000);
--color-tertiary-surface-hover: light-dark(#e02b00, #e02b00);
--color-tertiary-surface-active: light-dark(#820000, #820000);
--color-tertiary-surface-focus: light-dark(#ff5b1f, #ff5b1f);
--color-tertiary-surface-disabled: light-dark(#776661, #776661);
--color-on-tertiary-surface: light-dark(#ffffff, #ffffff);
--color-on-tertiary-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-tertiary-10: light-dark(#310000, #310000); --color-swatch-tertiary-10: light-dark(#310000, #310000);
--color-swatch-tertiary-15: light-dark(#440000, #440000); --color-swatch-tertiary-15: light-dark(#440000, #440000);
--color-swatch-tertiary-20: light-dark(#560000, #560000); --color-swatch-tertiary-20: light-dark(#560000, #560000);
@@ -68,13 +89,20 @@
--color-swatch-tertiary-90: light-dark(#ff9f6a, #ff9f6a); --color-swatch-tertiary-90: light-dark(#ff9f6a, #ff9f6a);
--color-swatch-tertiary-95: light-dark(#ffb07b, #ffb07b); --color-swatch-tertiary-95: light-dark(#ffb07b, #ffb07b);
--color-swatch-tertiary-98: light-dark(#ffba85, #ffba85); --color-swatch-tertiary-98: light-dark(#ffba85, #ffba85);
--color-accent: light-dark(#00685d, #00685d); --color-accent: light-dark(#00b0a0, #00b0a0);
--color-accent-hover: light-dark(#00a091, #00a091); --color-accent-hover: light-dark(#00d4c3, #00d4c3);
--color-accent-active: light-dark(#004f47, #004f47); --color-accent-active: light-dark(#00877a, #00877a);
--color-accent-focus: light-dark(#00c7b6, #00c7b6); --color-accent-focus: light-dark(#00eddb, #00eddb);
--color-accent-disabled: light-dark(#5c6f6c, #5c6f6c); --color-accent-disabled: light-dark(#92a5a3, #92a5a3);
--color-on-accent: light-dark(#ffffff, #ffffff); --color-on-accent: light-dark(#000000, #000000);
--color-on-accent-disabled: light-dark(#ffffff, #ffffff); --color-on-accent-disabled: light-dark(#000000, #000000);
--color-accent-surface: light-dark(#00685d, #00685d);
--color-accent-surface-hover: light-dark(#00a091, #00a091);
--color-accent-surface-active: light-dark(#004f47, #004f47);
--color-accent-surface-focus: light-dark(#00c7b6, #00c7b6);
--color-accent-surface-disabled: light-dark(#5c6f6c, #5c6f6c);
--color-on-accent-surface: light-dark(#ffffff, #ffffff);
--color-on-accent-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-accent-10: light-dark(#000c0f, #000c0f); --color-swatch-accent-10: light-dark(#000c0f, #000c0f);
--color-swatch-accent-15: light-dark(#001b1b, #001b1b); --color-swatch-accent-15: light-dark(#001b1b, #001b1b);
--color-swatch-accent-20: light-dark(#002927, #002927); --color-swatch-accent-20: light-dark(#002927, #002927);
@@ -91,13 +119,20 @@
--color-swatch-accent-90: light-dark(#00fff6, #00fff6); --color-swatch-accent-90: light-dark(#00fff6, #00fff6);
--color-swatch-accent-95: light-dark(#00ffff, #00ffff); --color-swatch-accent-95: light-dark(#00ffff, #00ffff);
--color-swatch-accent-98: light-dark(#00ffff, #00ffff); --color-swatch-accent-98: light-dark(#00ffff, #00ffff);
--color-danger: light-dark(#9a0011, #9a0011); --color-danger: light-dark(#be002f, #be002f);
--color-danger-hover: light-dark(#da3045, #da3045); --color-danger-hover: light-dark(#f44b5a, #f44b5a);
--color-danger-active: light-dark(#7d0000, #7d0000); --color-danger-active: light-dark(#9a0011, #9a0011);
--color-danger-focus: light-dark(#ff5c68, #ff5c68); --color-danger-focus: light-dark(#ff6e77, #ff6e77);
--color-danger-disabled: light-dark(#766665, #766665); --color-danger-disabled: light-dark(#8e7d7d, #8e7d7d);
--color-on-danger: light-dark(#ffffff, #ffffff); --color-on-danger: light-dark(#ffffff, #ffffff);
--color-on-danger-disabled: light-dark(#ffffff, #ffffff); --color-on-danger-disabled: light-dark(#ffffff, #ffffff);
--color-danger-surface: light-dark(#9a0011, #9a0011);
--color-danger-surface-hover: light-dark(#da3045, #da3045);
--color-danger-surface-active: light-dark(#7d0000, #7d0000);
--color-danger-surface-focus: light-dark(#ff5c68, #ff5c68);
--color-danger-surface-disabled: light-dark(#766665, #766665);
--color-on-danger-surface: light-dark(#ffffff, #ffffff);
--color-on-danger-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-danger-10: light-dark(#2e0000, #2e0000); --color-swatch-danger-10: light-dark(#2e0000, #2e0000);
--color-swatch-danger-15: light-dark(#400000, #400000); --color-swatch-danger-15: light-dark(#400000, #400000);
--color-swatch-danger-20: light-dark(#510000, #510000); --color-swatch-danger-20: light-dark(#510000, #510000);
@@ -114,13 +149,20 @@
--color-swatch-danger-90: light-dark(#ff9fa4, #ff9fa4); --color-swatch-danger-90: light-dark(#ff9fa4, #ff9fa4);
--color-swatch-danger-95: light-dark(#ffb0b4, #ffb0b4); --color-swatch-danger-95: light-dark(#ffb0b4, #ffb0b4);
--color-swatch-danger-98: light-dark(#ffbabe, #ffbabe); --color-swatch-danger-98: light-dark(#ffbabe, #ffbabe);
--color-success: light-dark(#005e00, #005e00); --color-success: light-dark(#0c8918, #0c8918);
--color-success-hover: light-dark(#219427, #219427); --color-success-hover: light-dark(#48b449, #48b449);
--color-success-active: light-dark(#004600, #004600); --color-success-active: light-dark(#006800, #006800);
--color-success-focus: light-dark(#4fba4f, #4fba4f); --color-success-focus: light-dark(#67d166, #67d166);
--color-success-disabled: light-dark(#646d64, #646d64); --color-success-disabled: light-dark(#868f85, #868f85);
--color-on-success: light-dark(#ffffff, #ffffff); --color-on-success: light-dark(#ffffff, #ffffff);
--color-on-success-disabled: light-dark(#ffffff, #ffffff); --color-on-success-disabled: light-dark(#ffffff, #ffffff);
--color-success-surface: light-dark(#005e00, #005e00);
--color-success-surface-hover: light-dark(#219427, #219427);
--color-success-surface-active: light-dark(#004600, #004600);
--color-success-surface-focus: light-dark(#4fba4f, #4fba4f);
--color-success-surface-disabled: light-dark(#646d64, #646d64);
--color-on-success-surface: light-dark(#ffffff, #ffffff);
--color-on-success-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-success-10: light-dark(#000a00, #000a00); --color-swatch-success-10: light-dark(#000a00, #000a00);
--color-swatch-success-15: light-dark(#001700, #001700); --color-swatch-success-15: light-dark(#001700, #001700);
--color-swatch-success-20: light-dark(#002400, #002400); --color-swatch-success-20: light-dark(#002400, #002400);
@@ -137,13 +179,20 @@
--color-swatch-success-90: light-dark(#91fc8e, #91fc8e); --color-swatch-success-90: light-dark(#91fc8e, #91fc8e);
--color-swatch-success-95: light-dark(#a1ff9e, #a1ff9e); --color-swatch-success-95: light-dark(#a1ff9e, #a1ff9e);
--color-swatch-success-98: light-dark(#abffa8, #abffa8); --color-swatch-success-98: light-dark(#abffa8, #abffa8);
--color-warn: light-dark(#832700, #832700); --color-warn: light-dark(#f28e16, #f28e16);
--color-warn-hover: light-dark(#be5e00, #be5e00); --color-warn-hover: light-dark(#ffa73e, #ffa73e);
--color-warn-active: light-dark(#690500, #690500); --color-warn-active: light-dark(#c06000, #c06000);
--color-warn-focus: light-dark(#e68300, #e68300); --color-warn-focus: light-dark(#ffb852, #ffb852);
--color-warn-disabled: light-dark(#726961, #726961); --color-warn-disabled: light-dark(#c3b8b0, #c3b8b0);
--color-on-warn: light-dark(#fbfcfb, #fbfcfb); --color-on-warn: light-dark(#000000, #000000);
--color-on-warn-disabled: light-dark(#ffffff, #ffffff); --color-on-warn-disabled: light-dark(#000000, #000000);
--color-warn-surface: light-dark(#832700, #832700);
--color-warn-surface-hover: light-dark(#be5e00, #be5e00);
--color-warn-surface-active: light-dark(#690500, #690500);
--color-warn-surface-focus: light-dark(#e68300, #e68300);
--color-warn-surface-disabled: light-dark(#726961, #726961);
--color-on-warn-surface: light-dark(#fbfcfb, #fbfcfb);
--color-on-warn-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-warn-10: light-dark(#210000, #210000); --color-swatch-warn-10: light-dark(#210000, #210000);
--color-swatch-warn-15: light-dark(#310000, #310000); --color-swatch-warn-15: light-dark(#310000, #310000);
--color-swatch-warn-20: light-dark(#410000, #410000); --color-swatch-warn-20: light-dark(#410000, #410000);
@@ -160,13 +209,20 @@
--color-swatch-warn-90: light-dark(#ffc35e, #ffc35e); --color-swatch-warn-90: light-dark(#ffc35e, #ffc35e);
--color-swatch-warn-95: light-dark(#ffd36f, #ffd36f); --color-swatch-warn-95: light-dark(#ffd36f, #ffd36f);
--color-swatch-warn-98: light-dark(#ffdd7a, #ffdd7a); --color-swatch-warn-98: light-dark(#ffdd7a, #ffdd7a);
--color-info: light-dark(#00586b, #00586b); --color-info: light-dark(#10aec2, #10aec2);
--color-info-hover: light-dark(#008ea1, #008ea1); --color-info-hover: light-dark(#45cce0, #45cce0);
--color-info-active: light-dark(#004154, #004154); --color-info-active: light-dark(#008397, #008397);
--color-info-focus: light-dark(#1db3c7, #1db3c7); --color-info-focus: light-dark(#5ee1f5, #5ee1f5);
--color-info-disabled: light-dark(#636c6e, #636c6e); --color-info-disabled: light-dark(#a6b0b2, #a6b0b2);
--color-on-info: light-dark(#ffffff, #ffffff); --color-on-info: light-dark(#000000, #000000);
--color-on-info-disabled: light-dark(#ffffff, #ffffff); --color-on-info-disabled: light-dark(#000000, #000000);
--color-info-surface: light-dark(#00586b, #00586b);
--color-info-surface-hover: light-dark(#008ea1, #008ea1);
--color-info-surface-active: light-dark(#004154, #004154);
--color-info-surface-focus: light-dark(#1db3c7, #1db3c7);
--color-info-surface-disabled: light-dark(#636c6e, #636c6e);
--color-on-info-surface: light-dark(#ffffff, #ffffff);
--color-on-info-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-info-10: light-dark(#000619, #000619); --color-swatch-info-10: light-dark(#000619, #000619);
--color-swatch-info-15: light-dark(#001225, #001225); --color-swatch-info-15: light-dark(#001225, #001225);
--color-swatch-info-20: light-dark(#001f32, #001f32); --color-swatch-info-20: light-dark(#001f32, #001f32);
@@ -231,13 +287,20 @@
--color-overlay: light-dark(#040304, #020202); --color-overlay: light-dark(#040304, #020202);
--color-outline: light-dark(#0b090a, #040304); --color-outline: light-dark(#0b090a, #040304);
--color-outline-variant: light-dark(#0f0e0e, #010101); --color-outline-variant: light-dark(#0f0e0e, #010101);
--color-defensive: light-dark(#004c89, #004c89); --color-defensive: light-dark(#2177b8, #2177b8);
--color-defensive-hover: light-dark(#2d81c2, #2d81c2); --color-defensive-hover: light-dark(#50a1e5, #50a1e5);
--color-defensive-active: light-dark(#003470, #003470); --color-defensive-active: light-dark(#005695, #005695);
--color-defensive-focus: light-dark(#55a6ea, #55a6ea); --color-defensive-focus: light-dark(#6dbdff, #6dbdff);
--color-defensive-disabled: light-dark(#646b71, #646b71); --color-defensive-disabled: light-dark(#878e94, #878e94);
--color-on-defensive: light-dark(#ffffff, #ffffff); --color-on-defensive: light-dark(#ffffff, #ffffff);
--color-on-defensive-disabled: light-dark(#ffffff, #ffffff); --color-on-defensive-disabled: light-dark(#ffffff, #ffffff);
--color-defensive-surface: light-dark(#004c89, #004c89);
--color-defensive-surface-hover: light-dark(#2d81c2, #2d81c2);
--color-defensive-surface-active: light-dark(#003470, #003470);
--color-defensive-surface-focus: light-dark(#55a6ea, #55a6ea);
--color-defensive-surface-disabled: light-dark(#646b71, #646b71);
--color-on-defensive-surface: light-dark(#ffffff, #ffffff);
--color-on-defensive-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-defensive-10: light-dark(#00002e, #00002e); --color-swatch-defensive-10: light-dark(#00002e, #00002e);
--color-swatch-defensive-15: light-dark(#00003d, #00003d); --color-swatch-defensive-15: light-dark(#00003d, #00003d);
--color-swatch-defensive-20: light-dark(#00104b, #00104b); --color-swatch-defensive-20: light-dark(#00104b, #00104b);
@@ -254,13 +317,20 @@
--color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff); --color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff);
--color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff); --color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff);
--color-swatch-defensive-98: light-dark(#afffff, #afffff); --color-swatch-defensive-98: light-dark(#afffff, #afffff);
--color-progressive: light-dark(#9c0000, #9c0000); --color-progressive: light-dark(#d42517, #d42517);
--color-progressive-hover: light-dark(#dc3021, #dc3021); --color-progressive-hover: light-dark(#ff5946, #ff5946);
--color-progressive-active: light-dark(#7f0000, #7f0000); --color-progressive-active: light-dark(#ac0000, #ac0000);
--color-progressive-focus: light-dark(#ff5d49, #ff5d49); --color-progressive-focus: light-dark(#ff7761, #ff7761);
--color-progressive-disabled: light-dark(#766663, #766663); --color-progressive-disabled: light-dark(#9b8a87, #9b8a87);
--color-on-progressive: light-dark(#ffffff, #ffffff); --color-on-progressive: light-dark(#ffffff, #ffffff);
--color-on-progressive-disabled: light-dark(#ffffff, #ffffff); --color-on-progressive-disabled: light-dark(#ffffff, #ffffff);
--color-progressive-surface: light-dark(#9c0000, #9c0000);
--color-progressive-surface-hover: light-dark(#dc3021, #dc3021);
--color-progressive-surface-active: light-dark(#7f0000, #7f0000);
--color-progressive-surface-focus: light-dark(#ff5d49, #ff5d49);
--color-progressive-surface-disabled: light-dark(#766663, #766663);
--color-on-progressive-surface: light-dark(#ffffff, #ffffff);
--color-on-progressive-surface-disabled: light-dark(#ffffff, #ffffff);
--color-swatch-progressive-10: light-dark(#2f0000, #2f0000); --color-swatch-progressive-10: light-dark(#2f0000, #2f0000);
--color-swatch-progressive-15: light-dark(#410000, #410000); --color-swatch-progressive-15: light-dark(#410000, #410000);
--color-swatch-progressive-20: light-dark(#530000, #530000); --color-swatch-progressive-20: light-dark(#530000, #530000);