如何使用 JSON Formatter 深度定制主题从浅色到深色模式【免费下载链接】json-formatter-jsRender JSON objects in beautiful HTML (pure JavaScript)项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-jsJSON Formatter 是一款纯 JavaScript 工具能将 JSON 对象渲染为美观的 HTML 格式。它不仅提供清晰的 JSON 结构展示还支持主题定制功能让你可以根据使用场景轻松切换浅色与深色模式提升阅读体验。快速了解主题配置核心文件主题定制的核心代码位于 src/style.less 文件中。该文件通过 Less 预处理器定义了主题的配色方案和样式规则主要包含以下关键部分主题混合器.theme定义了可复用的主题样式模板包含文本颜色、背景色等基础样式变量默认主题应用默认浅色配色方案深色主题通过.json-formatter-dark类定义深色模式下的配色一键切换官方主题JSON Formatter 内置了浅色和深色两种官方主题无需编写样式代码即可快速切换。基础使用方法在初始化 JSONFormatter 实例时通过config参数的theme属性指定主题名称// 浅色主题默认 const lightFormatter new JSONFormatter(myJSON, 1, { theme: null }); // 深色主题 const darkFormatter new JSONFormatter(myJSON, 1, { theme: dark });实际应用示例在 demo/index.js 中可以看到官方示例用法// 深色主题配置示例 { title: Dark, json: complex, config: { theme: dark } }当主题设置为 dark 时渲染元素会自动添加json-formatter-dark类从而应用深色样式。深入理解主题配色方案主题变量解析src/style.less 中定义的主题混合器包含以下核心配色变量控制着 JSON 不同元素的显示效果.theme( default-color: black, // 默认文本颜色 string-color: green, // 字符串颜色 number-color: blue, // 数字颜色 boolean-color: red, // 布尔值颜色 null-color: #855a00, // null值颜色 key-color: #00008b, // 键名颜色 bracket-color: blue // 括号颜色 ) { // 样式规则... }浅色主题默认值默认浅色主题直接应用上述变量值适合大多数明亮的网页环境// 浅色主题应用 .json-formatter-row { .theme(); }深色主题配色调整深色主题通过覆盖变量实现深色背景下的高对比度显示// 深色主题配置 .json-formatter-dark.json-formatter-row { .theme( default-color: white, // 白色文本 string-color: #31f031, // 亮绿色字符串 number-color: #66c2ff, // 浅蓝色数字 boolean-color: #EC4242, // 红色布尔值 key-color: #23a0db // 亮蓝色键名 ); }自定义主题的完整步骤1. 定义新主题变量在 src/style.less 中扩展主题混合器添加自定义配色// 自定义主题 - 柔和蓝调 .json-formatter-blue.json-formatter-row { .theme( default-color: #333333, string-color: #2e7d32, number-color: #1565c0, boolean-color: #c62828, key-color: #283593, bracket-color: #5e35b1 ); }2. 编译 Less 为 CSS使用项目中的构建工具编译样式文件git clone https://gitcode.com/gh_mirrors/js/json-formatter-js cd json-formatter-js yarn install yarn build3. 应用自定义主题在代码中指定自定义主题名称const customFormatter new JSONFormatter(myJSON, 1, { theme: blue }); document.body.appendChild(customFormatter.render());主题切换的进阶技巧跟随系统主题自动切换结合 CSS 媒体查询可以实现根据系统主题自动切换media (prefers-color-scheme: dark) { .auto-theme .json-formatter-row { extend .json-formatter-dark.json-formatter-row; } }动态切换主题通过 JavaScript 动态修改元素类名实现主题切换function switchTheme(formatterElement, themeName) { // 移除所有主题类 formatterElement.classList.remove(json-formatter-light, json-formatter-dark, json-formatter-blue); // 添加新主题类 if (themeName) { formatterElement.classList.add(json-formatter-${themeName}); } }常见问题解决主题不生效怎么办检查是否正确传递theme配置参数确认主题名称与 src/style.less 中定义的类名一致验证 CSS 文件是否正确编译并引入如何修改主题动画效果主题混合器中包含rotate-time变量控制折叠动画速度.theme( // ...其他变量 rotate-time: 200ms // slower animation ) { // ... }总结JSON Formatter 提供了灵活的主题定制功能通过简单配置即可实现从浅色到深色模式的切换。无论是使用官方主题还是创建自定义配色方案都能让 JSON 数据展示更加美观和易读。通过修改 src/style.less 中的主题变量你可以轻松打造符合自己需求的 JSON 展示样式。【免费下载链接】json-formatter-jsRender JSON objects in beautiful HTML (pure JavaScript)项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考