Mihomo Party 宁静灰主题配色

[PPY]

写了一个类似墨水护眼风格的Mihomo Party 主题色，望佬们提提建议。

/* 宁静灰（By PPY） */

/* 浅色主题（亮色） */
.light,
[data-theme="light"] {
  --heroui-primary: 210 10% 60% !important; /* 柔和蓝色 */
  --heroui-secondary: 210 10% 45% !important;
  --heroui-content1: 200 10% 95% !important;
  --heroui-content2: 200 10% 92% !important;
  --heroui-content3: 200 10% 90% !important;
  --heroui-content4: 200 10% 85% !important;
  --heroui-default: 200 10% 85% !important;
  --heroui-default-50: 200 10% 98% !important;
  --heroui-default-100: 200 10% 95% !important;
  --heroui-default-200: 200 10% 88% !important;
  --heroui-default-300: 200 10% 80% !important;
  --heroui-default-400: 200 10% 75% !important;
  --heroui-default-500: 200 10% 65% !important;
  --heroui-default-600: 200 10% 60% !important;
  --heroui-foreground: 200 10% 30% !important;
  --heroui-default-foreground: 200 10% 30% !important;
  --heroui-divider-opacity: 0.12 !important;
  --heroui-border-width-small: 1px !important;
  --heroui-border-width-large: 1px !important;
  --heroui-box-shadow-small: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-box-shadow-medium: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-box-shadow-large: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-background: 210 15% 95% !important; /* 淡灰蓝背景 */
  /* 自定义变量 */
  --custom-primary-background: linear-gradient(
    135deg,
    hsl(210, 15%, 65%) 0%,
    hsl(210, 15%, 60%) 100%
  );
  --custom-main-background: hsl(210, 10%, 92%);
  --custom-side-background: linear-gradient(
    135deg,
    hsl(210, 10%, 85%) 0%,
    hsl(210, 10%, 92%) 100%
  );
}

/* 深色主题（暗色） */
.dark,
[data-theme="dark"] {
  --heroui-primary: 210 10% 60% !important;
  --heroui-secondary: 210 10% 45% !important;
  --heroui-content1: 210 10% 20% !important;     /* 深灰蓝色调 */
  --heroui-content2: 210 10% 30% !important;
  --heroui-content3: 210 10% 40% !important;
  --heroui-content4: 210 10% 50% !important;
  --heroui-default: 210 10% 40% !important;
  --heroui-default-50: 210 10% 30% !important;
  --heroui-default-100: 210 10% 35% !important;
  --heroui-default-200: 210 10% 40% !important;
  --heroui-default-300: 210 10% 45% !important;
  --heroui-default-400: 210 10% 50% !important;
  --heroui-default-500: 210 10% 55% !important;
  --heroui-default-600: 210 10% 60% !important;
  --heroui-foreground: 210 10% 85% !important;
  --heroui-default-foreground: 210 10% 85% !important;
  --heroui-divider-opacity: 0.12 !important;
  --heroui-border-width-small: 1px !important;
  --heroui-border-width-large: 1px !important;
  --heroui-box-shadow-small: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-box-shadow-medium: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-box-shadow-large: 0px 4px 10px rgba(0, 0, 0, 0.02) !important;
  --heroui-background: 210 15% 10% !important; /* 深灰色背景 */
  /* 自定义变量 */
  --custom-primary-background: linear-gradient(
    135deg,
    hsl(210, 15%, 50%) 0%,
    hsl(210, 15%, 45%) 100%
  );
  --custom-main-background: hsl(210, 10%, 12%);
  --custom-side-background: linear-gradient(
    135deg,
    hsl(210, 10%, 5%) 0%,
    hsl(210, 10%, 12%) 100%
  );
}

/* 下拉菜单保持默认阴影 */
[data-slot="content"] {
  --heroui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.05),
    0px 2px 10px 0px rgb(0 0 0 / 0.2),
    inset 0px 0px 1px 0px rgb(255 255 255 / 0.15) !important;
  --heroui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.06),
    0px 2px 30px 0px rgb(0 0 0 / 0.22),
    inset 0px 0px 1px 0px rgb(255 255 255 / 0.15) !important;
  --heroui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.07),
    0px 30px 60px 0px rgb(0 0 0 / 0.26),
    inset 0px 0px 1px 0px rgb(255 255 255 / 0.15) !important;
  --heroui-hover-opacity: 0.9 !important;
}

/* 按钮或背景色类定义 */
.bg-primary {
  background: var(--custom-primary-background) !important;
}
.bg-primary\/30 {
  background: var(--custom-primary-background) !important;
}
.main {
  background: var(--custom-main-background) !important;
}
.side {
  background: var(--custom-side-background) !important;
}

[lingxing1017]

还挺好看

[PPY]

感谢佬友的认同

[Mr_Onion (𝕄𝕣_𝕆𝕟𝕚𝕠𝕟)]

挺好看的，但能不能加个渐变啊

之前加了渐变的暖阳金沙就感觉很不错

[PPY]

那我再写一份同配色风格的渐变风的主题发布一下

[Mr_Onion (𝕄𝕣_𝕆𝕟𝕚𝕠𝕟)]

行，谢谢佬了

[Wang_ChenYao (hongover)]

好看的欸

[Night2 (逝去的晚风)]

豪看，佬友

[cherishd]

挺好看的哇

[Throttle (方块AI)]

感谢分享，有空试试

[Wive (warming)]

挺好看的

[MysticStars]

mark 一下

[handsome (大帅哥)]

挺不错的

[lyonwww]

好看好看

[li2hen]

佬友们太精致了

[GHZ]

调得很好看，楼主强的嘞Orz

[Oojialin (加林)]

很美，谢谢分享。这个对比 clash verge 哪个更好用哈？

[PPY]

没研究过这个，就是比较喜欢 Mihomo Party 的 UI

[Oojialin (加林)]

这个可以全局脚本么？

[PPY]

可以，我自己有在用，如图