VS Code Dark Theme?

[karlhorky]

Would it be possible to get a theme similar to VS Code Dark?

It could be based on this one here: https://github.com/upleveled/theme-vs-code-dark-plus/blob/main/src/vs-code-dark-plus.ts

There are some for other editors as well:

• https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css

[jaywcjlove]

@karlhorky

Install

npm install @uiw/codemirror-theme-vscode --save

Usage

import CodeMirror from '@uiw/react-codemirror';
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
import { javascript } from '@codemirror/lang-javascript';

function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      theme={vscodeDark}
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}
export default App;

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { vscodeDark } from '@uiw/codemirror-theme-vscode';

const state = EditorState.create({
  doc: 'my source code',
  extensions: [vscodeDark, javascript({ jsx: true })],
});

const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
});

[karlhorky]

Nice, thanks!

However, it seems that the background color is not currently #1e1e1e, which is the style that VS Code has (also in my theme here):

[jaywcjlove]

@karlhorky Upgrade v4.14.1

[karlhorky]

Looking better already!

A few more things (screenshots for reference below):

1. Colors - PR fixing this here: Fix foreground and function name colors #412
   • The foreground color is dark blue/turquoise in the @uiw/codemirror-theme-vscode theme but light blue in VS Code
   • The function name color is dark blue/turquoise in the @uiw/codemirror-theme-vscode theme but light yellow in VS Code
2. Would you support a font-family in your themes? In the original theme, the font-family that looked closest was a font-family of 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace' for the class '&.cm-editor .cm-scroller': https://github.com/upleveled/theme-vs-code-dark-plus/blob/9e16ebf6b4dae917ee0bbb2ff1e3db8c35370ae2/src/vs-code-dark-plus.ts#L67

@uiw/codemirror-theme-vscode

theme-vs-code-dark-plus

[jaywcjlove]

The font depends on what font is used in the outer layer.

The fixed font will have a different style from the entire page, and it will be very inconvenient to modify.

There is no fixed font, so setting the font is very flexible.

@karlhorky

[karlhorky]

Ok, trying to understand: So does that mean that there will be no support for setting font-family when developing a theme for @uiw/react-codemirror? (from within the theme - without any extra configuration by the user)

Eg. if a theme developer decides that a specific font looks the best with the theme, there will be no built-in way to do that?

It seems like allowing configuring font-family on the '&.cm-editor .cm-scroller' (maybe like this) would be a nice option to offer theme developers...

[jaywcjlove]

import { tags as t } from '@lezer/highlight';
import { createTheme, CreateThemeOptions  } from '@uiw/codemirror-themes';

initTheme({ settings: { fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace' }})

export function initTheme(options: CreateThemeOptions) {
  const { theme = 'dark', settings = {}, styles = [] } = options || {}
  return createTheme({
    theme: theme,
    settings: {
      background: '#1e1e1e',
      foreground: '#9cdcfe',
      caret: '#c6c6c6',
      selection: '#6199ff2f',
      selectionMatch: '#72a1ff59',
      lineHighlight: '#ffffff0f',
      gutterBackground: '#1e1e1e',
      gutterForeground: '#838383',
      gutterActiveForeground: '#fff',
      ...settings
    },
    styles: [
      { tag: t.keyword, color: '#569cd6' },
      ...styles
    ],
  });
}


export const vscodeDark = initTheme;

@karlhorky This design api should be able to meet the needs of setting fonts, and also can reset fonts

[karlhorky]

Nice, thanks for 6fa5ad5!

So my last question would be: do you support adding this to the theme itself? #413

Aside from that, everything's good with this theme now and this issue can be closed :)

[jaywcjlove]

@karlhorky ultimate solution

import { vscodeDark, vscodeDarkInit } from '@uiw/codemirror-theme-vscode';

<CodeMirror theme={vscodeDark} />

<CodeMirror
  theme={vscodeDarkInit({
    fontFamily: 'monospace',
  })}
/>

[jaywcjlove]

The default integrated font configuration can also be customized to be consistent with the entire website.

[karlhorky]

Cool, that's nice!

[karlhorky]

Screenshot of final theme after changes:

PR open here: #414

[jaywcjlove]

@karlhorky Thank you very much 🙏, hard work.

[karlhorky]

Thank you too! 🙌 Super fast iteration and pairing 👍

[karlhorky]

@jaywcjlove it seems like the Themes docs site is currently broken? (or maybe the theme itself somehow?)

1) Broken Link / Missing VS Code Dark theme

The link on the main page of the Themes docs home page is pointing at https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark, which is currently 404

2) Incorrect (or new?) VS Code light theme

The "VS Code" link in the sidebar of all Themes docs pages links to https://uiwjs.github.io/react-codemirror/#/theme/data/vscode, which is not a dark theme and is not the theme described in the issue above

[jaywcjlove]

@karlhorky The bug has been resolved. Thx!

[karlhorky]

@jaywcjlove Great, thanks!