diff --git a/src/components/sections/NodeCard.tsx b/src/components/sections/NodeCard.tsx
index b31e603..0e4d7ad 100644
--- a/src/components/sections/NodeCard.tsx
+++ b/src/components/sections/NodeCard.tsx
@@ -3,6 +3,7 @@ import {
formatBytes,
formatUptime,
getOSImage,
+ isOSIconMonochrome,
formatTrafficLimit,
} from "@/utils";
import type { NodeWithStatus } from "@/types/node";
@@ -50,7 +51,9 @@ export const NodeCard = ({
{node.name}
diff --git a/src/index.css b/src/index.css
index 90c85f1..61c9729 100644
--- a/src/index.css
+++ b/src/index.css
@@ -179,6 +179,15 @@
.theme-text-muted {
@apply text-(--theme-text-muted-color);
}
+
+ /* 深色模式下的单色系统图标样式 */
+ .os-icon-mono {
+ transition: filter 0.2s ease-in-out;
+ }
+
+ .dark .os-icon-mono {
+ filter: brightness(0) invert(1);
+ }
}
/* 背景图片伪元素 */
diff --git a/src/utils/osImageHelper.ts b/src/utils/osImageHelper.ts
index 168a269..6f7b422 100644
--- a/src/utils/osImageHelper.ts
+++ b/src/utils/osImageHelper.ts
@@ -7,6 +7,7 @@ interface OSConfig {
name: string;
image: string;
keywords: string[];
+ isMonochrome: boolean; // 是否为单色图标,深色模式下需要颜色反转
}
// 操作系统匹配组
@@ -15,136 +16,163 @@ const osConfigs: OSConfig[] = [
name: "Android",
image: "/assets/os-android.svg",
keywords: ["android", "lineage", "lineageos", "aosp", "android os"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Alibaba",
image: "/assets/os-alibaba.svg",
keywords: ["alibaba"],
+ isMonochrome: false, // 彩色图标
},
{
name: "AlmaLinux",
image: "/assets/os-alma.svg",
keywords: ["alma", "almalinux"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Alpine Linux",
image: "/assets/os-alpine.webp",
keywords: ["alpine", "alpine linux"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Arch Linux",
image: "/assets/os-arch.svg",
keywords: ["arch", "archlinux", "arch linux"],
+ isMonochrome: false, // 蓝色图标
},
{
name: "Armbian",
image: "/assets/os-armbian.svg",
keywords: ["armbian"],
+ isMonochrome: false, // 彩色图标
},
{
name: "CentOS",
image: "/assets/os-centos.svg",
keywords: ["centos", "cent os"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Debian",
image: "/assets/os-debian.svg",
keywords: ["debian", "deb"],
+ isMonochrome: false, // 红色图标
},
{
name: "Fedora",
image: "/assets/os-fedora.svg",
keywords: ["fedora"],
+ isMonochrome: false, // 彩色图标
},
{
name: "FreeBSD",
image: "/assets/os-freebsd.svg",
keywords: ["freebsd", "bsd"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Gentoo",
image: "/assets/os-gentoo.svg",
keywords: ["gentoo"],
+ isMonochrome: false, // 彩色图标
},
{
name: "ImmortalWrt",
image: "/assets/os-openwrt.svg",
keywords: ["immortalwrt", "immortal", "emmortal"],
+ isMonochrome: true, // 单色黑色图标
},
{
name: "iStoreOS",
image: "/assets/os-istore.png",
keywords: ["istore", "istoreos", "istore os"],
+ isMonochrome: false, // PNG 彩色图标
},
{
name: "Kali Linux",
image: "/assets/os-kail.svg",
keywords: ["kail", "kali", "kali linux"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Linux Mint",
image: "/assets/os-mint.svg",
keywords: ["mint", "linux mint"],
+ isMonochrome: false, // 彩色图标
},
{
name: "macOS",
image: "/assets/os-macos.svg",
keywords: ["macos"],
+ isMonochrome: true, // 纯黑色图标
},
{
name: "Manjaro",
image: "/assets/os-manjaro-.svg",
keywords: ["manjaro"],
+ isMonochrome: false, // 彩色图标
},
{
name: "NixOS",
image: "/assets/os-nix.svg",
keywords: ["nixos", "nix os", "nix"],
+ isMonochrome: false, // 彩色图标
},
{
name: "OpenCloudOS",
image: "/assets/os-opencloud.svg",
keywords: ["opencloud"],
+ isMonochrome: false, // 彩色图标
},
{
name: "openSUSE",
image: "/assets/os-openSUSE.svg",
keywords: ["opensuse", "suse"],
+ isMonochrome: false, // 彩色图标
},
{
name: "OpenWrt",
image: "/assets/os-openwrt.svg",
keywords: ["openwrt", "open wrt", "open-wrt", "qwrt"],
+ isMonochrome: true, // 单色黑色图标
},
{
name: "Proxmox VE",
image: "/assets/os-proxmox.ico",
keywords: ["proxmox", "proxmox ve"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Red Hat",
image: "/assets/os-redhat.svg",
keywords: ["redhat", "rhel", "red hat"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Rocky Linux",
image: "/assets/os-rocky.svg",
keywords: ["rocky", "rocky linux"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Synology DSM",
image: "/assets/os-synology.ico",
keywords: ["synology", "dsm", "synology dsm"],
+ isMonochrome: false, // 彩色图标
},
{
name: "Ubuntu",
image: "/assets/os-ubuntu.svg",
keywords: ["ubuntu", "elementary"],
+ isMonochrome: false, // 橙色图标
},
{
name: "Windows",
image: "/assets/os-windows.svg",
keywords: ["windows", "win", "microsoft", "ms"],
+ isMonochrome: false, // 蓝色图标
},
];
@@ -153,6 +181,7 @@ const defaultOSConfig: OSConfig = {
name: "Unknown",
image: "/assets/TablerHelp.svg",
keywords: ["unknown"],
+ isMonochrome: true, // 默认图标是单色的
};
/**
@@ -189,6 +218,15 @@ export function getOSImage(osString: string): string {
return findOSConfig(osString).image;
}
+/**
+ * 根据输入字符串匹配返回操作系统图标是否为单色
+ * @param osString - 操作系统相关的字符串
+ * @returns 是否为单色图标,单色图标在深色模式下需要颜色反转
+ */
+export function isOSIconMonochrome(osString: string): boolean {
+ return findOSConfig(osString).isMonochrome;
+}
+
/**
* 获取所有可用的操作系统图像
* @returns 所有操作系统图像的映射表