爱意满满的作品展示区。

This topic created in 247 days ago, the information mentioned may be changed or developed.

✨ 2 小时我写了个在线生成 V 站自定义 CSS 工具

我是 V 站新人，看了 V 友帖子 inspired by V 友帖子，发现可以自定义配置 V 站 CSS 。有点手痒，就写了个小工具：

👉 V 站 Glass 主题定制

主要功能：

在线配置 → 一键生成 CSS
内置 Glass 风格 → 直接复制到 V 站自定义样式就行
适配了暗黑 Dark 模式
在线预览效果，免去反复试错

效果截图

1. V 站套用效果

设置页

按钮、Switch 开关等组件改为半透明玻璃风格，更有层次感：
V 站使用主题-设置页

首页

帖子列表卡片圆角 + 悬浮效果
徽章数字样式调整，更突出
整体色彩过渡更柔和

回复页

回复卡片玻璃化处理
引用区域和回复层级更清晰
整体阅读体验更轻盈

2. 工具页面效果

左侧配置区：选择预设主题 / 自定义主题，可直接复制生成的 CSS 。
右侧预览区：实时显示套用效果，方便快速对比。

工具页面效果截图

💬 小结

工具很简单，算是个小玩具，大家随便玩，欢迎交流～

👉 工具体验地址：rockfang.github.io/v2ex-skin-demo
👉 源码地址：github.com/rockfang/v2ex-skin-demo

V站

CSS工具

自定义样式

21 replies • 2025-09-25 18:08:11 +08:00

Just4L

Sep 17, 2025

很有意思哎，给大佬点个赞

Pipecraft

Sep 17, 2025

不错不错，点个 star 支持一下

sswfive

Sep 17, 2025

太有意思了~

krapnik

Sep 17, 2025

dark 模式下，左边[预设主题]的 tab 没有选中效果了

chendaye

Sep 17, 2025

666 ，已上车

jimmyC

Sep 17, 2025

确实可以

Bodo

Sep 17, 2025

昨天看到一个「 Apple has a private CSS property to add Liquid Glass effects to web content 」，但是不会直接在 Safari 等浏览器生效，不知道后期 Apple 会不会对 Safari 开放功能。对前端不熟悉，感兴趣可以研究下
https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

cooldish

Sep 17, 2025

@Crump 好呢，回头研究下。看看效果和兼容性如何。

cooldish

Sep 17, 2025

@krapnik 收到~，回头会修复的

Gnnbb

Sep 17, 2025

大佬牛的，不过帖子的回复数量貌似颜色没变哎

xiaoming1992

Sep 17, 2025

可以的，用上了，star 了。
p.s. 学到了一个函数 color-mix ，白干那么多年前端，没见过这个。。。
p.p.s. 任意 tab 下，“所有主题”页，pagination 组件的 .page_current 颜色貌似应该与 .count_livid 一致？

cooldish

Sep 17, 2025

感谢 V 友使用和回复。已经修复了如下问题：
1. 在线工具网站中：`dark 模式下，左边已选择的[预设主题]的没有选中效果了` 问题
2. 定制 CSS 中已修复 pagination 分页器组件当前选中分页块颜色异常问题

kasusa

Sep 17, 2025

可不可以设置一下把黑色模式的背景屏蔽掉。。。
比如这个主题黑色模式下却还是浅色背景特别扎眼。

cooldish

Sep 17, 2025

@kasusa 提得很好。已处理~。可刷新工具网站重新生成 css 使用。
或者在你配置的 css 末尾追加此样式代码：

#Wrapper.Night{background-image:none!important}#Wrapper.Night .box{border-bottom:none!important}

kasusa

Sep 17, 2025 via iPhone

@cooldish ok 我来试试

kasusa

Sep 17, 2025

@cooldish 很好有用欸，但是只是对电脑版的样式修改了，手机版还。。。

xiaoming1992

Sep 18, 2025

建议支持本地存储自定义预设配置，就比如你这次更新了功能，我想应用，可是点网址过去，所有配置都得重新手输，鬼还记得当时的参数是什么

cooldish

Sep 18, 2025

@xiaoming1992 感谢建议~

已经增加本地保存用户自定义主题功能。
1. 用户最新的通过滑块调节的主题会缓存。刷新页面会加载用户上次调节的主题
2. 新增手动保存用户自定义主题颜色功能。输入名称后保存到本地，并加载显示。

xiaoming1992

Sep 18, 2025

不嫌啰嗦的话再给个建议，导出的 css 可以在顶部添加你站点 url 的注释，这样下次想换个主题才能找得到你的站点嘛
===
例如: /* 主题定制： https://rockfang.github.io/v2ex-skin-demo/ */

cooldish

Sep 18, 2025

@xiaoming1992 😊 很好的建议。已添加

wujl100

Sep 25, 2025

这个好～有意思～