React 文档的 VSCode 主题

Question

React 有这个很棒的文档，里面有很多代码示例。 它说文档正在为其代码示例使用Oceanic Next配色方案，但显然没有。 （例如this关键字或class methods的颜色）

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

Answer 1

我做了一个。 我采取了一些自由，但它非常相似 => Oceanic Next Custom

Answer 2

我找不到一个真正忠实于网站的，所以我做了一个（对我来说已经足够了，但如果有什么困扰你，请随时在repo上打开问题）。

您可以直接从 VS Code 的市场下载它，特别是这里。

一些背景

我在那个 Reddit 线程中使用了 React 的核心主题提供的链接，但也使用了网站主题中使用的一般颜色。 最后，我广泛浏览了网站本身，并尽可能地坚持使用它。

我每天都在 React/React Native/Vue.js/Python+Django 代码库上使用它，它在任何地方看起来都很好且可读（以我的拙见）。

无论如何，这并不多，但这是诚实的工作。

它看起来像什么？

Answer 3

1. 安装 Dmitri Voronianski 的 Oceanic Next Color 主题
2. 在您的 VS Code 中，转到文件，然后选择首选项并单击配色方案
3. 安装后，向下滚动时会看到两个新主题：Oceanic Next 和 Oceanic Next（变暗的背景）
4. Oceanic Next (dimed bg)是你要找的主题

Answer 4

有人在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 5

我认为这个Base16 Ocean Kit 。

Answer 6

上周末我从 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. 安装“Oceanic Next”主题之一 - 我试过的那些都（！）工作，即你有一个选择
3. 通过显示的按钮“重新加载”

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

4. Ctrl-K Ctrl-T ( https://code.visualstudio.com/docs/getstarted/themes )

然后 - 玩。

当您不熟悉编辑器时，您有时会忽略一个显而易见的问题 - 您必须告诉 Visual Code 使用哪个启用的主题。 一旦你知道它 - 一如既往地直接（;））。

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

我只是想让背景尽可能暗，它包含一个“变暗”的版本；) 但这是一个品味问题，你就是你想去的地方。