theme

.env.example

@@ -40,6 +40,7 @@ PS_COMPONENTS=["header", "cpu_mem", "disk", "network", "process", "footer"]
 # 如要使用插件内置 CSS，请使用 res: 前缀
 # 内置 CSS 列表：
 #   - "res:theme-dark.css": 深色主题
+#   - "res:theme-vanilla.css": Doki Theme: NekoPara: Vanilla 配色主题
 #   - "res:no-blur.css": 禁用卡片毛玻璃效果
 #   - “res:no-radius.css”: 禁用圆角
 #   - “res:no-shadow.css”: 禁用阴影

.gitignore

@@ -6,3 +6,4 @@
 .pdm-python
 build/
 __pycache__
+/nonebot_plugin_picstatus/res/picstatus-debug.html

README.md

@@ -167,6 +167,11 @@ Telegram：[@lgc2333](https://t.me/lgc2333)
 
 ## 📝 更新日志
 
+### 1.1.1
+
+- 新增内置 CSS `theme-vanilla.css`
+- 微调默认 CSS
+
 ### 1.1.0
 
 - 支持 Pydantic V2

nonebot_plugin_picstatus/__init__.py

@@ -19,7 +19,7 @@
 if config.ps_only_su:
     usage += "\n注意：仅SuperUser可以使用此指令"
 
-__version__ = "1.1.0"
+__version__ = "1.1.1"
 __plugin_meta__ = PluginMetadata(
     name="PicStatus",
     description="以图片形式显示当前设备的运行状态",

nonebot_plugin_picstatus/res/css/index.css

@@ -14,15 +14,14 @@
   --card-background-color: #fafafaaa;
   --default-box-shadow: 2px 2px 6px #6a6a6a66;
 
-  --color: var(--secondary-text-color);
-  --label-red-text-color: var(--status-default-text-color);
-  --label-orange-text-color: var(--status-default-text-color);
-  --label-yellow-text-color: var(--status-default-text-color);
-  --label-green-text-color: var(--status-default-text-color);
-  --label-cyan-text-color: var(--status-default-text-color);
-  --label-blue-text-color: var(--status-default-text-color);
-  --label-purple-text-color: var(--status-default-text-color);
-  --label-gray-text-color: var(--status-default-text-color);
+  --label-red-text-color: var(--secondary-text-color);
+  --label-orange-text-color: var(--secondary-text-color);
+  --label-yellow-text-color: var(--secondary-text-color);
+  --label-green-text-color: var(--secondary-text-color);
+  --label-cyan-text-color: var(--secondary-text-color);
+  --label-blue-text-color: var(--secondary-text-color);
+  --label-purple-text-color: var(--secondary-text-color);
+  --label-gray-text-color: var(--secondary-text-color);
   --label-black-text-color: #fafafa;
 
   --background-color: var(--card-background-color);
@@ -36,52 +35,74 @@
   --label-gray-bg-color: #bebebeaa;
   --label-black-bg-color: #3a3a3aaa;
 
+  --prog-low-text-color: var(--secondary-text-color);
+  --prog-medium-text-color: var(--secondary-text-color);
+  --prog-high-text-color: var(--secondary-text-color);
+  --prog-low-bg-color: var(--label-green-bg-color);
+  --prog-medium-bg-color: var(--label-orange-bg-color);
+  --prog-high-bg-color: var(--label-red-bg-color);
+
   --segment-color: #bebebe;
 }
 
 .red {
   --background-color: var(--label-red-bg-color);
-  --color: var(--label-red-text-color);
+  --secondary-text-color: var(--label-red-text-color);
 }
 
 .orange {
   --background-color: var(--label-orange-bg-color);
-  --color: var(--label-orange-text-color);
+  --secondary-text-color: var(--label-orange-text-color);
 }
 
 .yellow {
   --background-color: var(--label-yellow-bg-color);
-  --color: var(--label-yellow-text-color);
+  --secondary-text-color: var(--label-yellow-text-color);
 }
 
 .green {
   --background-color: var(--label-green-bg-color);
-  --color: var(--label-green-text-color);
+  --secondary-text-color: var(--label-green-text-color);
 }
 
 .cyan {
   --background-color: var(--label-cyan-bg-color);
-  --color: var(--label-cyan-text-color);
+  --secondary-text-color: var(--label-cyan-text-color);
 }
 
 .blue {
   --background-color: var(--label-blue-bg-color);
-  --color: var(--label-blue-text-color);
+  --secondary-text-color: var(--label-blue-text-color);
 }
 
 .purple {
   --background-color: var(--label-purple-bg-color);
-  --color: var(--label-purple-text-color);
+  --secondary-text-color: var(--label-purple-text-color);
 }
 
 .gray {
   --background-color: var(--label-gray-bg-color);
-  --color: var(--label-gray-text-color);
+  --secondary-text-color: var(--label-gray-text-color);
 }
 
 .black {
   --background-color: var(--label-black-bg-color);
-  --color: var(--label-black-text-color);
+  --secondary-text-color: var(--label-black-text-color);
+}
+
+.prog-low {
+  --background-color: var(--prog-low-bg-color);
+  --secondary-text-color: var(--prog-low-text-color);
+}
+
+.prog-medium {
+  --background-color: var(--prog-medium-bg-color);
+  --secondary-text-color: var(--prog-medium-text-color);
+}
+
+.prog-high {
+  --background-color: var(--prog-high-bg-color);
+  --secondary-text-color: var(--prog-high-text-color);
 }
 
 .monospace {
@@ -139,7 +160,7 @@ span.label {
   border-radius: 4px;
   box-shadow: var(--default-box-shadow);
   background-color: var(--background-color);
-  color: var(--color);
+  color: var(--secondary-text-color);
 }
 
 .label-container {
@@ -252,6 +273,7 @@ span.label {
 .donut-chart .desc {
   font-size: 12px;
   word-break: break-word;
+  color: var(--secondary-text-color);
 }
 
 /* Progress Bar */
@@ -343,5 +365,5 @@ span.label {
   font-size: 14px;
   text-align: center;
   color: var(--primary-text-color);
-  text-shadow: 1px 1px 1px var(--label-black-text-color);
+  text-shadow: var(--default-box-shadow);
 }

nonebot_plugin_picstatus/res/css/theme-vanilla.css

@@ -0,0 +1,35 @@
+* {
+  --font-family: 'Xiaolai SC', 'Xiaolai Mono SC', 'HarmonyOS Sans SC',
+    'Source Han Sans SC', 'Source Han Sans', sans-serif;
+  --monospace-font-family: 'Xiaolai Mono SC', 'JetBrains Mono', 'Cascadia Code',
+    'Consolas', monospace;
+
+  --primary-text-color: #cdcdcd;
+  --secondary-text-color: #686a80;
+
+  --default-background: #272935aa;
+  --background-mask-color: #3b3c4c55;
+  --card-background-color: #2b2c3daa;
+  --default-box-shadow: 2px 2px 6px #9debff9a;
+
+  --background-color: var(--card-background-color);
+  --label-red-bg-color: #ff5555aa;
+  --label-orange-bg-color: #efa554aa;
+  --label-yellow-bg-color: #ffd448aa;
+  --label-green-bg-color: #1da912aa;
+  --label-cyan-bg-color: #9debffaa;
+  --label-blue-bg-color: #6a96e9aa;
+  --label-purple-bg-color: #9d8df6aa;
+  --label-gray-bg-color: #6c6f7daa;
+  --label-black-bg-color: #272935aa;
+
+  --prog-low-bg-color: var(--label-cyan-bg-color);
+  --prog-medium-bg-color: var(--label-blue-bg-color);
+  --prog-high-bg-color: var(--label-purple-bg-color);
+
+  --segment-color: var(--primary-text-color);
+}
+
+body {
+  background-color: #272935;
+}

nonebot_plugin_picstatus/util.py

@@ -39,7 +39,7 @@ def match_list_regexp(reg_list: List[str], txt: str) -> Optional[re.Match]:
 
 def percent_to_color(percent: float) -> str:
     if percent < 70:
-        return "green"
+        return "prog-low"
     if percent < 90:
-        return "orange"
-    return "red"
+        return "prog-medium"
+    return "prog-high"