AntDesignBlazor示例——暗黑模式
2024/1/14 1:02:22
本文主要是介绍AntDesignBlazor示例——暗黑模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本示例是AntDesign Blazor
的入门示例,在学习的同时分享出来,以供新手参考。
示例代码仓库:https://gitee.com/known/BlazorDemo
1. 学习目标
- 暗黑模式切换
- 查找组件样式
- 覆写组件样式
2. 添加暗黑模式切换组件
1)双击打开MainLayout.razor
文件,在header
区域添加Switch
组件及其事件来切换暗黑模式
- 添加主题变量,默认为
light
- 添加切换组件
Switch
- 添加主题切换事件更改主题变量,暗黑模式时,变量改为
dark
2)点击运行按钮查看页面效果
3. 查找页面组件样式
- 打开浏览器开发者工具,选中要更改样式的组件,查找该组件带有
color
和background
属性的样式类,下面以RangePicker
组件为例,找到样式类为.ant-picker
,切换暗黑模式时,覆盖该类的color
,其他组件查找方法相同
4. 覆写组件暗黑样式
1)双击打开app.css
文件,覆写dark
模式下AntDesign
组件的样式类
- 覆写
color
和background
的颜色 - 通过
.dark .xxx {}
级联选择方式来覆写样式
- 本示例样式代码如下
.dark, .dark .ant-picker, .dark .ant-table-thead > tr > th, .dark .ant-table-tbody > tr > td, .dark .ant-pagination-item, .dark .ant-pagination-options-quick-jumper input, .dark .ant-pagination-prev .ant-pagination-item-link, .dark .ant-pagination-next .ant-pagination-item-link, .dark .ant-select:not(.ant-select-customize-input) .ant-select-selector { background-color:#202020;color:#d8d8d8; } .dark .ant-picker, .dark .ant-table-thead > tr > th, .dark .ant-table-tbody > tr > td { border-color:rgba(253, 253, 253, 0.12); } .dark h1, .dark .ant-select-arrow, .dark .ant-picker-input > input, .dark .ant-picker-separator, .dark .ant-picker-suffix, .dark .ant-picker-clear, .dark .ant-pagination, .dark .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis, .dark .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis { color:#d8d8d8; }
- 点击运行按钮查看页面效果
5. 视频
这篇关于AntDesignBlazor示例——暗黑模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!