AntDesignBlazor示例——暗黑模式

本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。

示例代码仓库:https://gitee.com/known/BlazorDemo

1. 学习目标

  • 暗黑模式切换
  • 查找组件样式
  • 覆写组件样式

2. 添加暗黑模式切换组件

1)双击打开MainLayout.razor文件,在header区域添加Switch组件及其事件来切换暗黑模式

  • 添加主题变量,默认为light
  • 添加切换组件Switch
  • 添加主题切换事件更改主题变量,暗黑模式时,变量改为dark

2)点击运行按钮查看页面效果

3. 查找页面组件样式

  • 打开浏览器开发者工具,选中要更改样式的组件,查找该组件带有colorbackground属性的样式类,下面以RangePicker组件为例,找到样式类为.ant-picker,切换暗黑模式时,覆盖该类的color,其他组件查找方法相同

4. 覆写组件暗黑样式

1)双击打开app.css文件,覆写dark模式下AntDesign组件的样式类

  • 覆写colorbackground的颜色
  • 通过.dark .xxx {}级联选择方式来覆写样式
  • 本示例样式代码如下
css 复制代码
.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;
}
  1. 点击运行按钮查看页面效果

5. 视频

相关推荐
tianxingzhe3716 天前
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
ui·blazor·abp·.net blazor·radzen blazor
景少17 天前
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
blazor
程序设计实验室1 个月前
Blazor Hybrid 实战体验:那些你可能没预料到的坑没预料到的坑
c#·blazor
程序设计实验室1 个月前
PC软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
c#·blazor
known1 个月前
Blazor开发框架Known-V2.0.13
blazor·known
known2 个月前
Blazor静态服务端呈现(静态SSR)身份认证
blazor
known2 个月前
Blazor开发框架Known-V2.0.10
blazor·known
lee5763 个月前
.net 8.0 下 Blazor 通过 SignalR 与 Winform 交互
blazor·signalr
known3 个月前
Blazor开发框架Known-V2.0.9
blazor·known
界面开发小八哥3 个月前
界面控件DevExpress Blazor v24.2路线图预览——支持.NET 9、新增桑基图等
.net·界面控件·blazor·devexpress·ui开发