高端网站建设万维科技,个人电脑做服务器映射网站,对互联网网站的理解,一六八互联网站建设本示例是AntDesign Blazor的入门示例#xff0c;在学习的同时分享出来#xff0c;以供新手参考。
示例代码仓库#xff1a;https://gitee.com/known/BlazorDemo
1. 学习目标
暗黑模式切换查找组件样式覆写组件样式
2. 添加暗黑模式切换组件
1#xff09;双击打开MainL…本示例是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. 视频
