dsh-any-background 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +78 -6
  2. package/README.zh.md +78 -6
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -8,12 +8,6 @@ English | [中文](README.zh.md)
8
8
 
9
9
  A **DeepSeek Harness** appearance plugin that lets you fully customize the Web UI with a custom theme color, background wallpaper, and fine-grained opacity controls.
10
10
 
11
- <p align="center">
12
- <a href="https://star-history.com/#/Tkingxiao/dsh-any-background" target="_blank">
13
- <img src="https://api.star-history.com/svg?repos=Tkingxiao/dsh-any-background&type=Date" alt="Star History Chart" width="600" />
14
- </a>
15
- </p>
16
-
17
11
  ---
18
12
 
19
13
  ## Features
@@ -44,6 +38,7 @@ dsh-any-background/
44
38
  │ ├── invariant.js # Invariant entry
45
39
  │ ├── client.js # Browser bundle (wrapped for __ModuleLoader__)
46
40
  │ └── client.js.map # Source map
41
+ ├── example_img/ # Example screenshots
47
42
  ├── README.md # This file (English)
48
43
  └── README.zh.md # 中文版
49
44
  ```
@@ -81,6 +76,20 @@ The plugin is a **pure client-side** Cordis plugin. The node half is an empty sh
81
76
  - `genTokens()` generates 30+ CSS custom properties (`--dsw-alias-*`) for the picked color, choosing dark or light scheme based on lightness.
82
77
  - The full token set is written as inline styles on `<body>`, so the theme color never depends on the theme service's timing.
83
78
 
79
+ #### Theme Color Adjustment
80
+
81
+ <p align="center">
82
+ <img src="example_img/image.png" alt="Blue theme" width="600">
83
+ <br/>
84
+ <em>Blue theme · Light · Default dark font</em>
85
+ </p>
86
+
87
+ <p align="center">
88
+ <img src="example_img/image-1.png" alt="Pink theme" width="600">
89
+ <br/>
90
+ <em>Pink theme · Dark · Default light font</em>
91
+ </p>
92
+
84
93
  ### Background Wallpaper
85
94
 
86
95
  - A `<div>` with `position:fixed; z-index:-1` is prepended to `<body>`.
@@ -89,6 +98,23 @@ The plugin is a **pure client-side** Cordis plugin. The node half is an empty sh
89
98
  - Committed position is stored as fractional center coordinates + natural image size, so the layout survives viewport changes.
90
99
  - Wallpaper opacity is applied directly to the `<div>` element; background color opacity is applied via inline token overrides.
91
100
 
101
+ #### Wallpaper Preview
102
+
103
+ <p align="center">
104
+ <img src="example_img/image-2.png" alt="Wallpaper opacity and blur adjustment" width="600">
105
+ <br/>
106
+ <em>Wallpaper opacity and blur adjustment</em>
107
+ </p>
108
+
109
+ #### Editor Adjustment
110
+
111
+ <p align="center">
112
+ <img src="example_img/image-3.png" alt="Editor adjustment" width="400">
113
+ <img src="example_img/image-4.png" alt="Background mapping" width="400">
114
+ <br/>
115
+ <em>Editor adjustment · Background mapping</em>
116
+ </p>
117
+
92
118
  ### Opacity System
93
119
 
94
120
  Three independent opacity layers, each with its own slider and `localStorage` key:
@@ -99,6 +125,42 @@ Three independent opacity layers, each with its own slider and `localStorage` ke
99
125
  | Settings panel | `dsh-any-background:settings-opacity` | 100% | CSS variable on `<html>` via `[aria-modal]` selector |
100
126
  | Wallpaper | `dsh-any-background:wallpaper-opacity` | 100% | Direct `style.opacity` on wallpaper `<div>` |
101
127
 
128
+ #### Settings Opacity
129
+
130
+ <p align="center">
131
+ <img src="example_img/image-5.png" alt="Settings opacity 100%" width="400">
132
+ <img src="example_img/image-6.png" alt="Settings opacity 49%" width="400">
133
+ <br/>
134
+ <em>Settings opacity 100% · Settings opacity 49%</em>
135
+ </p>
136
+
137
+ #### Main Interface Opacity
138
+
139
+ <p align="center">
140
+ <img src="example_img/image-6.png" alt="Main interface opacity 100%" width="400">
141
+ <img src="example_img/image-7.png" alt="Main interface opacity 0%" width="400">
142
+ <br/>
143
+ <em>Main interface opacity 100% · Main interface opacity 0%</em>
144
+ </p>
145
+
146
+ #### Wallpaper Opacity
147
+
148
+ <p align="center">
149
+ <img src="example_img/image-8.png" alt="Wallpaper opacity 0%" width="400">
150
+ <img src="example_img/image-9.png" alt="Wallpaper opacity 100%" width="400">
151
+ <br/>
152
+ <em>Wallpaper opacity 0% · Wallpaper opacity 100%</em>
153
+ </p>
154
+
155
+ #### Wallpaper Blur
156
+
157
+ <p align="center">
158
+ <img src="example_img/image-10.png" alt="Wallpaper blur 50%" width="400">
159
+ <img src="example_img/image-11.png" alt="Wallpaper blur 0%" width="400">
160
+ <br/>
161
+ <em>Wallpaper blur 50% · Wallpaper blur 0%</em>
162
+ </p>
163
+
102
164
  ## Installation
103
165
 
104
166
  ### Method 1: npm install (Recommended)
@@ -165,6 +227,16 @@ dsh web
165
227
  | `@deepseek-ai/dsh-invariants` | Package invariant companion |
166
228
  | `react` ^18.2.0 | UI rendering |
167
229
 
230
+ ## Star History
231
+
232
+ <a href="https://www.star-history.com/?repos=Tkingxiao%2Fdsh-any-background&type=date&legend=bottom-right">
233
+ <picture>
234
+ <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&theme=dark&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
235
+ <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
236
+ <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
237
+ </picture>
238
+ </a>
239
+
168
240
  ## License
169
241
 
170
242
  MIT
package/README.zh.md CHANGED
@@ -8,12 +8,6 @@
8
8
 
9
9
  一个 **DeepSeek Harness** 外观插件，让你完全自定义 Web 端的主题色、背景壁纸和透明度控制。
10
10
 
11
- <p align="center">
12
- <a href="https://star-history.com/#/Tkingxiao/dsh-any-background" target="_blank">
13
- <img src="https://api.star-history.com/svg?repos=Tkingxiao/dsh-any-background&type=Date" alt="Star 历史趋势图" width="600" />
14
- </a>
15
- </p>
16
-
17
11
  ---
18
12
 
19
13
  ## 功能特性
@@ -44,6 +38,7 @@ dsh-any-background/
44
38
  │ ├── invariant.js # 不变量入口
45
39
  │ ├── client.js # 浏览器包（经 __ModuleLoader__ 包装）
46
40
  │ └── client.js.map # 源码映射
41
+ ├── example_img/ # 示例截图
47
42
  ├── README.md # 英文版说明
48
43
  └── README.zh.md # 本文件（中文）
49
44
  ```
@@ -81,6 +76,20 @@ dsh-any-background/
81
76
  - `genTokens()` 根据所选颜色生成 30+ 个 CSS 自定义属性（`--dsw-alias-*`），根据明度自动选择深色或浅色方案。
82
77
  - 完整令牌集以内联样式写入 `<body>`，主题色完全不依赖主题服务的时序。
83
78
 
79
+ #### 主题色调整
80
+
81
+ <p align="center">
82
+ <img src="example_img/image.png" alt="蓝色主题" width="600">
83
+ <br/>
84
+ <em>蓝色主题 · 较亮 · 默认深色字体</em>
85
+ </p>
86
+
87
+ <p align="center">
88
+ <img src="example_img/image-1.png" alt="粉色主题" width="600">
89
+ <br/>
90
+ <em>粉色主题 · 较暗 · 默认浅色字体</em>
91
+ </p>
92
+
84
93
  ### 背景壁纸
85
94
 
86
95
  - 一个 `position:fixed; z-index:-1` 的 `<div>` 被插入到 `<body>` 最前面。
@@ -89,6 +98,23 @@ dsh-any-background/
89
98
  - 提交的位置以分数中心坐标 + 原始图片尺寸存储，布局在视口变化时保持一致。
90
99
  - 壁纸透明度直接作用于 `<div>` 元素；背景色透明度通过内联令牌覆盖实现。
91
100
 
101
+ #### 背景图片
102
+
103
+ <p align="center">
104
+ <img src="example_img/image-2.png" alt="壁纸透明度和模糊调整" width="600">
105
+ <br/>
106
+ <em>壁纸透明度和模糊调整</em>
107
+ </p>
108
+
109
+ #### 编辑器调整
110
+
111
+ <p align="center">
112
+ <img src="example_img/image-3.png" alt="编辑器调整" width="400">
113
+ <img src="example_img/image-4.png" alt="背景实际对应" width="400">
114
+ <br/>
115
+ <em>编辑器调整 · 背景实际对应</em>
116
+ </p>
117
+
92
118
  ### 透明度体系
93
119
 
94
120
  三个独立的透明度层，各有独立滑块和 `localStorage` 键：
@@ -99,6 +125,42 @@ dsh-any-background/
99
125
  | 设置面板 | `dsh-any-background:settings-opacity` | 100% | `<html>` 上的 CSS 变量，通过 `[aria-modal]` 选择器定位 |
100
126
  | 壁纸 | `dsh-any-background:wallpaper-opacity` | 100% | 壁纸 `<div>` 上的 `style.opacity` |
101
127
 
128
+ #### 设置透明度
129
+
130
+ <p align="center">
131
+ <img src="example_img/image-5.png" alt="设置透明度100%" width="400">
132
+ <img src="example_img/image-6.png" alt="设置透明度49%" width="400">
133
+ <br/>
134
+ <em>设置透明度 100% · 设置透明度 49%</em>
135
+ </p>
136
+
137
+ #### 主界面透明度
138
+
139
+ <p align="center">
140
+ <img src="example_img/image-6.png" alt="主界面透明度100%" width="400">
141
+ <img src="example_img/image-7.png" alt="主界面透明度0%" width="400">
142
+ <br/>
143
+ <em>主界面透明度 100% · 主界面透明度 0%</em>
144
+ </p>
145
+
146
+ #### 壁纸透明度
147
+
148
+ <p align="center">
149
+ <img src="example_img/image-8.png" alt="壁纸透明度0%" width="400">
150
+ <img src="example_img/image-9.png" alt="壁纸透明度100%" width="400">
151
+ <br/>
152
+ <em>壁纸透明度 0% · 壁纸透明度 100%</em>
153
+ </p>
154
+
155
+ #### 壁纸模糊
156
+
157
+ <p align="center">
158
+ <img src="example_img/image-10.png" alt="壁纸模糊50%" width="400">
159
+ <img src="example_img/image-11.png" alt="壁纸模糊0%" width="400">
160
+ <br/>
161
+ <em>壁纸模糊 50% · 壁纸模糊 0%</em>
162
+ </p>
163
+
102
164
  ## 安装方式
103
165
 
104
166
  ### 方式一：npm 安装（推荐）
@@ -164,6 +226,16 @@ dsh web
164
226
  | `@deepseek-ai/dsh-invariants` | 包不变量 companion |
165
227
  | `react` ^18.2.0 | UI 渲染 |
166
228
 
229
+ ## Star History
230
+
231
+ <a href="https://www.star-history.com/?repos=Tkingxiao%2Fdsh-any-background&type=date&legend=bottom-right">
232
+ <picture>
233
+ <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&theme=dark&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
234
+ <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
235
+ <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=Tkingxiao/dsh-any-background&type=date&legend=bottom-right&sealed_token=7GSnWLC53Di99WoOA-OGKn_GLJ-kQ6jgcdGRLS7wUzlwkbtJxLtH9kT3D7gCvxb0HoMF8aZklqQT4ijJ7hcFA2zO43Sfh-ccbqGBtvLundJKPELZ1a2xNA" />
236
+ </picture>
237
+ </a>
238
+
167
239
  ## 许可证
168
240
 
169
241
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dsh-any-background",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Appearance plugin for DeepSeek Harness: custom theme color (PS-style color wheel), background wallpaper with opacity/blur controls, and separate main/settings interface opacity.",
5
5
  "keywords": [
6
6
  "deepseek-harness",