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

由于对于前端方向的技能实在是太渣了，所以利用 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(4,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); }