score:5
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":
- install the extension "sublime babel" https://marketplace.visualstudio.com/items?itemname=joshpeng.sublime-babel-vscode
- install one of the "oceanic next" themes - the ones i tried are all (!) working, i.e. you have a choice
- "reload" via the button shown
and then nothing happened ... ;) as i forgot this:
- 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
- install oceanic next color theme by dmitri voronianski
- in your vs code, go to file and then preferences and click on color scheme
- as a result of your installation, you would see two new themes there as you scroll down: oceanic next and oceanic next (dimmed bg)
- 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?
Source: stackoverflow.com
Related Query
- VSCode Theme of React Documentation
- react material-ui 11.1 theme documentation
- VSCode prettier adds `value` to imports in TypeScript React
- React debug Using VSCode and Firefox instead of Chrome
- VSCode keeps asking to import React on NextJS and React 17 apps
- React component's Material UI theme not scoped locally to Shadow DOM
- How to apply antd dark theme for a React App?
- How to use Material UI custom theme in React with Typescript
- How do I apply a Font Theme in React Material-UI?
- Setting additional colors in theme Material UI React
- React & Material-UI: Theme undefined in createStyles() with TypeScript
- Material UI: Use theme in React Class Component
- Start React app fail on vscode by ESLint version
- why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript
- Applying specific theme for react material-table
- VSCode auto import React built-in hooks like useState, useEffect
- VSCode not autocompleting HTML tags in React
- @internal JavaScript documentation tag inside react code, is this jsdoc, closure, or something else?
- Right approach to apply a HTML/CSS/JS theme to an React app
- React google map wont update styles after changing theme (component re-render)?
- React Native Vscode TypeScript debugger stepping extremely slow
- How to make VSCode play nice with React syntax?
- How to use Theme in material UI with React + Next.js?
- How do I set system preference dark mode in a react app but also allow users to toggle back and forth the current theme
- How can I check the type of material ui theme in react js? (light or dark)
- React Plotly JS apply dark (plotly_dark) theme
- React hooks documentation generator
- Material UI 5.0 Typescript React Custom theme
- Custom react code snippets not working in vscode in javascriptreact.json file
- Import Arabic font to React Material Theme
More Query from same tag
- Webpack loads from the wrong URL when the path changes
- Why am I receiving undefined values in both input's of my form (User selected Image file + Image title (not filename) ) when making request to my API?
- Render button using if else reactjs
- Showing decimal point in gauge meter in d3
- JSX get width of a div element
- React.js -- How to pass properties object to child component?
- Change the clock icon color in MUI TextField with type 'time'
- Using react-spring in a TypeScript component class throwing compilation problems
- Update Dom once per Frame with setState in React
- TypeScript error: Duplicate identifier 'LibraryManagedAttributes'
- React Material-UI "Chip" component's 'x' (delete) button not working
- Everything works fine but when I click edit button, a comma (,) is add every time. I would not find what going wrong?
- React Redirect with data
- React updating array state
- How to use the AbortController to cancel Promises in React?
- Enzyme testing an authentication Higher Order Component (HOC)
- how to build a Form component in react
- Multiple Instances of React Application on the Same Page
- react-router-dom: How to match urls with some pattern
- Looping in JSX produces a single child element containing an array. I want multiple children
- Create multiline jsx inside a function
- How to filter the data in which array of array of objects in react js typescript
- Redux - how to call an action creator from inside another action creator?
- How to save multiple fields using 'onSave ()' function in react-editext?
- semantic ui react, how to change label position?
- React testing library: how to getByRole on custom role
- ReactDOM does not render a simple div
- react change props massive error
- Material UI Radio button group default multiple values selected
- The error of 'Duplicate string index signature' at Reactjs with Typescript