如何获取Discord CSS样式文件实现同款UI设计风格？

可用的开源Discord风格样式资源 #

• 社区维护的纯CSS Discord样式库：这类资源已经完整还原了Discord深浅模式下的所有基础组件样式，你要的蓝底白字圆角按钮、复选框、输入框、弹窗、导航栏都已经写好了，直接引入CSS文件后给元素加对应类名就能用，很多还额外做了消息气泡、用户身份组标、频道列表这类机器人网站高频用到的专属组件，不用自己额外调样式。
• 前端框架适配版组件库：如果你是用React、Vue这类框架开发，直接找对应框架的Discord风格组件库就行，不光样式对齐，连按钮悬停动效、下拉菜单过渡、弹窗层级逻辑都和Discord原生体验一致，开发效率比纯写CSS高很多。
• 独立设计Token包：如果你不想引入整份CSS/组件库，也可以找社区整理好的Discord设计规范变量，包括品牌蓝的色值、不同层级的圆角大小、阴影参数、间距规范、字体设置，直接把这些变量写到自己的CSS文件里自定义样式就行，灵活度最高。

关于直接提取Discord官网样式的问题 #

绝对不建议直接复制扒取Discord官方站点的样式表使用，原因有两个：

• 实用性很差：Discord官网的样式是和它自身的业务逻辑、前端打包规则深度绑定的，你抠下来的CSS会带大量只有它自己站点用得到的冗余类名，还依赖它独有的字体、图标资源、动态生成类名逻辑，直接套到自己项目里很容易出现样式冲突、响应式错乱、交互失效的问题，光是清理冗余代码、补全缺失依赖的工作量，比你用现成社区库搭完整站还大。
• 存在合规风险：Discord的前端代码、视觉设计资源都受版权保护，你直接提取复用在自己公开上线的项目里，会有侵权的问题。

选社区开源资源的时候记得留意下开源协议，大部分MIT协议的资源都可以免费用于个人和商业项目，只要保留对应的版权声明即可。

内容的提问来源于stack exchange，提问作者LaurenzMorbe