uni-app 黑色主题下鼠标光标看不清

确实看不清 每次都花几秒钟时间找光标

在 uni-app 中，如果你在黑色主题下发现鼠标光标看不清，可以通过以下几种方式来解决：

1. 自定义鼠标光标样式

你可以通过 CSS 来改变鼠标光标的样式，使其在黑色背景下更加明显。

/* 在全局样式文件中添加 */
body {
  cursor: url('path/to/your/cursor.png'), auto;
}

你可以使用一个白色或高对比度的光标图片来替换默认的光标。

2. 使用系统自带的高对比度光标

如果你不想自定义光标，可以尝试使用系统自带的高对比度光标。

/* 在全局样式文件中添加 */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="16" fill="white"/></svg>'), auto;
}

3. 调整页面背景色

如果可能的话，你可以调整页面的背景色，使其与光标形成更好的对比。

/* 在全局样式文件中添加 */
body {
  background-color: #333; /* 调整为适合的颜色 */
}

4. 使用 JavaScript 动态切换光标

你可以根据主题动态切换光标的样式。

// 在页面或组件的脚本中
const isDarkTheme = true; // 根据你的主题判断逻辑

if (isDarkTheme) {
  document.body.style.cursor = 'url("path/to/white-cursor.png"), auto';
} else {
  document.body.style.cursor = 'auto';
}

5. 使用浏览器扩展或系统设置

如果上述方法都不适用，你可以考虑使用浏览器扩展或系统设置来全局调整光标样式。

6. 使用 cursor 属性

你可以直接使用 CSS 的 cursor 属性来改变光标的样式。

/* 在全局样式文件中添加 */
body {
  cursor: crosshair; /* 或者其他高对比度的光标样式 */
}

7. 使用 ::selection 伪元素

如果你只是希望在选中文本时看到光标，可以使用 ::selection 伪元素来调整选中文本的背景色和颜色。

/* 在全局样式文件中添加 */
::selection {
  background-color: white;
  color: black;
}

8. 使用 caret-color 属性

如果你是在输入框中遇到光标看不清的问题，可以使用 caret-color 属性来改变光标的颜色。

/* 在全局样式文件中添加 */
input, textarea {
  caret-color: white;
}

9. 使用 outline 属性

你可以为输入框添加 outline 属性，使其在聚焦时更加明显。

/* 在全局样式文件中添加 */
input:focus, textarea:focus {
  outline: 2px solid white;
}

10. 使用 box-shadow 属性

你可以为输入框添加 box-shadow 属性，使其在聚焦时更加明显。

/* 在全局样式文件中添加 */
input:focus, textarea:focus {
  box-shadow: 0 0 5px white;
}