Code Monkey home page Code Monkey logo

onedark-pro's Introduction

Atom's iconic One Dark theme, and one of the most installed themes for VS Code!

Preview in vscode.dev Version Installs

SPONSORS

A plugin for IDEA that records code CRUD operations, helping you identify potential issues in SQL and providing optimization suggestions.

一个记录代码 CRUD 操作的 IDEA 插件,帮助您识别潜在问题的SQL并提供优化建议。

SCREENSHOT

ScreenShot

Italic

ScreenShot

Default theme

ScreenShot

Flat theme

ScreenShot

Darker theme

ScreenShot

Retro theme

ScreenShot

Gnome theme

ScreenShot

Terminal

ScreenShot

Donation

If you like this extension, you could donate via PayPal It will encourage me to make this extension better and better!

Thanks List:

  • Andreas Georgiadis

Setting

ScreenShot

Built in themes

built-in themes

Notice

Setting only support default theme(One Dark Pro).

Markdown preview style

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

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

or use the setting editor.tokenColorCustomizations

"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

"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

Python users I recommend using 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 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 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 OneDark-Pro 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 contribute. Contributors

Backers

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

onedark-pro's People

Contributors

2a5f avatar abhijithvijayan avatar asottile avatar binaryify avatar cfgnunes avatar dependabot[bot] avatar garritfra avatar goooler avatar hashinclude72 avatar ifahrentholz avatar jens1o avatar jonathanlaflamme avatar jongarbayo avatar jubijub avatar knownasnaffy avatar lukaspolak avatar malcolmmielle avatar mskelton avatar nprizal avatar orblazer avatar ppav avatar raul6469 avatar renovate-bot avatar scottmwyant avatar supercomputra avatar svipas avatar tanhakabir avatar utajum avatar will-stone avatar zueuk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

onedark-pro's Issues

Some color issues

I use the OneDark-Pro v2.7.2, the "titleBar.activeBackground", the "tab.activeBackground" and the "editor.background" are the same, I think that is not good; the "statusBar.background" is not the visual studio classical blue, is there something wrong?

qq20170510-093435

Changelog available?

Great work on getting this to work!

Is there a change-log of modifications to this repo?

Many thanks,

Neil

displayName and label mismatch

Given the recent name change I went to update my settings.json, and given that this installs with the display name "OneDark Pro" I naturally entered "workbench.colorTheme": "OneDark Pro".

Unfortunately the display name and label for this theme doesn't currently match, and it wasn't until I used the command palette to activate the theme that I realised I actually needed to enter "One Dark pro"

From a users' perspective it would be great seeing these be the same to avoid confusion.

Activity Bar Badge

Please change activity bar's badge foreground and background color and command palette color to make it go well with the theme.

php misstyled

Hi!

use AdvancedJsonRpc\{Request as RequestBody, Response as ResponseBody};

gets
image

I expect the second as to be in the same color of the first.

other thing:
image
I expect that array is as yellow as string. You probably got worried by the array constructor array()

public function __construct(string $uri = null, array $range = null)
    {
        $this->uri = $uri;
        $this->range = $range;
    }

css highlighting all wonky

Many of the attributes will not highlight correctly...notice float: left
and margin: 100px auto 0 auto

material-css

Theme ruler

This has been requested and MS have confirmed a new config setting will be added: microsoft/vscode#26377

Leaving this issue to remind us to update it when Code is updated.

Very Low Contrast in comments in compare view (source control)

First of all, thanks for an amazing theme!

I'd love to see if it were possible to get a better contrast for diff's in comments.

Here with javascript
image

And this is C#
image

Comments might not be the most important thing in a compare view but it should at least be possible to see the changes at all 😄

Idea: Break out the theming tutorial into it's own repo and website

It's great that you provided instructions on how to find scopes etc. and I learnt a lot about VSCode theming from it, however, this info applies to all theming (not just for this theme). Until MS improves their docs on this, maybe these instructions could be broken-out into their own website? Then other this theme and other theme makers could simply link to them. It could provide a central source for tips and knowledge. I like the idea of it opening with a simple tutorial, and walking people through to more advanced techniques and being able to read MS's docs with confidence. What do you reckon?

php bug

image
I expect that 'desktop' is colored green.

Code:

<?php
new class {
     public static function getUserByLogin(string $userName, string $password, string $app = 'desktop') {
        $request = null;
        try {
            $request = RequestUtil::doRequest(HttpMethod::POST, '/auth/login', [
                'json' => [
                    'login' => $userName,
                    'pass' => $password,
                    'app' => $app
                ]
            ]);
        } catch(HitboxApiException $e) {
            throw new HitboxAuthException('Cannot authenticate with hitbox api! Check username or password.', 0, $e);
        }
    }
}

Increase the background color of active menu item in dropdown

When changing the project from the shortcut "cmd+p" the drop-down color and the active menu background color (see screenshot) is not quite contrasting causing difficulty in opening intended projects.

Is there an option to change the background color of the active menu so that I can see clearly which option is currently I'm on?

Thanks.

screen shot 2017-05-18 at 13 01 38

Whitespace & indent guide colors

This isn't really an issue but I'm just wondering, and since I'm using this theme I thought it'd be the right place to ask it. I looked around a bit to find out which setting changes whitespaces' and indent guides' colors but had no luck. Where should I edit to change the color of those vertical lines and dots in the screenshot?

screen shot 2017-04-11 at 19 13 40

Update frequency

Is there any particular reason that this extension gets update so frequently? Visual Studio Code tells me there is an update almost daily.

Question: custom colors

In Javascript, I'd like my local variables (declared with let const var) to be a different color than function parameters. I've looked through the .tmTheme source and am not exactly sure what I'm looking for.

function(foo) {
   var bar = 'local variable';
   console.log(foo + bar);        // where foo & bar would be different colors, say bar is default red, and foo is maybe purple or something..
}

is it possible to override with some custom settings for this kind of thing or would I need to fork, change & install?

key word italic font support

It's still awesome theme. But better if the support italic or bold font to key word.

such as this following pic:
image

image

Possible to change package name?

The current package name is "name": "Material-theme". Is it possible to change this? Or will it screw-up users' installation? It may have been originally forked from the Material Theme but the name doesn't really go with the project now.

Operator Mono Italic Support?

Any chance to add support for italics on keywords and the like, similar to Dracula and Panda Syntax Themes?

Thanks and keep up the good work!

Javascript red coloring everywhere

The current styling on Javascript is too overwhelming as compared to the original Atom One Dark syntax. The red takes over everything pretty easily.

This is OneDark Pro:
OneDark Pro

This is Atom's original One Dark:
Atom's original One Dark

Is this an issue or is it by design?

Expand selection to quotes

With Alt+Shift+Right Arrow or Left Arrow, VS Code has this nice expand selection feature.

For some reason it doesn't it doesn't expands to quotes properly. Ideally it should not select quotes into expansion but it does if the quotes have same color (see GIF).

I don't know how Dracula fixes this issue without changing color of the quotes, what I know is that he fixed it after I reported this to him (Dracula VS Code theme maintainer).

Please fix this expand selection to not to include quotes in your theme.

drac

improve php output

Hi,

first of all, I'm really a fan of your theme. And since I'm doing lots of php development, I would wish that the php syntax highlighting gets better.

These are the things that doesn't get beautiful as expected:

function tick(bool $block = false) : bool {
 // blabla
}

image
I expect that false gets to a boolean value.

foreach ($nextTick as $cb) {
            $cb();
}

image
I expect that the dollar sign gets viewed as a normal variable.

Thanks!

Block cursor contrast with text is poor

image

This issue makes it difficult to use this theme with a Vim Plugin.
edit: VSCode recently added this option as a workaround:

"workbench.colorCustomizations": {
  "editorCursor.foreground": "#fff000", // e.g highlight cusor color
  "editorCursor.background": "#000000" // e.g highlight text color
  },

However, it might be a good idea to modify the defaults so users don't run into this issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.