AntDesignBlazor示例——暗黑模式

原创 已于 2024-01-13 20:15:11 修改 · 1.2k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Blazor #AntDesign #前端

于 2024-01-13 20:10:48 首次发布
本文介绍了如何在AntDesignBlazor中实现暗黑模式切换，包括添加Switch组件、使用开发者工具查找和覆写组件样式，以及在app.css中定制暗黑模式下的样式。通过实例演示了如何修改RangePicker等组件的外观。

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

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

1. 学习目标

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

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

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

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

image

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

image

3. 查找页面组件样式

  • 打开浏览器开发者工具，选中要更改样式的组件，查找该组件带有color和background属性的样式类，下面以RangePicker组件为例，找到样式类为.ant-picker，切换暗黑模式时
最低0.47元/天 解锁文章
Blazor + Ant Design + .NET 5快速开发框架（7） webApi设计思路
qq_32174441的博客
04-19 1769
前言 虽然一直在更新代码，但是文章写的比较少了，因为一直再写webApi，涉及到图片可能比较少，而且一直再改，因为我也不太确定用哪种方法或者设计模式是最好的，个人定义是使用方便，快速开发，所以摒弃了很多复杂设计，用最简单但不简陋的方法设计出来。 系统架构 初始想法很简单，先做出来，然后在修改添加功能，直至完善，这是一个初始的设计思路，界面发送http请求到webApi，然后请求到控制器，控制器调用请求方法，请求方法调用请求数据，然后返回，中间有一步是通过控制器，将model转为viewModel，
Blazor + Ant Design + .NET 5快速开发框架（8）Ant Design Icon图标库
qq_32174441的博客
04-23 1994
前言 icon可以使网站一目了然，在网站中假如一个可以直接选择图标的blazor组件，由于Ant Design没提供可以直接显示图标的组件，这里打算自己弄一个，方式是把所有的icon名称拷贝下来，然后遍历显示就可以。 爬网站 我的用方式简单粗暴，直接ctrl+s把页面保存下来，然后利用正则提取。 正则表达式：<span class=\"ant-badge\" id=\"(.*?)\" _bl_(.*?)=\"\">(.*?)</span> 亲测好用，一共是420个图标，以后
AntDesign的黑暗Dark主题变量
08-11
Ant Design的黑暗Dark主题变量
ant-design-blazor 2025全新发布：企业级Blazor UI组件库的革命性升级
最新发布
gitblog_01173的博客
09-08 868
Blazor作为.NET生态中Web开发的新星，凭借C#全栈开发能力赢得了大量开发者青睐。但企业级应用开发中，你是否仍面临：组件功能单一、大数据渲染卡顿、交互体验欠佳、跨平台适配困难等痛点？ **ant-design-blazor 2025版（v1.4.x系列）** 带来**10+核心组件重构**、**3大性能突破**和**5项开发体验升级**，彻底解决这些难题。本文将带你全面掌握新特性，**1...
.NET进行客户端Web开发又一利器 - Ant Design Blazor
Dotnet9的专栏
06-20 1534
你好，我是Dotnet9，继上篇介绍Bootstrap风格的BlazorUI组件库后，今天我来介绍另一款Blazor UI组件库：一套基于 Ant Design 和 Blazor 的企业级组件库。 本文导航： 一、关于Ant Design Blazor 二、Ant Design Blazor的社区贡献 2.1 项目关注度 2.2 Ant Design官方认可 2.3 微软官方认可 三、Ant Design Blazor UI库介绍 四、Ant Design Blazor后续计划 五、Ant Desi
Ant Design Blazor入门（使用ant模板初始化项目及运行github代码）
qq_40600379的博客
03-21 4737
Ant Design Blazor支持MIT开源协议，Ant Design Blazor Pro支持Apache2.0开源协议。​ 使用CMD安装ant模板，可以帮助我们获取到一个项目模板。​
基于Labview的BS系统web的项目示例——数据库读写功能
10-30
基于Labview的BS系统web的项目示例——数据库读写功能 实现目标： 在上次笔记的基础上，添加数据库的读写功能 浏览器端通过：写入数据按钮，将数据传入后端，后端接收数据并写入数据库 浏览器端通过：读取数据按钮...
Java设计模式：工厂模式——图文+代码示例（通俗易懂）
12-21
Java设计模式中的工厂模式是一种创建型设计模式，其主要目的是为了解耦对象的创建与使用。工厂模式通过提供一个统一的接口或类来创建对象，使得客户端代码无需直接实例化对象，而是通过调用工厂方法来获取所需的对象...
UE4调DLL示例——成功
09-06
在提供的"UE4调DLL示例——成功"压缩包中，你应该能找到一个完整的示例，包括DLL项目和UE4工程。通过研究这些代码，你可以更深入地了解如何将DLL与UE4结合使用。这个示例将演示如何正确配置项目，编写必要的函数，...
教务管理系统示例——前端模板
qq_28917403的博客
10-12 2098
教务管理系统示例——前端模板 需要学习前端技术的看过来，我们一起学习、一起进度。龇牙！龇牙！龇牙！
java————23种设计模式-UML-类图及对应示例代码.doc
09-30
java————23种设计模式-UML-类图及对应示例代码.doc
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。 仍处于实验阶段，欢迎尝试并帮助我们进行改进。 访问进行预览。 安装 $ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } , 在Ant Design Pro中使用： :
ant-design-blazor：:rainbow:基于Ant Design和Blazor WebAssembly的一组企业级UI组件
02-03
蚂蚁设计西装外套 一组基于Ant Design和Blazor的企业级UI组件。 English | :sparkles: 产品特点 :rainbow: 专为Web应用程序设计的企业级UI。 :package: 开箱即用的一组高质量Blazor组件。 :two_hearts: 支持基于WebAssembly的客户端和基于SignalR的服务器端UI事件交互。 :artist_palette: 支持渐进式Web应用程序（PWA）。 :shield: 使用C＃（一种多范式静态语言）进行构建，以获得高效的开发体验。 :gear_selector: 基于.NET Standard 2.1 / .NET 5，直接引用丰富的.NET生态系统。 :wrapped_gift: 与现有的ASP.NET Core MVC和Razor Pages项目无缝集成。 :rainbow: 在线实例 WebAssembly静态托管示例： :desktop_computer: 环境支援 .NET Core 3.1 / .NET 5 Blazor WebAssembly 3.2 / .NET 5版本
next-antd-dark-mode:用于更改蚂蚁设计主题（深色，浅色）模式的插件
05-22
下一个黑暗模式 更改蚂蚁设计主题旁边的插件（ :milky_way: 黑暗的 :sunset: 光） :high_voltage: 块文件antd组件 :nail_polish: 自订变数 :milky_way: 黑暗的 :sunset: 光 用法 npm i next-antd-dark-mode --save or yarn add next-antd-dark-mode 演示 环境 :nail_polish: 文件-> antd-component.less //https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less @import '~antd/lib/style/core/index.less'; //@import "~antd/lib/affix/style/index.less"; //@import '~antd/lib/alert/style/index.less'; //
探索暗黑美学：Ant Design Dark Theme —— 为你的应用带来全新的视觉体验！
gitblog_00018的博客
06-08 731
探索暗黑美学：Ant Design Dark Theme —— 为你的应用带来全新的视觉体验！ 在编程世界中，界面设计的重要性不言而喻。现在，让我们一起走进由Ant Design团队精心打造的暗黑主题——Ant Design Dark Theme，一个旨在为你的应用程序增添时尚、优雅的暗色外观的开源项目。 1. 项目介绍 @ant-design/dark-theme 是一个实验性的项目，它提供了A...
【亲测免费】 Ant Design 暗黑主题教程
gitblog_00590的博客
09-03 1275
Ant Design 暗黑主题教程 项目介绍 Ant Design 是一个广泛使用的企业级 UI 设计语言和 React UI 库。它提供了丰富的组件和工具，帮助开发者快速构建高质量的用户界面。Ant Design 暗黑主题（Ant Design Dark Theme）是 Ant Design 的一个官方项目，旨在提供一个优雅的暗黑模式，以改善用户体验，尤其是在夜间或低光环境下。 项目快速启动 安...
ant-design-vue 自由切换 暗黑模式dark
ranshakalove的博客
01-12 7202
ant-design-vue 暗黑模式dark
【亲测免费】 Ant Design Blazor 使用教程
gitblog_00079的博客
08-13 1414
Ant Design Blazor 是一套基于 Ant Design 和 Blazor 的企业级 UI 组件库。它旨在为 Blazor 项目提供高质量的 UI 组件，使得开发者能够快速构建出现代化的 Web 应用。Ant Design Blazor 遵循 Ant Design 的设计规范，并提供了丰富的组件和工具，以支持复杂的业务需求。 ## 项目快速启动 要快速启动一个 Ant Design ...
CUDA与MFC结合开发示例教程——VS2022环境配置
资源摘要信息: "CUDA+VS2022MFC程序示例" 在当今的软件开发领域，特别是在高性能计算方面，CUDA（Compute Unified Device Architecture）技术已经成为不可或缺的一部分。CUDA是NVIDIA推出的并行计算平台和编程模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值