Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
# Codex Dream Skin
# Codex Dream Skin · 泽音 Melody 主题版

<p align="center">
<strong>中文</strong> · <a href="./README.en.md">English</a>
</p>

## 🌙 泽音 Melody · 樽前月下

这是为 Codex 桌面端制作的「泽音 Melody · 樽前月下」主题美化包。主题以月夜、虹彩与粉蓝色调为核心:
新建任务首页展示泽音 Melody 插画,普通任务对话页切换为安静的深紫纯色背景,在保留原生交互的同时,
加入粉色细描边、柔和外光晕、透明标题栏和白色装饰题字。

<p align="center">
<img src="output/verification/zeyin-melody-home-white-quote-v15.png" alt="泽音 Melody · 樽前月下主题实机效果" width="900"><br>
<sub>Windows Codex 桌面端实机效果 · 新建任务首页</sub>
</p>

### 使用方法

1. 安装 [Codex Dream Skin 最新版本](https://github.com/Fei-Away/Codex-Dream-Skin/releases),首次安装后启动一次。
2. 下载 [`zeyin-melody-home-only-v2.zip`](./output/theme-packs/zeyin-melody-home-only-v2.zip),不要解压或修改扩展名。
3. Windows 用户在系统托盘打开 Codex Dream Skin 菜单,选择“导入主题 ZIP…”;macOS 用户在菜单栏选择同名选项。
4. 导入成功后,在“已保存的主题”中选择“泽音 Melody”并应用。
5. 如果 Codex 已经打开但画面没有立即更新,请完全退出 Codex 后重新启动。

主题包采用“首页插画、普通对话纯色”的显示方式。完整源文件位于
[`custom-themes/zeyin-melody/`](./custom-themes/zeyin-melody/),也可按下文的手动导入方式安装。

> 本主题是非官方的粉丝向美化作品,不代表 OpenAI、Codex、VirtualReal 或相关艺人的官方合作与背书。
> 请仅在符合图片来源授权及适用平台规则的范围内使用和再分发素材。

<p align="center">
<strong>给 Codex 桌面端换一张会呼吸的脸。</strong><br>
外部主题 / 换肤工具 · 本机 CDP 注入 · 不改官方安装包
Expand Down
Binary file added custom-themes/zeyin-melody/background.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions custom-themes/zeyin-melody/theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
[data-ds-part="root"] {
color: var(--ds-theme-color-text);
}

[data-ds-part="sidebar"] {
background-color: rgba(23, 24, 43, .76);
border-right-color: rgba(241, 127, 159, .24);
}

[data-ds-part="header"] {
background-color: rgba(23, 24, 43, .56);
border-bottom-color: rgba(124, 226, 232, .18);
}

[data-ds-part="message"] {
border-color: rgba(255, 212, 223, .16);
border-radius: 18px;
}

[data-ds-part="composer"] {
background-color: rgba(36, 33, 58, .82);
border-color: rgba(241, 127, 159, .34);
border-radius: 20px;
}

[data-ds-part="dialog"] {
background-color: rgba(23, 24, 43, .90);
border-color: rgba(124, 226, 232, .26);
border-radius: 18px;
}
34 changes: 34 additions & 0 deletions custom-themes/zeyin-melody/theme.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"schemaVersion": 1,
"id": "local-zeyin-melody-rainbow-ibis",
"name": "泽音 Melody",
"brandSubtitle": "SCARLET IBIS · CODEX",
"tagline": "飞过阴霾,让虹光与歌声落在今天的工作台。",
"projectPrefix": "选择项目 · ",
"projectLabel": "◉ 选择项目",
"statusText": "MELODY SIGNAL ONLINE",
"quote": "SING THROUGH THE STORM",
"image": "background.jpg",
"appearance": "dark",
"art": {
"focusX": 0.78,
"focusY": 0.44,
"safeArea": "left",
"taskMode": "off"
},
"colors": {
"background": "#17182b",
"panel": "#24213a",
"panelAlt": "#302a49",
"accent": "#f17f9f",
"accentAlt": "#7ce2e8",
"secondary": "#b85a79",
"highlight": "#ffd4df",
"text": "#fff7fb",
"muted": "#d8c9da",
"line": "rgba(241, 127, 159, .30)"
},
"promoTitle": "Codex Dream Skin",
"promoSub": "泽音 Melody · 虹羽之声",
"promoUrl": "https://space.bilibili.com/1203217682"
}
97 changes: 97 additions & 0 deletions macos/assets/dream-skin.css
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,15 @@ html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-
content: none;
}

/* 无任务插画时保持界面安静:保留 Codex 原生标题栏控件,
仅移除 Dream Skin 的任务页装饰文字。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"])) > header.app-header-tint::before,
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"])) > header.app-header-tint::after {
content: none;
}

html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) > :not(header.app-header-tint) {
position: relative;
z-index: 1;
Expand Down Expand Up @@ -521,6 +530,13 @@ html[data-dream-skin="active"] main.main-surface:not(:has([role="main"])) articl
backdrop-filter: blur(7px) saturate(105%);
}

/* 纯色任务页使用居中的粉色柔光,不保留带位移的深色圆角投影。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"])) article {
border-color: rgb(var(--ds-accent-rgb) / .36);
box-shadow: 0 0 14px rgb(var(--ds-accent-rgb) / .12);
}

html[data-dream-skin="active"][data-dream-shell="light"] main.main-surface:not(:has([role="main"])) article {
background: rgb(var(--ds-panel-rgb) / .72);
}
Expand Down Expand Up @@ -670,6 +686,49 @@ html[data-dream-skin="active"]
content: none !important;
}

/* Codex 26.721+ 已不再保留可用的紧凑 hero 插画卡片。宽图会在下方规则中铺满窗口;
方图和竖图则在首页主表面只绘制一次。用 banner 锚点限定新版 DOM,
避免旧版首页同时在主表面和原生 hero 卡片重复绘图。 */
html[data-dream-skin="active"][data-dream-art-wide="false"]
main.main-surface:has([role="main"] .home-banners) {
background-color: var(--ds-bg) !important;
background-image:
linear-gradient(90deg,
rgb(var(--ds-bg-rgb) / .62) 0%,
rgb(var(--ds-bg-rgb) / .28) 56%,
rgb(var(--ds-bg-rgb) / .10) 100%),
var(--dream-skin-art) !important;
background-position: center, var(--ds-art-position) !important;
background-size: 100% 100%, cover !important;
background-repeat: no-repeat !important;
}

/* 新版首页的固定标题栏覆盖在主表面插画之上。方图回退模式下将其透明化,
让背景从窗口内容区顶部连续显示,避免形成深色横带。 */
html[data-dream-skin="active"][data-dream-art-wide="false"]
main.main-surface:has([role="main"] .home-banners)
> header.app-header-tint {
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}

html[data-dream-skin="active"][data-dream-art-wide="false"]
main.main-surface:has([role="main"] .home-banners)
[class~="app-shell-main-content-top-fade"] {
background: transparent !important;
opacity: 0 !important;
}

html[data-dream-skin="active"][data-dream-art-wide="false"]
main.main-surface:has([role="main"] .home-banners)::after {
color: rgb(255 255 255 / .96) !important;
text-shadow:
0 1px 3px rgb(var(--ds-bg-rgb) / .90),
0 0 12px rgb(var(--ds-bg-rgb) / .58) !important;
}

/* Codex 26.721+: this chain (3-6 first-child levels deep) targets the old
compact hero-art card that used to live inside div:first-child's second
level. That level is now the empty .home-banners slot (see #244), so on
Expand Down Expand Up @@ -1059,6 +1118,44 @@ html[data-dream-skin="active"][data-dream-shell="light"][data-dream-art-wide="tr
backdrop-filter: blur(8px) saturate(102%) !important;
}

/* Codex 原生在 Tailwind utilities 层中用 !important 把输入框边框宽度归零。
同层覆写后,主题规则的更高特异性才能真正恢复粉色细描边。 */
@layer utilities {
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"])) .composer-surface-chrome {
border-width: 1px !important;
border-style: solid !important;
border-color: rgb(var(--ds-accent-rgb) / .72) !important;
border-radius: 22px !important;
background: rgb(var(--ds-panel-2-rgb)) !important;
box-shadow: 0 0 18px rgb(var(--ds-accent-rgb) / .26) !important;
backdrop-filter: none !important;
}
}

/* Codex 在输入框后方另设一个深灰色滚动遮罩。保留遮挡滚动文字的渐变,
但让它使用任务页主题底色,避免形成独立的深色圆角底板。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"]))
div.sticky.bottom-0 [class*="bg-gradient-to-t"][class*="via-token-main-surface-primary"] {
background-image: linear-gradient(
to top,
rgb(var(--ds-bg-rgb)) 0%,
rgb(var(--ds-bg-rgb)) 50%,
rgb(var(--ds-bg-rgb) / 0) 100%
) !important;
}

html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
main.main-surface:not(:has([role="main"]))
div.sticky.bottom-0 [class*="pointer-events-none"][class*="bg-gradient-to-t"][class*="from-token-main-surface-primary"] {
background-image: linear-gradient(
to top,
rgb(var(--ds-bg-rgb)) 0%,
rgb(var(--ds-bg-rgb) / 0) 100%
) !important;
}

html[data-dream-skin="active"] [class*="_homeUtilityBar_"] button,
html[data-dream-skin="active"] .composer-surface-chrome button:not([class~="bg-token-foreground"]) {
color: var(--ds-muted) !important;
Expand Down
Binary file added output/theme-packs/zeyin-melody-home-only-v2.zip
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 97 additions & 0 deletions runtime/dream-skin.css
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,15 @@ html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-
content: none;
}

/* 无任务插画时保持界面安静:保留 Codex 原生标题栏控件,
仅移除 Dream Skin 的任务页装饰文字。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > __DREAM_SELECTOR_HEADER_TINT__::before,
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > __DREAM_SELECTOR_HEADER_TINT__::after {
content: none;
}

html[data-dream-skin="active"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) > :not(__DREAM_SELECTOR_HEADER_TINT__) {
position: relative;
z-index: 1;
Expand Down Expand Up @@ -521,6 +530,13 @@ html[data-dream-skin="active"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SE
backdrop-filter: blur(7px) saturate(105%);
}

/* 纯色任务页使用居中的粉色柔光,不保留带位移的深色圆角投影。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) article {
border-color: rgb(var(--ds-accent-rgb) / .36);
box-shadow: 0 0 14px rgb(var(--ds-accent-rgb) / .12);
}

html[data-dream-skin="active"][data-dream-shell="light"] __DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) article {
background: rgb(var(--ds-panel-rgb) / .72);
}
Expand Down Expand Up @@ -670,6 +686,49 @@ html[data-dream-skin="active"]
content: none !important;
}

/* Codex 26.721+ 已不再保留可用的紧凑 hero 插画卡片。宽图会在下方规则中铺满窗口;
方图和竖图则在首页主表面只绘制一次。用 banner 锚点限定新版 DOM,
避免旧版首页同时在主表面和原生 hero 卡片重复绘图。 */
html[data-dream-skin="active"][data-dream-art-wide="false"]
__DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__) {
background-color: var(--ds-bg) !important;
background-image:
linear-gradient(90deg,
rgb(var(--ds-bg-rgb) / .62) 0%,
rgb(var(--ds-bg-rgb) / .28) 56%,
rgb(var(--ds-bg-rgb) / .10) 100%),
var(--dream-skin-art) !important;
background-position: center, var(--ds-art-position) !important;
background-size: 100% 100%, cover !important;
background-repeat: no-repeat !important;
}

/* 新版首页的固定标题栏覆盖在主表面插画之上。方图回退模式下将其透明化,
让背景从窗口内容区顶部连续显示,避免形成深色横带。 */
html[data-dream-skin="active"][data-dream-art-wide="false"]
__DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__)
> __DREAM_SELECTOR_HEADER_TINT__ {
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}

html[data-dream-skin="active"][data-dream-art-wide="false"]
__DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__)
[class~="app-shell-main-content-top-fade"] {
background: transparent !important;
opacity: 0 !important;
}

html[data-dream-skin="active"][data-dream-art-wide="false"]
__DREAM_SELECTOR_SHELL_MAIN__:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__ __DREAM_SELECTOR_HOME_BANNERS__)::after {
color: rgb(255 255 255 / .96) !important;
text-shadow:
0 1px 3px rgb(var(--ds-bg-rgb) / .90),
0 0 12px rgb(var(--ds-bg-rgb) / .58) !important;
}

/* Codex 26.721+: this chain (3-6 first-child levels deep) targets the old
compact hero-art card that used to live inside div:first-child's second
level. That level is now the empty .home-banners slot (see #244), so on
Expand Down Expand Up @@ -1059,6 +1118,44 @@ html[data-dream-skin="active"][data-dream-shell="light"][data-dream-art-wide="tr
backdrop-filter: blur(8px) saturate(102%) !important;
}

/* Codex 原生在 Tailwind utilities 层中用 !important 把输入框边框宽度归零。
同层覆写后,主题规则的更高特异性才能真正恢复粉色细描边。 */
@layer utilities {
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__)) __DREAM_SELECTOR_COMPOSER_CHROME__ {
border-width: 1px !important;
border-style: solid !important;
border-color: rgb(var(--ds-accent-rgb) / .72) !important;
border-radius: 22px !important;
background: rgb(var(--ds-panel-2-rgb)) !important;
box-shadow: 0 0 18px rgb(var(--ds-accent-rgb) / .26) !important;
backdrop-filter: none !important;
}
}

/* Codex 在输入框后方另设一个深灰色滚动遮罩。保留遮挡滚动文字的渐变,
但让它使用任务页主题底色,避免形成独立的深色圆角底板。 */
html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__))
div.sticky.bottom-0 [class*="bg-gradient-to-t"][class*="via-token-main-surface-primary"] {
background-image: linear-gradient(
to top,
rgb(var(--ds-bg-rgb)) 0%,
rgb(var(--ds-bg-rgb)) 50%,
rgb(var(--ds-bg-rgb) / 0) 100%
) !important;
}

html[data-dream-skin="active"]:is([data-dream-task-mode="off"], [data-dream-art-task-mode="off"])
__DREAM_SELECTOR_SHELL_MAIN__:not(:has(__DREAM_SELECTOR_HOME_ROUTE_CSS__))
div.sticky.bottom-0 [class*="pointer-events-none"][class*="bg-gradient-to-t"][class*="from-token-main-surface-primary"] {
background-image: linear-gradient(
to top,
rgb(var(--ds-bg-rgb)) 0%,
rgb(var(--ds-bg-rgb) / 0) 100%
) !important;
}

html[data-dream-skin="active"] __DREAM_SELECTOR_HOME_UTILITY__ button,
html[data-dream-skin="active"] __DREAM_SELECTOR_COMPOSER_CHROME__ button:not([class~="bg-token-foreground"]) {
color: var(--ds-muted) !important;
Expand Down
Loading