打开前端项目，在 src 项目下创建一个 theme 文件夹用来保存主题样式相关的 css 和 js 文件。我这里默认有两种主题，分别是黑夜和白昼。你可以根据自己的项目情况来设置有多少种主题。...我使用的演示项目是基于 react 的，vue 项目也是差不多的，都是相通的 在 App.tsx 组件中导入两个修改主题的方法 import '..../App.css' import {Select} from "antd"; import {useState} from "react"; import dark from "....一个 dark.css,一个 light.css,然后在文件中分别写入对应主题下的样式 [data-theme="dark"] { --bgColor: #052341; } [data-theme...dark 主题为默认主题。
我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。...顺便插一句，如果大家纠结用 Sass 还是 Less，可以看一下这篇文章 CSS 预处理器中的循环，个人不建议用 Less，请原谅我无意引战?。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。...mat-table 对表格列宽的首选操控方式是 CSS，起初我对这种方式也存在疑虑，但是在我亲自封装了 ng-zorro-antd 的表格组件之后，我发现一切都很自然。...这让我想起前端流行的一句话，“凡事能用 CSS 完成的就不要用 JS”，这也是我不建议大家用 Less 的原因之一。 ng-matero 的表格示例是最简单的业务表格，可以参考其实现方法。
文章开始之前，推荐一些别人写的很好的文章！感兴趣的也可以去读一下哦！ 今日推荐：从MVC到DDD，该如何下手重构？...而本文就提供了个比较成功的实践经验，值得学习观摩。 言归正传，前端实现主题换肤功能的几种方案： 方案一：全局覆写主题样式 /* ....-- 当然你也可以靠 `js` 注入和修改主题 `document.documentElement.classList.add('blue')` --> 设定一个优先级比较高的样式类，去覆写全局样式。...每次只加载了一份主题样式文件，以此减少了包体积。 另外，切换主题时，由于无法比较简单的清除之前的主题样式，所以还是需要一个顶层的主题样式类。.../vars.less'; .wrapper { color: @color; } 至于 CSS 变量要不要再转为 Less 变量，方便了解变量来源，我个人觉得没有必要。 邀请人：一起重学前端
暗黑模式使用一种较深的配色方案，这种配色作用于整个系统，现在大部分网站也加入了暗黑模式，包括 Tailwindcss、antd design 等都支持了暗黑模式，因此我们的网站也要适配系统皮肤。...css 实现 暗模式传统上是通过使用 prefers-color-scheme 媒体查询来实现的，当暗黑模式被激活时，它可以重新应用一套样式。...: white; background: black; } } React hooks 实现 前端页面中除了使用 css 实现外，还有很大部分是使用 JavaScript 实现的，比如 echart...style={{ height: 500 }}> ) } 效果 代码示例 codesandbox 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得...相关文章 使用 CSS variables 和 Tailwind css 实现主题换肤 使用 PostCSS 插件让你的网站支持暗黑模式
通过这个项目，我将分享如何使用Vite、TypeScript、React Router和Ant Design来搭建一个博客项目，并不断分享我所遇到的问题，以及如何解决它。...Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。五、创建React项目现在，我们已经了解了一些常用的React工具和库，可以开始创建一个React项目了。...可以使用以下命令来安装Ant Design：npm install antd或者yarn add antd5....我们了解了这些工具和库的特点和用途，并且演示了如何使用这些工具和库来构建一个现代化的React应用程序。...希望这篇博客可以帮助您更好地了解React生态系统，并且能够帮助您更加高效地开发React应用程序，我的博客项目也在持续开发中，我将不定期分享我的一些关于React的总结，我们下期再见。
方案一： 两种主题模式（light/dark），需要分别两个 less 文件来定义这两套颜色变量 Light-colors.less dark-colors.less 两种模式下，值固定不变的颜色变量单独定义一个文件...但是问题来了 1、如何在index.less 中来判断使用light-colors 还是 dark-colors 呢？...落实一个方案的时候，要根据自己的项目情况做分析，做出一个符合自身项目的解决方案才是硬道理，而不是一味的生搬硬套。 于是该方案毙掉，继续思考下一个方案。...方案四： 时代好了，浏览器普遍支持Css3变量了，基于Css3 Variable 共享全局主题变量看起来就是一个很通用的方案了。...变量的js文件（variable.js），将需要定义的css变量存放到该js文件，品牌色及功能色等通过antd算法计算获得； import { getAlphaColor } from ".
那我首先想到的是用 js 附加 class，然后针对新增的 class 进行样式覆写。 但是在尝试过程中，发现不论我如何推迟附加 class 的 js 执行时间，它永远早于 twikoo 评论加载。...原因还在排查…… 才怪咧，我它喵直接跑去提 issue，才不要在这排查 接着就是气泡话评论，用伪类可以轻松实现气泡的小三角，但是因为更改了 overflow 的可见性，如果发横向长图时，若添加了灯箱，存在图片出框可能性...如果有更好的方案可以在评论区提示。 本方案不具备普适性，不会做成 NPM 插件，对于细节上的，如头像宽度，配色方案可以参考注释自行调整。各类配色效果也希望可以分享到评论区。我想做一个展示集锦。...media="defer" onload="this.media='all'"> 推荐阅读 魔改方向 教程原贴 为 Butterfly 主题下的 twikoo 添加灯箱 为 butterfly 主题的...twikoo 添加图片点击放大功能 洪哥 Acrylic 主题（即原 Butterfly-heo）定制版评论样式微调，与本文可兼容 Twikoo 魔改样式分享 - 博客评论系统的定制皮肤 对 Butterfly
我首先想到的能否直接去官网能否直接定制并下载 CSS 文件。 然而答案是 否定 的。...作为业界优秀的开源项目，Antd 提供了自定义定制主题样式的方法（在官网 定制主题 就有详细的说明）然而 Antd 却只提供了 LESS 样式定制的功能，并没有提供现成的生成 CSS 样式文件定制并下载的功能...2、寻找方案 自定义 CSS 样式主题的需求估计并不是我自己独有的，所以 就先到网上找找是否有现成的解决方案 。...result.css 上述仅仅是描述了生成 CSS 样式的方法，不过我怎么能先预览覆盖样式变量后 Antd 的主题模样呢？...搭配本文所述的方法，就能分分钟就搞定 Antd 自定义 CSS 主题样式的需求了。
也就是在当天，我给自己的博客 github 上面提交了一个 issue，也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的，这一拖，两个月就过去了，我的主题切换功能才终于上线了。...你看，云顶之奕都元素崛起了，各个英雄都穿上了元素皮肤，我还有什么理由不给自己博客来一套暗色主题呢，其实这才是我更新暗色主题的真正动力，哈哈哈哈…… 主题切换思路 既然要上线主题切换功能，那必然先要搞清楚怎么可以切换主题...提供一份css文件 我的暗色主题色调完全是根据 V2EX 的色调来的，然后在一些地方做了自己的修改而已。...important; } 其他就没有什么特别要强调的，主题样式都是要看自己的感觉，慢慢调试就行了，我的建议是直接在 F12 模式下面调试好样式，然后再写到 css 文件中，而不是写到 css 文件中然后去调试...我的解决办法的是把 js 中判断主题策略的方法删除掉，然后把判断主题状态的事情交给后端来做。
scss全局变量 之后来讲一下如何在vite中配置scss全局变量。首先，我们可以在自己喜欢的目录创建我们的scss文件（通常是assets目录），用来存储颜色变量、尺寸变量，以及常用的mixin。...之后就是我们如何使用这些变量覆盖element-plus的默认样式。element-plus官网介绍了使用scss和css变量两种覆盖方式，这里我们介绍一下如何使用scss覆盖。...alpha: 0.5) 解决办法我知道的有两种，一种就是背景单独搞一个dom，然后降低透明度，然后和内容重叠起来。...import 'element-plus/theme-chalk/dark/css-vars.css' 注意，使用用户自定义主题的方式的话，我们肯定要在页面初始化的时候设置一遍用户设置的样式变量，设置的时候需要用到...nextTick，否则可能会不生效（被element的暗黑模式样式覆盖了）。
babel-plugin-import：是配置可供开发者按需引用 antd 组件的一个 Babel 插件 less 和 less-loader：是我们用于定制化 antd 的主题需要的 Webpack...，使用 override API，接收两个修改配置的函数调用，fixBabelImports 用于配置 antd 的按需引用，addLessLoader 用于配置 antd 的主题，这里我们使用了 Ant...Design 4.0 新带来的 Dark Mode（暗色模式），然后配置了主题色为图雀社区的主题色：#02b875 ，代表希望的绿色。?...自此，我们就引入了 antd 组件库，并进行了按需配置使用以及配置主题色和使用了 Ant Design 最新的暗色主题 -- Dark Mode。...antd 组件库，并使用 react-app-rewired 替换默认的 react-scripts 来完成对 CRA 的 Webpack 配置进行修改，以是我们可以获得 antd 组件的按需引用和主题定制的功能
你可以看到 ▫ 一个新的web UI轻量级框架 ▫ 同用IDE组件库和antd产生的冲突如何解决 ▫ 它们如何在Taier上完美配合 Keep It Simple, Stupid....在Taier经过数百家企业客户的生产环境实战检验之后的今天，我们想用今天这篇文章跟大家分享一些在 Taier 的搭建过程中时遇到的Molecule 与antd如何适配的解决经验和它们在 Web IDE...经过无数次摸索实践和不断调整，我们找到了解决办法： 如何解决风格冲突 首先，整体风格颜色的冲突可以通过自定义主题色来解决，而 Ant Design 和 Molecule 都具备通过配置的方式来实现修改整体主题色...Molecule 强大的功能之一就是可以基于自己的喜好切换不同的主题，例如：Dark Default 主题或 Light Default 主题。...而 Molecule 可以方便地切换主题的原因简单来说是基于 CSS 变量实现的。而目前 Ant Design 的动态主题功能仍处于实验性的功能，故我们另辟蹊径。
✓context 的学习主要分为如下三个部分 一、 如何创建 context 二、 顶层组件中如何传递数据 三、 子组件中如何获取数据 一、如何创建 context 我们可以使用 createContext...✓value 可以是任何类型，你可以根据自己的项目需要设计合适的数据类型。 三、如何获取 context 中的值 在任意被包裹的子组件中，我们可以使用 use 来获取 context 中的值。.../index.css' function Index() { return ( 切换主题，并记录切换次数...并不推荐 4、换肤方案二 我们可以换一种高级一点的用法来完成皮肤的切换功能。那就是利用 CSS 变量。 ✓CSS 变量又称之为自定义属性。...我们熟知的 antd 中就大量运用了自定义属性。 声明一个自定义属性，需要以 -- 开头，属性值可以是任何有效的 CSS 值。
然后我就重新发现了 tailwindcss。这次我强迫自己不要去思考写出来的结果有多糟心，反正用了再说。...✓margin: 1px 与 m-1 的映射关系可以自己配置 对我来说，这个地方爽在哪呢？这不就跟我以前输入 css 样式的时候，基本上一致的补全逻辑吗。...因为我总能时不时遇到有人在群里问如何修改 antd 的样式。如果能够比较自由定制自己的样式，或者小幅度调整组件样式，应该会很爽。...4、在 vite + react 中引入 具体如何引入，有许多文章都有说，大家可以用的时候针对性的去寻找解决方案。...我这里就简单介绍一下如何在 vite + react 的项目中引入 ✓后续我准备在我的小程序项目中引入 tailwindcss，如果考虑到要兼容 PC 端，兼容我之前的那一套响应式方案，那么复杂度就上来了
但是我们也不是只看最外面这一层，当你深入到更底层的逻辑时，最后看到的还是 div，语义表现力不足的事实总是存在的 因此为了解决这个问题，在 antd 等优秀的开源框架中，为了增强组件的语义表现力，会提供...这其实是 UI 表达的最佳实践。但是 antd 等框架对于这种思路的践行并不是非常彻底。...很多时候也源自于 UI 组件库本身也没有想要去做一个大而全的布局思维重构，从而导致 antd 虽然提出了这个方向和构思，但是普通开发者也不一定能领会到。...--随意搞的一个简易案例来说明这个问题--> <button class="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm...但是原子化 CSS 毕竟不是直接编写样式，他的适用场景会受到很大的限制。 并且当我们在思考如何复用原子化 CSS 的时候，其实就表示，开发者确实在期待一套完整的，全新的 UI 布局表述方式。
大家好，我是小丞同学，一名大二的前端爱好者 这篇文章是学习 React 中 React antd组件库的学习笔记 非常感谢你的阅读，不对的地方欢迎指正 愿你忠于自己，热爱生活 引言...我们这里学习的是 Ant-design （应该是这样），它有很多的组件供我们使用 按钮，日历，这些都是非常常用的组件，我们一起看看如何使用吧 1....add antd 在我们需要使用的文件下引入，我这里是在 App.jsx 内引入 import { Button } from 'antd' 在引入的同时，暴露出要使用的组件名 Button 推荐去官方文档查看...但是就这样你会发现按钮少了样式 我们还需要引入 antd 的 CSS 文件 @import '/node_modules/antd/dist/antd.less'; 可以在 node_modules...@import '/node_modules/antd/dist/antd.less'; 注意一定要添加分号结尾，这是一个非常容易犯的错误 可见，我们成功的将主题色修改成了红色 antd ui组件库就记这么多
前言 最近公司的一个新项目上马，我被安排来做项目初始化，前端初始化的时候使用了 Vue3 + Tailwind CSS + NaiveUI，在搞基础布局的主题变化时出现了本次插曲。...基础背景 我使用的 AI 工具是安装在自己 Slack 频道的 Claude App； 我对 Tailwind CSS 的实现原理一无所知，我只知道简单的使用方法。...经过直接提问发现无法得到我想要的答案，于是我开始尝试从实现原理层面进行引导，让 AI 帮忙生成解决方案，我尝试过如下提问： 如何创建类似 dark:* 的自定义形式 Tailwind CSS 如何自定义实现类似...dark:* 的效果 Tailwind CSS 如何自定义实现类似 dark:* 的功能，例如 custom:* Tailwind CSS 如何自定义实现类似 dark:* 的功能实现 light:*...然后我问了： Tailwind CSS 如何表达 .abc .bg-white Tailwind CSS 如何匹配父 class Tailwind CSS 如何实现父 class 选择器 这里我是想：在当前项目中所谓的主题模式是通过控制
如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式 通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包 使用...react-app-rewired + customize-cra 组合覆盖配置 使用 craco 覆盖配置 第二种方式相对第三种略复杂一些，我自己很有体会并且我们注意到最新的AntDesign4 官方也开始推荐... export default hot(module)(App) Antd自定义主题配置 配置antd主题颜色可随意对以下方案就行选取 结合lessOptions step1：运行 yarn...因此在后续的编码中，我们可以随便使用这两种方式构建自己的webpack配置。...，但是，仍然推荐你优先阅读 craco 提供的快捷配置，把解决不了的配置放到 configure 里解决； * - 这里选择配置为函数，与直接定义 configure 对象方式互斥；
转眼上次这篇博客搭建小记已经过去一年之久，同时也得到了大家的喜欢和认可，能把我知道的一些知识和技巧分享给大家我很开心！...欢迎大家访问我的小破站 ：小破站 # 1. 主题选择 在主题选择这方面，我依然选择的是 butterfly 主题，这里非常感谢这些开源的大佬们，才能让我们看到这些好用又美观的主题。...这次我的博客还是基于 butterfly 主题的一些魔改，按照自己的折腾和参照大佬的想法，慢慢琢磨出来的！！！ # 2....其中， 184 行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节； 253 行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色： beautify() headStyle...其余主题需要自己填写父元素容器。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
