反应文档的VSCode主题

Question

React的this awesome documentation包含大量代码示例。它是says文档使用Oceanic Next颜色方案的代码示例，显然没有。 （例如this关键字或class methods）

的颜色

有谁知道实际使用的是哪种颜色主题？

Answer 1

我做了一个。我采取了一些自由，但它超级相似=＆gt; Oceanic Next Custom

Answer 2

1. 由Dmitri Voronianski安装Oceanic Next Color主题
2. 在您的VS代码中，转到文件，然后转到首选项，然后单击颜色方案
3. 作为安装的结果，当您向下滚动时，您会看到两个新主题：Oceanic Next和Oceanic Next（dimmed bg）
4. Oceanic Next（dimmed bg）是您正在寻找的主题

Answer 3

有人在Reddit上问了这个问题，得到了React核心团队成员的回应：

  

我认为Joe（提出当前总体设计的设计师）从他的Photoshop调色板中选择了这些主题色。这是一个自定义主题，但是您可以从GitHub获取颜色。您可以在这里找到配色方案：https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#L11

链接到的配色方案是：

const prismColors = {
  char: '#D8DEE9',
  comment: '#B2B2B2',
  keyword: '#c5a5c5',
  lineHighlight: '#353b45', // colors.dark + extra lightness
  primitive: '#5a9bcf',
  string: '#8dc891',
  variable: '#d7deea',
  boolean: '#ff8b50',
  punctuation: '#88C6BE',
  tag: '#fc929e',
  function: '#79b6f2',
  className: '#FAC863',
  method: '#6699CC',
  operator: '#fc929e',
};

但是，我不确定如何自定义或构建包含这些颜色的主题。

Answer 4

我找不到真正忠实于该网站的网站，所以我做了一个（对我来说足够近了，但是如果有问题困扰您，可以随时在repo上发布问题）。

您可以直接从VS Code的市场（特别是here）下载它。

某些背景

我在Reddit线程中使用了React核心主题提供的link，也使用了网站theme中使用的常规颜色。最后，我广泛浏览了网站本身，并尝试尽可能地坚持下去。

我每天在React / React Native / Vue.js / Python + Django代码库上使用它，并且它看起来不错，并且到处都可读（以我的拙见）。

反正不多，但这是诚实的工作。

它是什么样的？

Answer 5

我认为这个 Base16 Ocean Kit。

Answer 6

上个周末，我将Atom从Atom“转换”为Visual Studio Code-这就是我的方法-遵循本页底部的提示： https://reactjs.org/docs/introducing-jsx.html

我的“方法”：

1. 安装扩展名“ Sublime Babel” https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode
2. 安装“下一个远洋”主题之一-我尝试过的所有主题（！）都可以使用，即您可以选择
3. 通过显示的按钮“重新加载”

然后什么也没发生...;），因为我忘记了这一点：

1. Ctrl-K Ctrl-T（https://code.visualstudio.com/docs/getstarted/themes）

然后-随便玩吧。

当您不熟悉编辑器时，有时会忽略显而易见的内容-您必须告诉Visual Code使用哪个启用的主题。一旦知道了-像往常一样非常简单（;）。

我终于选择了这个： https://github.com/voronianski/oceanic-next-color-scheme

我只是想让背景尽可能暗，并且它包含一个“暗淡的”版本；）但这是一个品味问题，您就可以成为自己想要的地方。