我是 V 站新人,看了 V 友帖子 inspired by V 友帖子,发现可以自定义配置 V 站 CSS 。 有点手痒,就写了个小工具:
主要功能:
按钮、Switch 开关等组件改为半透明玻璃风格,更有层次感:
左侧配置区:选择预设主题 / 自定义主题,可直接复制生成的 CSS 。
右侧预览区:实时显示套用效果,方便快速对比。
工具很简单,算是个小玩具,大家随便玩,欢迎交流~
工具体验地址:rockfang.github.io/v2ex-skin-demo
源码地址:github.com/rockfang/v2ex-skin-demo
![]() | 1 Just4L 23 天前 ![]() 很有意思哎,给大佬点个赞 |
![]() | 2 Pipecraft 23 天前 ![]() 不错不错,点个 star 支持一下 |
3 sswfive 23 天前 ![]() 太有意思了~ |
![]() | 4 krapnik 23 天前 ![]() dark 模式下,左边[预设主题]的 tab 没有选中效果了 |
![]() | 5 chendaye 23 天前 666 ,已上车 |
![]() | 6 jimmyC 23 天前 确实可以 |
![]() | 7 Crump 23 天前 昨天看到一个 「 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/ |
![]() | 10 Xyg12133617 23 天前 大佬牛的,不过帖子的回复数量貌似颜色没变哎 |
![]() | 11 xiaoming1992 22 天前 ![]() 可以的,用上了,star 了。 p.s. 学到了一个函数 color-mix ,白干那么多年前端,没见过这个。。。 p.p.s. 任意 tab 下,“所有主题”页,pagination 组件的 .page_current 颜色貌似应该与 .count_livid 一致? |
![]() | 12 cooldish OP 感谢 V 友使用和回复。已经修复了如下问题: 1. 在线工具网站中:`dark 模式下,左边已选择的[预设主题]的没有选中效果了` 问题 2. 定制 CSS 中已修复 pagination 分页器组件当前选中分页块颜色异常问题 |
![]() | 13 kasusa 22 天前 ![]() 可不可以设置一下把黑色模式的背景屏蔽掉。。。 比如这个主题黑色模式下却还是浅色背景特别扎眼。 |
![]() | 14 cooldish OP @kasusa 提得很好。已处理~。可刷新工具网站重新生成 css 使用。 或者在你配置的 css 末尾追加此样式代码: #Wrapper.Night{background-image:none!important}#Wrapper.Night .box{border-bottom:none!important} |
![]() | 17 xiaoming1992 22 天前 建议支持 本地存储 自定义预设配置,就比如你这次更新了功能,我想应用,可是点网址过去,所有配置都得重新手输,鬼还记得当时的参数是什么 |
![]() | 18 cooldish OP ![]() @xiaoming1992 感谢建议~ 已经增加本地保存用户自定义主题功能。 1. 用户最新的通过滑块调节的主题会缓存。 刷新页面会加载用户上次调节的主题 2. 新增手动保存用户自定义主题颜色功能。 输入名称后保存到本地,并加载显示。 |
![]() | 19 xiaoming1992 21 天前 不嫌嗦的话再给个建议,导出的 css 可以在顶部添加你站点 url 的注释,这样下次想换个主题才能找得到你的站点嘛 === 例如: /* 主题定制: https://rockfang.github.io/v2ex-skin-demo/ */ |
![]() | 20 cooldish OP @xiaoming1992 很好的建议。已添加 |
21 wujl100 14 天前 这个好~有意思~ |