本示例是AntDesign Blazor的入門示例，在學(xué)習(xí)的同時分享出來辅鲸，以供新手參考厢呵。
示例代碼倉庫：https://gitee.com/known/BlazorDemo
1. 學(xué)習(xí)目標(biāo)
- 暗黑模式切換
- 查找組件樣式
- 覆寫組件樣式
2. 添加暗黑模式切換組件
1）雙擊打開MainLayout.razor文件从诲，在header區(qū)域添加Switch組件及其事件來切換暗黑模式
- 添加主題變量果元，默認(rèn)為
light - 添加切換組件
Switch - 添加主題切換事件更改主題變量，暗黑模式時腾降，變量改為
dark
image.png
2）點(diǎn)擊運(yùn)行按鈕查看頁面效果
image.png
3. 查找頁面組件樣式
- 打開瀏覽器開發(fā)者工具拣度，選中要更改樣式的組件，查找該組件帶有
color和background屬性的樣式類，下面以RangePicker組件為例蜡娶，找到樣式類為.ant-picker混卵，切換暗黑模式時，覆蓋該類的color窖张，其他組件查找方法相同
image.png
4. 覆寫組件暗黑樣式
1）雙擊打開app.css文件幕随，覆寫dark模式下AntDesign組件的樣式類
- 覆寫
color和background的顏色 - 通過
.dark .xxx {}級聯(lián)選擇方式來覆寫樣式
image.png
- 本示例樣式代碼如下
.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;
}
- 點(diǎn)擊運(yùn)行按鈕查看頁面效果
image.png
