如何使用 JSON Formatter 深度定制主题：从浅色到深色模式

如何使用 JSON Formatter 深度定制主题：从浅色到深色模式

【免费下载链接】json-formatter-jsRender JSON objects in beautiful HTML (pure JavaScript)项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-js

JSON 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 build

3. 应用自定义主题

在代码中指定自定义主题名称：

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}`); } }

常见问题解决

主题不生效怎么办？

1. 检查是否正确传递theme配置参数
2. 确认主题名称与 src/style.less 中定义的类名一致
3. 验证 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