uni-app 希望能有onedark pro主题配色

在 uni-app 中实现 OneDark Pro 主题配色，可以通过自定义样式来实现。以下是一个简单的示例，展示了如何为 uni-app 项目添加 OneDark Pro 配色方案。

首先，在你的 uni-app 项目中，创建一个全局的样式文件，例如 styles/onedark-pro.scss，并在这个文件中定义 OneDark Pro 的配色方案：

// styles/onedark-pro.scss
$background-color: #282c34;
$foreground-color: #abb2bf;
$comment-color: #5c6370;
$string-color: #d19a66;
$keyword-color: #c678dd;
$function-color: #61dafb;
$variable-color: #98c379;

body {
  background-color: $background-color;
  color: $foreground-color;
}

/* 针对代码高亮，假设你使用了 Prism.js */
code[class*="language-"],
pre[class*="language-"] {
  background-color: darken($background-color, 5%);
  color: $foreground-color;
  text-shadow: none;

  .comment {
    color: $comment-color;
  }

  .string {
    color: $string-color;
  }

  .keyword {
    color: $keyword-color;
  }

  .function {
    color: $function-color;
  }

  .variable {
    color: $variable-color;
  }
}

接下来，在你的 App.vue 文件中引入这个全局样式文件：

<template>
  <App />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import './styles/onedark-pro.scss';
</style>

如果你希望这个样式只在特定的页面或组件中应用，而不是全局应用，你可以在相应的页面或组件的 <style> 标签中引入 onedark-pro.scss 文件。

另外，如果你的项目中有代码高亮的需求，并且你使用的是 Prism.js 或其他代码高亮库，你需要确保你的高亮样式与上述 SCSS 定义匹配。上面的示例假设你使用了 Prism.js，并且你已经在项目中正确引入了 Prism.js 及其 CSS 文件。

请注意，上面的示例是一个简单的实现，可能需要根据你的具体需求进行调整。例如，你可能需要为不同的组件或元素定义更多的样式，以确保整个应用的一致性和美观性。同时，如果你使用的是其他代码高亮库，你需要根据该库的文档调整相应的样式选择器。