HydroOJ 代码编辑器深色模式适配指南

HydroOJ 作为一款现代化的在线判题系统，其前端界面提供了完整的深色模式支持。然而在实际使用过程中，部分用户反馈在线编程模式下的代码编辑器未能自动切换为深色主题。本文将详细介绍如何在 HydroOJ 中正确配置代码编辑器的深色模式。

编辑器主题配置原理

HydroOJ 的代码编辑器基于 Monaco Editor 实现，这是微软开发的一款功能强大的代码编辑器，也是 VS Code 的核心组件。Monaco Editor 提供了多种内置主题，包括浅色和深色主题选项。

系统默认情况下，编辑器不会自动跟随系统的深色模式设置，而是需要用户手动选择适合的主题。这种设计可能是为了确保编程环境的稳定性，避免因系统主题切换导致的视觉不适。

配置步骤详解

1. 进入编辑器设置：在代码编辑界面，找到右上角的设置按钮（通常显示为齿轮图标）

2. 选择主题：在设置菜单中找到"主题"选项，从下拉列表中选择一个深色主题，如：

   • "vs-dark"（类似 VS Code 的深色主题）
   • "hc-black"（高对比度黑色主题）

3. 保存设置：配置完成后，编辑器会立即应用新主题，无需刷新页面

题目编辑器的深色模式

对于题目编辑器，用户可以通过以下方式启用深色模式：

1. 进入系统偏好设置
2. 将编辑器类型切换为 Monaco Editor
3. 按照上述相同步骤选择深色主题

技术实现建议

对于开发者而言，若希望实现编辑器主题与系统设置的自动同步，可以考虑以下技术方案：

1. 检测系统的颜色方案偏好
2. 根据检测结果动态切换编辑器主题
3. 将用户选择存储在本地存储中，保持偏好一致性

// 示例代码：自动切换主题
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
  const theme = e.matches ? 'vs-dark' : 'vs';
  monaco.editor.setTheme(theme);
});

用户体验优化

良好的深色模式实现应当考虑：

1. 色彩对比度：确保代码可读性
2. 语法高亮：保持不同语言元素的视觉区分
3. 眼部舒适度：避免使用纯黑色背景
4. 一致性：保持整个系统的主题统一

通过合理配置，HydroOJ 可以提供更加舒适、个性化的编程体验，特别是在夜间或低光照环境下工作时，深色模式能有效减少眼睛疲劳。