tdesign的白天黑夜模式实现原理

最新推荐文章于 2024-05-31 15:02:58 发布

未成年梦想

最新推荐文章于 2024-05-31 15:02:58 发布

阅读量376

点赞数

分类专栏： javascript HTML 面试文章标签：前端 css html

本文链接：https://blog.csdn.net/u014582342/article/details/131044032

版权

javascript 同时被 3 个专栏收录

89 篇文章 2 订阅

订阅专栏

HTML

76 篇文章 2 订阅

订阅专栏

面试

26 篇文章 2 订阅

订阅专栏

以tdesign为例
我们看下源码
- 可以看到,tdesign是借助于:root选择器,并结合属性选择器来设置的,当html标签存在一个名叫theme-mode属性的时候,如果值为dark就使用白天的主题,否则就使用黑天的主题

我们切换下颜色,更改html当中的属性,可以看到下图的区别

<!DOCTYPE html>

<!-- 黑夜模式,设置 theme-mode="dark" -->
<html lang="en" theme-mode="dark">
  ...
</html>

<!-- 白天模式 设置 theme-mode="light"-->
<html lang="en" theme-mode="light">
  ...
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

未成年梦想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Android实战——白天黑夜模式设置

小旭的专栏

09-15

2965

白天黑夜模式是一种动态的UI模式，根据当前时间或用户设置的偏好，在白天和黑夜之间进行切换。它通过调整应用程序的颜色、亮度和其他可视化元素来提供更加舒适和易读的用户界面。

每日UI，Android白天黑夜模式

05-24

本文将深入探讨Android中的白天黑夜模式，以及如何在应用中实现这一功能。首先，白天黑夜模式（也称为暗黑模式）是一种界面主题，它在明亮环境下使用亮色背景，在暗处则切换到深色背景。这种模式不仅有助于减少...

参与评论您还未登录，请先登录后发表或查看评论

TDesign中后台管理系统-访问后端服务

低代码布道师的博客

07-31

1530

前后端集成，需要后端先写好接口，并且前端能够正常访问，我们需要解决跨域的问题，数据库访问的问题以及动态构造菜单的接口。总体上只要熟悉开发流程，就可以按照自己的需要完成功能的开发。

为 TDesignBlazor 添加暗黑模式

桑榆肖物

01-25

1848

本文将讲述我为 TDesignBlazor 开源项目提交 PR 的经历，主要介绍暗黑模式功能的实现以及之后如何在项目中使用。我将会分享我在实现这一功能时遇到的问题，以及我是如何解决这些问题的。我希望通过我的经历能够鼓励更多的人参与开源项目，为 TDesignBlazor 贡献代码，帮助项目快速迭代。

Ant Design暗黑模式设计解析

lentoo的博客

03-27

3529

前言近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起...

TDesign的table自定义行背景色写法

KAMHUNCHAN的博客

06-14

562

如果return的是一个对象，渲染到页面最终的变成【object，object】重点是这个rowAttributes，

TDesign 的开源故事，看完秒懂

腾源会

05-10

668

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系，于2021年12月底正式对外开源，它提供一套完整的设计体系，目前同时支持4个框架。由于参与贡献的人数众多，支持的框架数量也多，所以开源之后，大家对 TDesign 充满好奇，好奇为什么腾讯要推出 TDesign 作为企业级设计体系， TDesign 如何平衡通用和业务需求，满足集团诉求；想知道在如此...

三行Android代码实现白天夜间模式流畅切换

09-01

在Android应用开发中，实现白天夜间模式的流畅切换是一项常见的需求。通过三行代码实现这一功能，不仅可以提高用户体验，还能让应用更具个性化。下面将详细解释如何使用这三行代码来实现在Android应用中切换白天和...

白天黑夜切换开关 - vue2实现

09-26

在本文中，我们将深入探讨如何在Vue2框架中实现一个白天黑夜切换开关的功能。这个功能可以让用户自由选择网站的主题色，以适应不同的环境和视觉需求。我们主要关注以下几个关键知识点： 1. **Vue2基础知识**：Vue2...

Android白天夜晚模式切换实现

01-19

总之，实现Android应用中的白天夜晚模式切换，主要涉及BroadcastReceiver监听系统时间变化、AppCompatDelegate切换主题模式以及设置界面的用户交互。通过以上步骤，你就可以为自己的应用添加这一实用功能了。

t-design问题总结

qq_43506529的博客

10-19

429

ngxin问题总结

TDesign 中后台系统搭建

低代码布道师的博客

07-26

1388

我们本篇介绍了TDesign中后台模板的安装和使用，选择一套稳定、持续更新迭代的模板是我们事业发展的基础，因为软件就是基于开源去构建。

基于腾讯设计体系TDesign的T-Vue前端开发

转载请标明出处，完整项目/代码详见github：https://github.com/yiru1225

03-06

2940

本博客主要记录本人利用腾讯开源前端设计体系——TDesign的前端开发学习过程，主要以TDesign的最佳实践介绍T-Vue的各种用法，仅供参考。一起开始搭建你的第一个前端项目吧！！！

TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统

最新发布

chuanchengdabing的博客

05-31

581

找到项目的根目录，执行命令（选择一种安装方式）：npm i | cnpm i | pnpm i | yarn | yarn install。通过tdesign提供的模板创建的前端项目中，提供的后端管理系统的基本模块，我们直接在这些基础模块上进行开发即可。在router/modules目录下的user.ts里配置路由：当点击左侧的菜单栏里新添加的目录时，显示页面的内容。注意，目前前端代码使用的vue3做为脚手架进行开发，需要强制依赖node版本为16及以上。

小程序开发之tdesignUI组件的简易使用教程

商务合作 / 项目定制开发 / 前端一对一培训、答疑

05-09

2833

TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。该UI框架支持桌面端、移动端、小程序端等全端。

跟着文快速创建一个完整的TDesign后台系统

weixin_45966674的博客

08-29

330

模板选vue2 其实也可以高一点但vue2目前适用的企业比较多也相对稳定。告诉我们少了 @babel/core 那就读字面呗不想复杂了。然后我们用编辑器打开这个项目 npm i 安装一下依赖。依赖装好之后看到package.json中写的启动命令是dev。看到我们的目录就会多出来一个文件夹里面就是我们的项目了。然后这里我们就进入了创建输入一下项目名称和描述。访问浏览器确认我们的项目就已经跑起来了。模块我们就不做选择了全部先都选了。

微信开发者工具中安装TDesign组件库

cym2217348的专栏

02-06

3012

看着官网对TDesign组件库的介绍，这个组件库的组件非常丰富，很吸引开发人员，于是就有安装来试用的冲动。AppID处填入开发者的ID，也可也用测试号，后端服务选着“不使用云服务”，模板选择“JavaScript-基础模板”（视个人熟悉的编程语言而定），点击“确定”。到nodejs官网下载nodejs安装，因为要安装TDesign的话，要用到npm工具，npm工具是和nodejs一起打包发行的，故要下载nodejs安装（首先到微信开发者工具官网下载微信开发者工具安装(

Tdesign 常用知识

fvafuc的专栏

01-26

996

mock 数据中，开头的是 Mock.js 的语法。Mock.js 是一个用于生成随机数据的库，它提供了一些特殊的语法，可以方便地生成各种类型的随机数据。@city()@cname()这些语法可以在 Mock.js 的文档中找到详细的说明。在实际使用中，你可以根据需要选择合适的语法来生成随机数据。

怎样在前端实现页面切换白天黑夜模式

05-21

可以通过 CSS 和 JavaScript 来实现页面切换白天黑夜模式。首先，在 HTML 中添加一个按钮，用于切换模式： ```html <button id="mode-switch">切换模式</button> ``` 然后，在 CSS 中定义两种模式的样式： ```css /* 白天模式 */ body { background-color: #fff; color: #333; } /* 黑夜模式 */ body.dark-mode { background-color: #333; color: #fff; } ``` 接下来，在 JavaScript 中监听按钮的点击事件，并切换模式： ```javascript var modeSwitch = document.getElementById('mode-switch'); modeSwitch.addEventListener('click', function() { document.body.classList.toggle('dark-mode'); }); ``` 这样，每次点击按钮，就会在白天模式和黑夜模式之间切换。当 body 上添加 dark-mode 类时，页面会切换到黑夜模式。反之，则切换到白天模式。