闲来无事，利用 AI 整了个类似 Liquid Glass 风格的 V2EX 主题

[Crump]

由于对于前端方向的技能实在是太渣了，所以利用 AI 并结合了 @lawsiki 的仿微信风格 CSS 样式，前人栽树后人乘凉，感谢 @lawsiki !!

该样式支持白天、夜间模式，喜欢的话自行复制粘贴。

https://i.imgur.com/tTyTVHW.png https://i.imgur.com/lzKRuAj.png

/* =======================
 macOS 26 Liquid Glass 主题 - 浅色模式
 ======================= */

/* 顶栏 */
div#Top {
position: fixed;
width: 100%;
border-bottom: 0px;
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 0 0 16px 16px;
z-index: 9999;
transition: all 0.3s ease;
}

div#Wrapper { padding-top: 60px; }

/* 对话框 */
.reply_content:before {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(255, 255, 255, 0.6);
position: absolute;
top: 10px;
left: -6px;
}

.reply_content {
font-size: 14px;
line-height: 1.6;
color: var(--box-foreground-color);
word-break: break-word;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 12px;
padding: 10px 14px;
position: relative;
width: fit-content;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

/* 列表单元 */
.cell {
padding: 12px;
font-size: 14px;
line-height: 150%;
text-align: left;
border-bottom: 0px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border-radius: 10px;
margin-bottom: 10px;
transition: background 0.3s ease;
}

.cell:hover { background: rgba(255, 255, 255, 0.45); }

/* 隐藏回复时间,回复按钮 */
.ago, .fr { display: none; }
form+div>.fr { display: inline; }
.cell:hover .ago,.cell:hover .fr { display: inline; }

/* 头像 */
.cell .avatar { width: 42px; border-radius: 12px; }

/* 背景 */
#Wrapper {
background: linear-gradient(135deg, rgba(240,243,255,0.8), rgba(255,255,255,0.9)) !important;
background-size: cover;
}

/* 卡片 */
.box {
border: 0px !important;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* 底部按钮条 */
.topic_buttons {
padding: 6px 10px;
font-size: 14px;
line-height: 120%;
border-top: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 0 0 16px 16px;
}

/* 超级按钮 */
.super.button {
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
padding: 6px 18px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 10px;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif;
display: inline-block;
line-height: 1.4;
transition: all 0.25s ease;
}
.super.button:hover {
background: rgba(255,255,255,0.6);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* 右栏背景区 */
#Rightbar > div:nth-child(2) > .cell {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px;
color: #f5f5f7;
}

/* 发布页内容 */
.cell.topic_content.markdown_body {
background: rgba(255,255,255,0.5) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px;
color: #1C1C1E !important;
}

/* 用户名 */
#Rightbar>.cell span.bigger>a {
color: #ffffff;
font-size: 20px;
font-weight: 500;
}

/* 回复数量 */
a.count_livid:active,
a.count_livid:link {
background: linear-gradient(135deg, #ff6961, #ff8782);
color: white !important;
border-radius: 8px;
padding: 2px 6px;
}

/* 链接交互 */
a:hover, a.topic-link:hover {
text-decoration: none;
opacity: 0.85;
transition: opacity 0.2s ease;
}

/* 回复框 */
textarea#reply_content {
border: 0px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
padding: 10px;
font-size: 14px;
transition: all 0.3s ease;
}
textarea#reply_content:focus {
background: rgba(255,255,255,0.55);
outline: none;
}

/* 我的回复 */
.self .reply_content {
background: rgba(48, 209, 88, 0.6);
color: #fff;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.self .reply_content:after {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(48, 209, 88, 0.6);
position: absolute;
top: 10px;
right: -6px;
}

/* 标题绿标 */
.header h1:before {
border-left: 4px solid #30d158;
padding-left: 10px;
content: "";
}
.header h1 {
font-size: 22px;
font-weight: 500;
color: #1c1c1e;
}

/* 提交按钮 */
input.normal.button,button.normal.button {
background: linear-gradient(135deg, #30d158, #34c759);
color: #FFF !important;
font-size: 14px;
font-weight: 500;
border:0px;
border-radius: 10px;
padding: 8px 20px;
transition: all 0.3s ease;
}
input.normal.button:hover:enabled,button.normal.button:hover:enabled {
background: linear-gradient(135deg, #4cd964, #30d158);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(48,209,88,0.3);
}

/* =======================
 macOS 26 Liquid Glass - 暗色模式
 ======================= */
body #Wrapper.Night {
background: none !important;
background-image: none !important;
background-color: #141414 !important;
--box-border-color: #2e445b;
}

/* 夜间主题链接 */
.Night a.topic-link:active,
.Night a.topic-link:link { color: #a3b4c1; }
.Night a.topic-link:visited { color: #606060; }

/* 右栏淡色 */
.Night #Rightbar .fade { color: #1C1C1E; }

/* 卡片 */
.Night .box {
border: none;
background: rgba(20,20,20,0.55);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* 按钮 */
.Night .normal.button,
.Night .super.button {
color: #fff !important;
border-color: rgba(48,209,88,0.5) !important;
background: rgba(48,209,88,0.4) !important;
}
.Night td.normal.button.disable_now,
.Night td.super.button.disable_now {
color: rgba(255, 255, 255, 0.3) !important;
border-color: #434343 !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.Night .normal.button:hover:enabled,
.Night .super.button:hover:enabled {
background: rgba(48,209,88,0.6) !important;
box-shadow: 0 6px 18px rgba(48,209,88,0.3);
}

/* 文本高亮 */
.Night .outdated { color: #5d9bad; }

/* 图片 */
.Night img { filter: brightness(0.9); }

/* 话题信息 */
.Night .topic_info a { color: #738292; }

/* 选择框 */
.Night select { color: #d1d5d9; background: rgba(20,20,20,0.35); }
.Night .select2-container--default .select2-selection--single {
border-color: var(--box-border-color);
background-color: rgba(24,34,45,0.75);
}
.Night .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #d1d5d9;
}

/* 表单卡片 */
.Night .box form .cell { background-color: transparent !important; }
.Night .selectboxit-default-arrow { border-top: 4px solid #fff; }
.Night select,
.Night .sl,
.Night .ml,
.Night .select2-container--default .select2-selection--single { border-color: var(--box-border-color); }

/* 代码编辑器 */
.Night .CodeMirror-scroll { color: #fff; }

/* 对话框气泡 */
.Night .reply_content {
background: rgba(28,28,30,0.65);
color: #f5f5f7;
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.Night .self .reply_content {
background: rgba(48,209,88,0.55);
}

没时间更新了，请使用
@cooldish V 站 Glass 主题定制

我把 OP 的想法实现得更工程化了一些，欢迎体验：

https://rockfang.github.io/v2ex-skin-demo/

或查看介绍：
https://www.v2ex.com/t/1159830#reply0

[cheung]

之前手搓了一个 Liquid Glass 风格站点： https://scredit.cards/

[itechify]

用上了

[gouLang]

牛逼兄弟 用上了

[Mangozhen]

Bug 比较多, 白天主题下，很多地方看不清。

[freekindom]

@cheung 兄弟你这个好看。怎么没人回复你呢。

[PeekPop]

不是想象中的样子，有 Glass 但没有 liquid 🤞

[Trojians]

已经用上了，感谢！

[itechify]

目前发现的两个小问题
- 提交按钮 padding 导致按钮文字偏离，注释后正常了
```
/* 提交按钮 */
input.normal.button,button.normal.button {
background: linear-gradient(135deg, #30d158, #34c759);
color: #FFF !important;
font-size: 14px;
font-weight: 500;
border:0px;
border-radius: 10px;
/* padding: 8px 20px; */
transition: all 0.3s ease;
}
```

- 顶栏 z-index 与 V2EX Polish 插件的弹窗冲突，从 99999 调整为 887 即可，或许可以用变量来代替？
```
/* 顶栏 */
div#Top {
position: fixed;
width: 100%;
border-bottom: 0px;
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 0 0 16px 16px;
z-index: 887;
transition: all 0.3s ease;
}
```

[Crump]

@Mangozhen 白天模式建议搭配一张背景图，有时间了再来修改细节！
@ltuxer 搭配一张背景图相对看起来好一点，好像纯 css 很难实现 liquid ，不知道是不是不够了解这个，前端知识实在有限。

@oneisall8955 谢谢反馈，有时间了我再来修改下。目前白天模式建议搭配一张背景图。

[Crump]

@cheung 对前端知识有限，请问下是不是纯 css 很难实现 Liquid ？

[ArrayReduce]

@Crump #10 纯 css 很难实现，因为 liquid 不同形状和材质都有不同的折射率等，可以看看 https://kube.io/blog/liquid-glass-css-svg/ 这个文章里的实现思路

[Crump]

@ArrayReduce 感谢！

[itechify]

还有个比较有趣的 bug ，鼠标移动的收起回复会抖动，有点跟鼠标捉迷藏的意思。
不清楚是 V2EX Polish 插件冲突还是本身的原因

[itechify]

[cooldish]

挺有趣的，我感觉我可以写个 demo ，支持选择预设主题和动态配置主题。提供复制 css 使用功能~
bug 我可以来解决~

[dosmlp]

这不就是前端三把斧，圆角阴影模糊，哪里 glass 了

[cooldish]

@Crump @oneisall8955
我把 OP 的想法实现得更工程化了一些，欢迎体验：

https://rockfang.github.io/v2ex-skin-demo/

或查看介绍：
https://www.v2ex.com/t/1159830#reply0