score:5

Accepted answer

i made one. i took a few liberties, but its super similar => oceanic next custom

score:0

i think that this base16 ocean kit .

score:0

i "converted" from atom to visual studio code last weekend - this is the way i did it - following the tip at the bottom of this page: https://reactjs.org/docs/introducing-jsx.html

my "how-to":

  1. install the extension "sublime babel" https://marketplace.visualstudio.com/items?itemname=joshpeng.sublime-babel-vscode
  2. install one of the "oceanic next" themes - the ones i tried are all (!) working, i.e. you have a choice
  3. "reload" via the button shown

and then nothing happened ... ;) as i forgot this:

  1. ctrl-k ctrl-t (https://code.visualstudio.com/docs/getstarted/themes)

and then - play around.

when you are new to an editor you overlook sometimes the obvious - you have to tell visual code which enabled theme to use. once you know it - pretty straight forward (;) as always).

i chose finally this one: https://github.com/voronianski/oceanic-next-color-scheme

i simply wanted the background as dark as possible and it contains a "dimmed" version ;) but that's a matter of taste and you are where you want to be.

score:1

  1. install oceanic next color theme by dmitri voronianski
  2. in your vs code, go to file and then preferences and click on color scheme
  3. as a result of your installation, you would see two new themes there as you scroll down: oceanic next and oceanic next (dimmed bg)
  4. oceanic next (dimmed bg) is the theme you are looking for

score:1

someone asked this question on reddit and got a response from a member of the react core team:

i think joe (the designer that came up with the overall current design) picked these theme colors from his photoshop palette. it's a custom theme, but you can grab the colors from github. you can find the color scheme here by the way: https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#l11

the color scheme linked to is:

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',
};

however, i'm not sure how to customize or build a theme to incorporate these colors.

score:2

i couldn't find one that was actually faithful to the website, so i made one (it's close enough for me, but feel free to open issues on the repo if something bothers you).

you can download it directly from vs code's marketplace, specifically here.

some background

i used the link provided by react's core theme in that reddit thread, but also the general colours used in the website's theme. finally, i went extensively through the website itself and tried to stick to it as much as possible.

i use it daily on a react/react native/vue.js/python+django codebase and it looks good and readable everywhere (in my humble opinion).

anyway, it's not much, but it's honest work.

what does it look like?

screnshot


Related Query

More Query from same tag