OneDark-Pro - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #android #rust #docker #macos #nodejs #windows #awesome #cli #vue #awesome-list #security

OneDark-Pro

(★ 1,776)

Atom's iconic One Dark theme for Visual Studio Code

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - cd.yml
- icon.svg
- launch.json
- settings.json
- tasks.json
- web-extension.webpack.config.js
- .nojekyll
- _coverpage.md
- favicon.ico
- icon.svg
- index.html
- README.md
- sw.js
- bloop_small.png
- built-in-themes.png
- color.png
- colorCustom.png
- editor1.png
- editordarker.png
- editorflat.png
- editornightflat.png
- featured.png
- gnome.png
- italic.png
- js.png
- markdown.png
- normal.png
- pluginIcon.png
- retro.png
- scope.png
- setting.png
- terminal.png
- generate-theme.ts
- tsconfig.json
- atom-one-dark-inside.scss
- base-inside.scss
- markdown-inside.scss
- - message.ts
- - colors.ts
  - configuration.ts
  - index.ts
  - TokenColor.ts
- - generator.ts
  - index.ts
  - Theme.ts
  - themeData.ts
- - colorObjArr.ts
  - index.ts
  - reload-prompt.ts
  - updateCSS.ts
  - updateTheme.ts
- - Changelog.ts
  - Webview.ts
- darkerConfig.json
- defaultConfig.json
- extension.ts
- flatConfig.json
- globals.d.ts
- mixConfig.json
- nightFlatConfig.json
- tsconfig.json
- .gitkeep
- OneDark-Pro-darker.json
- OneDark-Pro-flat.json
- OneDark-Pro-mix.json
- OneDark-Pro-night-flat.json
- OneDark-Pro.json
.gitattributes
.gitignore
.vscodeignore
CHANGELOG.md
eslint.config.mjs
icon.png
icon.svg
LICENSE.txt
nodemon.json
package-lock.json
package.json
package.nls.json
package.nls.zh-CN.json
README.md
releaseNote.md
renovate.json
tsconfig.base.json
tsconfig.json

🚀 Installation Guide

1. Get the code

git clone https://github.com/Binaryify/OneDark-Pro

Downloads the entire project code from GitHub to your computer.

cd OneDark-Pro

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

## [GitHub Repo](https://github.com/Binaryify/OneDark-Pro)

Atom's iconic One Dark theme, and one of the most installed [themes](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) for VS Code!

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/theme/zhuangtongfa.Material-theme) [![Version](https://vsmarketplacebadges.dev/version/zhuangtongfa.Material-theme.png)](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) [![Installs](https://vsmarketplacebadges.dev/installs/zhuangtongfa.Material-theme.png)](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

## SCREENSHOT

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/normal.png)

### Italic

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/italic.png)

### Default theme

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/editor1.png)

### Flat theme

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/editorflat.png)

### Darker theme

![ScreenShot](https://raw.githubusercontent.com/Binaryify/OneDark-Pro/master/screenshots/editordarker.png)

### Night Flat theme

![ScreenShot](https://raw.githubusercontent.com/Binaryify/OneDark-Pro/master/screenshots/editornightflat.png)

### Retro theme

![ScreenShot](https://raw.githubusercontent.com/Binaryify/OneDark-Pro/master/screenshots/retro.png)

### Gnome theme

![ScreenShot](https://raw.githubusercontent.com/Binaryify/OneDark-Pro/master/screenshots/gnome.png)

### Terminal

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/terminal.png)

## Donation

If you like this extension, you could donate via **[PayPal](https://www.paypal.me/binaryify)** It will encourage me to make this extension better and better!

Thanks List:
- Andreas Georgiadis

### Setting

![ScreenShot](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/setting.png)

### Built in themes

![built-in themes](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/built-in-themes.png)

### Notice

Setting only support default theme(One Dark Pro).

## Markdown preview style

![Markdown](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/markdown.png)
You can toggle whether to use markdown style in vscode setting (default use)

### Suggest Editor Settings
```
 "editor.fontSize": 20,
 "editor.lineHeight": 30,
 "editor.fontFamily": "JetBrains Mono",
```
JetBrains Mono Download: https://www.jetbrains.com/lp/mono

### 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:

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

or use the setting `editor.tokenColorCustomizations`

```json
"editor.tokenColorCustomizations": {
  "[One Dark Pro]": {
    "textMateRules": [
      {
        "scope": ["source.python"],
        "settings": {
          "foreground": "#e06c75"
        }
      }
    ]
  }
}
```

#### Italic

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

```json
"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](https://binaryify.github.io/OneDark-Pro)

## Python & Pylance users
Python users I recommend using [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-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](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#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:

```jsonc
{
  "editor.semanticTokenColorCustomizations": {
    "[One Dark Pro]": {
      // 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](https://code.visualstudio.com/docs/getstarted/theme-color-reference) and
[Theme Color](https://code.visualstudio.com/docs/getstarted/themes), for more helpful information.

[More info](https://code.visualstudio.com/updates/v1_15#_user-definable-syntax-highlighting-colors)

## CHANGELOG

[CHANGELOG.MD](https://github.com/Binaryify/OneDark-Pro/blob/master/CHANGELOG.md)

## DOCS & CONTRIBUTE

This document
([https://binaryify.github.io/OneDark-Pro/](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 `OneDark-Pro` folder

Run `npm install`

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

### Contributors

This project exists thanks to all the people who contribute.
[![Contributors](https://opencollective.com/OneDark-Pro/contributors.svg?width=890)](https://github.com/Binaryify/OneDark-Pro/graphs/contributors)

### Backers

<a href="https://opencollective.com/onedark-pro#backers" target="_blank"><img src="https://opencollective.com/onedark-pro/backers.svg?width=890"></a>

### Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
<a href="https://opencollective.com/onedark-pro#sponsor" target="_blank">
<img src="https://opencollective.com/onedark-pro/sponsor.svg?width=890">
</a>