「实战应用」如何在 DHTMLX Scheduler 中实现动态主题切换?

创建响应式、直观的 UI 需要适应用户对应用程序各个方面的偏好。其中一项可显著提升用户体验的热门功能是能够在明暗主题之间切换。它在日程安排日历等综合组件中尤其有用。

本文将指导您在 DHTMLX Scheduler 中实现动态主题切换,使其适应用户设置的首选系统主题。

在 DHTMLX Scheduler 中引入主题切换

DHTMLX Scheduler 是一个功能强大的 JavaScript 调度小部件,内置对不同主题的支持。在本指南中,我们将重点介绍如何在“深色”和默认“浅色”(露台)主题之间切换。可以使用setSkin()方法以编程方式在 DHTMLX Scheduler 中切换主题:

// Switch to the default light theme
scheduler.setSkin("terrace");

// Switch to the dark theme
scheduler.setSkin("dark");

这些命令允许动态更新调度程序的外观,提供无缝的用户体验。

识别浏览器的首选主题

现代浏览器可以通过CSS 媒体功能 prefers-color-scheme检测用户的首选主题。您可以利用此功能相应地调整我们的 Scheduler 主题:

const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

此代码检查用户是否将其偏好设置为暗模式,并返回布尔值。

把所有东西放在一起

让我们将主题检测与组件的初始化结合起来,以确保 Scheduler 在加载时满足用户的系统主题偏好。此外,您还将确保 Scheduler 动态适应这些偏好的变化:

window.addEventListener("DOMContentLoaded", function(){
  // Initialize Scheduler plugins and configurations
  scheduler.plugins({
    quick_info: true
  });

  scheduler.config.cascade_event_display = true;

  // Function to dynamically update the Scheduler's theme
  function updateSchedulerTheme() {
    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (prefersDarkMode) {
      scheduler.setSkin("dark");
    } else {
      scheduler.setSkin("terrace");
    }
  }

  // Set the initial theme based on the user's preference
  updateSchedulerTheme();

  // Listen for changes in the preferred color scheme and update the theme
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateSchedulerTheme);

  // Initialize the DHTMLX Scheduler
  scheduler.init('scheduler_here', new Date(2024, 3, 20), "week");
});

通过在DOMContentLoaded事件监听器中嵌入主题更新逻辑,您可以确保 Scheduler 不仅使用其配置和插件进行初始化,而且还会立即采用用户首选的主题。这种集成提供了主题之间的无缝过渡,从而增强了整体用户体验。因此,应用程序变得更加个性化和易于访问。

添加用于切换主题的 UI 控件

不要忘记让最终用户能够手动切换主题。您需要对代码进行一些调整才能做到这一点。您必须添加一个简单的控件,让最终用户可以从三个选项中选择一个主题:浏览器默认、浅色和深色。

您需要修改updateSchedulerTheme函数。为用户选择的主题添加一个参数。如果最终用户选择浅色或深色主题,您将直接应用该主题。如果在浏览器中选择了默认主题,请使用浏览器设置中的首选主题。

function updateSchedulerTheme(selectedTheme) {
    // We use "default" for the Browser Default option
    if (!selectedTheme || selectedTheme === 'default') {
        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (prefersDarkMode) {
            scheduler.setSkin("dark");
        } else {
            scheduler.setSkin("terrace");
        }
    } else {
        scheduler.setSkin(selectedTheme);
    }
}

切换器控件的标记如下所示:

function updateSchedulerTheme(selectedTheme) {
    // We use "default" for the Browser Default option
    if (!selectedTheme || selectedTheme === 'default') {
        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (prefersDarkMode) {
            scheduler.setSkin("dark");
        } else {
            scheduler.setSkin("terrace");
        }
    } else {
        scheduler.setSkin(selectedTheme);
    }
}

最后一步是将控件连接到updateSchedulerTheme函数。可以使用以下代码完成:

const themeSwitcher = document.querySelectorAll('input[name="theme"]');
themeSwitcher.forEach(radio => {
    radio.addEventListener('change', function() {
        updateSchedulerTheme(this.value);
    });
});

在此示例中,您可以看到一切是如何组合在一起的。

结论

在 Web 应用程序中集成响应式主题切换(如 DHTMLX Scheduler 所示)可使应用程序适应用户的偏好,从而提升用户体验。通过采用此类以用户为中心的功能,您可以强调 Web 应用程序的适应性和现代性,使其更具吸引力,更易于所有用户使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/905472.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Marin说PCB之电源的Surface Current Density知多少?

小编我是一位资深的国漫迷,像什么仙逆,斗破,斗罗,完美世界,遮天,凡人修仙传,少年歌行等,为了可以看这些视频小编我不惜花费了攒了很多年的私房钱去开了这个三个平台的会员啊&#xf…

【YApi】接口管理平台

一、简介 YApi 是一个用于前后端开发团队协作的 API 管理平台,帮助团队更加高效地进行 API 接口的设计、测试、文档管理和版本控制等工作。 YApi 主要功能: API 设计和管理:提供 API 设计和文档生成工具,使开发者能够轻松创建、…

【C/C++】字符/字符串函数(1)——由string.h提供

零.导言 什么是字符/字符串函数呢? 其实就是一类用于处理字符和字符串的函数。 而其中一部分函数包含在头文件 string.h 中,有 strlen strcpy strcat strcmp strncpy strncat strncmp strstr strtok strerror 等等 接下来我将逐个讲解这些函数。 一.str…

简单的kafkaredis学习之redis

简单的kafka&redis学习之redis 2. Redis 2.1 什么是Redis Redis是一种面向 “Key-Value” 数据类型的内存数据库,可以满足我们对海量数据的快速读写需求,Redis是一个 NoSQL 数据库,NoSQL的全称是not only sql,不仅仅是SQL&…

在 Visual Studio 中使用 Eigen 库

在 Visual Studio 中使用 Eigen 库 参考教程: 在 Visual Studio 中配置 Eigen库_vs调用eigen-CSDN博客 Eigen 是一个开源的 C 库,主要用来支持线性代数,矩阵和矢量运算,数值分析及其相关的算法。Eigen 除了需要 C 标准库以外&am…

认证鉴权框架之—sa-token

一、概述 Satoken 是一个 Java 实现的权限认证框架,它主要用于 Web 应用程序的权限控制。Satoken 提供了丰富的功能来简化权限管理的过程,使得开发者可以更加专注于业务逻辑的开发。 二、逻辑流程 1、登录认证 (1)、创建token …

MES(Manufacturing Execution System)制造执行系统解决方案 :高效协同, 实现数字化智能工厂

文章目录 引言I 常用功能模块车间实时数据设备维修证书管理II UI设计III 术语5M1Esee also引言 MES软件即制造企业生产过程执行管理软件,是一套面向制造企业车间执行层的生产信息化管理系统。 MES 可以为企业提供包括制造数据管理、计划排程管理、生产调度管理、库存管理、质…

Qt 实战(10)模型视图 | 10.5、代理

文章目录 一、代理1、简介2、自定义代理 前言: 在Qt的模型/视图(Model/View)框架中,代理(Delegate)是一个非常重要的概念。它充当了模型和视图之间的桥梁,负责数据的显示和编辑。代理可以自定义…

“北斗+实景三维”,助力全域社会治理

在国家治理体系和治理能力现代化的大背景下,全域社会治理成为提升国家治理效能的关键。“北斗实景三维”技术组合,为全域社会治理提供了新的技术支撑和解决方案。本文将探讨这一技术如何助力全域社会治理,以及其在实际应用中的潜力和挑战。 …

mysql8.0.32升级到8.0.40

上篇8.0.32库的准备:mysql: error while loading shared libraries: libncurses.so.5: cannot open shared object file: No suc-CSDN博客 此篇测试升级到8.0.40 MySQL :: Download MySQL Community Server rootjyc:~# mysql -u root -pabcd1234 mysql: [Warning]…

高阶数据结构--图(graph)

图(graph) 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…

go 聊天系统项目-1

1、登录界面 说明:这一节的内容采用 go mod 管理【GO111MODULE‘’】的模块,从第二节开始使用【GO111MODULE‘off’】GOPATH 管理模块。具体参见 go 包相关知识 1.1登录界面代码目录结构 代码所在目录/Users/zld/Go-project/day8/chatroom/ 1.2登录…

支持向量机背后的数学奥秘

一、基本概念与原理 1.1 支持向量机的定义 支持向量机是一种二分类模型,其核心思想是在样本空间中寻找一个超平面,将不同类别的样本分开。这个超平面被称为决策边界或分隔超平面。支持向量是距离决策边界最近的点,这些点决定了决策边界的位…

C语言指针和数组相关习题

目录 sizeof和一维int数组sizeof和一维char数组strlen()和一维char数组sizeof和字符串strlen()和字符串指针变量指向字符串字面常量易错点sizeof(a):sizeof是操作符 当心整型提升sizeof和二维数组复习一下相关知识点练习题 一个离谱的错误指针1指针2指针3指针4指针5指针6指针7指…

Centos安装ZooKeeper教程(单机版)

本章教程介绍,如何在Centos7中,安装ZooKeeper 3.9.3版本。 一、什么是ZooKeeper ? Apache ZooKeeper 是一个分布式协调服务,用于大型分布式系统中的管理和协调。它为分布式应用提供了一个高性能的通信框架,简化了开发人员在构建复杂分布式系统的任务。ZooKeeper 能够解决一…

出国工作——常用英语——网站注册

Please set your password for your new Qt Account. Password must be at least 8 characters in length. 请为您的新 Qt 账户设置密码。密码长度必须至少为 8 个字符。 Password Password strength: BadThis is similar to a commonly used password. TIP: Add another wor…

江协科技STM32学习- P25 UART串口协议

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

Servlet 3.0 新特性全解

文章目录 Servlet3.0新特性全解Servlet 3.0 新增特性Servlet3.0的注解Servlet3.0的Web模块支持servlet3.0提供的异步处理提供异步原因实现异步原理配置servlet类成为异步的servlet类具体实现异步监听器改进的ServletAPI(上传文件) Servlet3.0新特性全解 tomcat 7以上的版本都支…

mysql 通过GROUP BY 聚合并且拼接去重另个字段

我的需求: 我想知道同一个手机号出现几次,并且手机号出现在哪些地方。下面是要的效果。 源数据: CREATE TABLE bank (id bigint(20) unsigned NOT NULL AUTO_INCREMENT,user_id int(11) NOT NULL DEFAULT 0,tel varchar(255) COLLATE utf8mb4_unicode_…

新加坡托管服务器VS香港托管服务器:AI时代的选择策略

在人工智能迅速发展的今天,服务器作为数据存储与计算的核心基础设施,其性能、稳定性和地理位置对于用户体验和业务效率至关重要。对于中国用户而言,在选择服务器时,新加坡服务器和香港服务器无疑是两个极具吸引力的选项。两者同属…