One Midnight for Visual Studio Code

GitHub Repo

Atom's iconic One Dark theme, now in deep midnight blurple.

SCREENSHOTS

Installation

One Midnight is not yet available on the VSCode Marketplace, but you can install it locally very easily:

git clone https://github.com/one-midnight-theme/vscode-one-midnight.git && cd vscode-one-midnight && npm run build-local

Note: You must have yarn installed to do this.

Donation

If you like this extension, you could donate to the creator of its predecessor, One Dark Pro, via PayPal. It will encourage them to make the original extension better and better, which will in turn make this one better!

Tweaks & theming

If you want to play around with new colors, use the setting workbench.colorCustomizations to customize the currently selected theme. For example, you can add this snippet in your "settings.json" file:

"workbench.colorCustomizations": {
  "tab.activeBackground": "#282c34",
  "activityBar.background": "#282c34",
  "sideBar.background": "#282c34",
  "tab.activeBorder": "#d19a66",
}

or use the setting editor.tokenColorCustomizations

"editor.tokenColorCustomizations": {
  "[One Midnight]": {
    "textMateRules": [
      {
        "scope": ["source.python"],
        "settings": {
          "foreground": "#e06c75"
        }
      }
    ]
  }
}

Italic

You could set this in your setting.json to make code be italic

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "italic font",
        "scope": [
          "comment",
          "keyword",
          "storage",
          "keyword.control",
          "keyword.control.from",
          "keyword.control.flow",
          "keyword.operator.new",
          "keyword.control.import",
          "keyword.control.export",
          "keyword.control.default",
          "keyword.control.trycatch",
          "keyword.control.conditional",
          "storage.type",
          "storage.type.class",
          "storage.modifier.tsx",
          "storage.type.function",
          "storage.modifier.async",
          "variable.language",
          "variable.language.this",
          "variable.language.super",
          "meta.class",
          "meta.var.expr",
          "constant.language.null",
          "support.type.primitive",
          "entity.name.method.js",
          "entity.other.attribute-name",
          "punctuation.definition.comment",
          "text.html.basic entity.other.attribute-name",
          "tag.decorator.js entity.name.tag.js",
          "tag.decorator.js punctuation.definition.tag.js",
          "source.js constant.other.object.key.js string.unquoted.label.js",
        ],
        "settings": {
          "fontStyle": "italic",
        }
      },
    ]
  }

more info

Python & Pylance users

For Python users I recommend using the Pylance extension for fast, feature-rich language support.

Semantic colors can be customized in settings.json by associating the Pylance semantic token types and modifiers with the desired colors.

• Semantic token types

  • class, enum
  • parameter, variable, property, enumMember
  • function, member
  • module
  • intrinsic
  • magicFunction (dunder methods)
  • selfParameter, clsParameter

• Semantic token modifiers

  • declaration
  • readonly, static, abstract
  • async
  • typeHint, typeHintComment
  • decorator
  • builtin

The scope inspector tool allows you to explore what semantic tokens are present in a source file and what theme rules they match to.

Example of customizing semantic colors in settings.json:

{
  "editor.semanticTokenColorCustomizations": {
    "[One Midnight]": {
      // Apply to this theme only
      "enabled": true,
      "rules": {
        "magicFunction:python": "#ee0000",
        "function.declaration:python": "#990000",
        "*.decorator:python": "#0000dd",
        "*.typeHint:python": "#5500aa",
        "*.typeHintComment:python": "#aaaaaa",
        "parameter:python": "#aaaaaa"
      }
    }
  }
}

Please check the official documentation, Theme Color Reference and Theme Color, for more helpful information.

More info

CHANGELOG

CHANGELOG.MD

DOCS & CONTRIBUTE

This document (https://binaryify.github.io/OneDark-Pro/) includes instructions on how to install and edit the theme.

To help with documentation, first fork and clone this repository.

cd to the OneMidnight folder

Run yarn

Then run npm run docs to serve the documentation locally at localhost:3000.

Contributors

This project exists thanks to all the people who contributed to the original "One Dark Pro" theme: