本示例是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;
}

2. 點擊運行按鈕查看頁面效果

5. 視頻

總結

以上是生活随笔為你收集整理的AntDesignBlazor示例——暗黑模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。