akamud / vscode-theme-onedark

VSCode Theme based on Atom's One Dark theme

Atom One Dark Theme

VSCode Theme based on Atom's One Dark theme. Best rated One Dark theme port in the marketplace, features full Workbench theming.

Sponsors

Sponsor this project on GitHub.

Installing

This extension is available for free in the Visual Studio Code Marketplace

Looking for the One Light theme?

If you are interested you can also have the One Light theme available here.

What's new?

Click here to go to the Changelog

Inconsistencies?

If you find any inconsistency in any language, raise an Issue and I'll fix it, please provide a sample for the language so I can compare.

Attention: If you are using VSCode 1.43.0, you must be seeing very different colors, as reported here. An update to VSCode will be released fixing this issue for all themes, in the meantime, make sure you set this in your settings:

"editor.semanticHighlighting.enabled": false

Customization

If you are using VSCode 1.12+ versions you can customize the colors to your liking, overriding the ones provided by this theme. More info here.

Custom Font

The original One Dark theme does not use a custom font, for that reason I don't supply a custom font either, but you might be used to see screenshots of the One Dark theme using the Fira Mono font. You can easily customize your settings to use it.
If you download and install the font in your system, you can add this option to have a custom font:

{
    "editor.fontFamily": "YOUR FONT, Menlo, Monaco, 'Courier New', monospace"
}

Credits

Atom

vscode-theme-onedark's Issues

Add theming for side bar

Would like the themes to apply to the sidebar, like high contrast.

Add "one light" theme

That would be great!

typescript/typescriptReact default keyword inconsistency

Please provide as much information as possible, usually I need these information to actually start working on an issue, so try to fill as much of these as possible

Sample code

none

Filename and Language selected

.ts and .tsx

Javascripts normal default keyword

Also, wondering why the export and import, from keywords are not purple in .js files ?

VSCode theme Screenshot

Versions used

• VSCode version: latest
• Theme version: latest

Extra information

I am using the Javascript(Babel) language mode (when using .js, which might be the reason why im getting weird colors for : export, import, from)

https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring
and
https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode

Twig syntax colouring

Firstly, thank you for your efforts with this theme. It is great.
I noticed today that syntax highlighting doesn't work on twig php templates, but it does on the default themes.

Example package that highlights twig: Twig Pack (https://marketplace.visualstudio.com/items?itemName=bajdzis.vscode-twig-pack)

Python decorator arguments not highlighted

Atom

VS Code

Thanks for the theme! 😊

Italic style for Python docstring

Hello,

Is it possible to add Italic style for Python docstrings?
I added below lines to get such change:

                  <dict>
                        <key>name</key>
                        <string>Python Docstring</string>
                        <key>scope</key>
                        <string>string.quoted.double.block, string.docstring, string.quoted.single.block</string>
                        <key>settings</key>
                        <dict>
                                <key>foreground</key>
                                <string>#98c379</string>
                                <key>fontStyle</key>
                                <string>italic</string>
                        </dict>
                </dict>

Best Regards
Pawel

Workbench custom colors

VSCode 1.12 version is now live and the workbench.colorCustomizations is now ready to use. Was messing around and came up with this:

Some minor things to work but I'm gonna use it like that until you update.

The code:

"workbench.colorCustomizations": {
    "tab.activeBackground": "#282c34",
    "tab.inactiveBackground": "#2f333f",
    "activityBar.background":"#282c34",
    "editorGroup.background": "#282c34",
    "sideBar.background": "#202329",
    "sideBarSectionHeader.background": "#2f333f",
    "list.hoverBackground": "#2f333f",
    "list.activeSelectionBackground": "#2f333f",
    "list.inactiveSelectionBackground": "#282c34",
    "statusBar.background": "#181a1f",
    "statusBarItem.hoverBackground": "#2f333f",
    "input.background": "#393d48",
    "editorGroupHeader.tabsBackground": "#202329"
}

Hope it helps with something ;)

Broken on VSCode 1.9.1

Updated to v1.2.0 of this theme, on VSCode 1.9.1. Now it's busted:

Tried reinstalling, reloading, quitting, etc.

Color sidebar

It would be nice if the sidebar was color themed to match the editor.

Comments shown as red after update to VSCode 1.10.1

In every file format I have tested comments are displaying in bright red. I do have language specific extensions installed but it is also occurring in languages I never use with no extensions installed or setting changes.

This happened after I updated to 1.10.1.

To reproduce create a new file, select a language mode and type in a comment in that language. The comment is then highlighted in red when I expect it to be a grey.

If this isn't reproducible I will dig deeper and provide more info, I just assume it's immediately reproducible and obvious.

PHP code inside quotes in HTML looks like string

Here:

Thanks you for the theme!

Strange wrapper color around the code

Sample code

http://pastebin.com/iXBpCV7Q

Filename and Language selected

.ts extension and typescript language.

Atom Original theme Screenshot

VSCode theme Screenshot

Versions used

• VSCode version: 1.10.1
• Theme version: 1.3.1

Extra information

As you can see in the screenshot, a strange wrapper appears around the code in VSCode in the same color that a selected line has. It changes dynamically as I scroll trough the code. I'm seeing this bug in an external screen connected trough HDMI to my Macbook Pro Retina 2015.

Json edition should be improved

Hi,
I was trying this cool theme and I like it but when I started to edit a json file I realised that it was completely unusable. The text color gets dark and almost blended with the background color. No way to see what one's typing :(

export default highlighting

default is a keyword and should be highlighted in purple.

Sample code

export default a;

Filename and Language selected

.js
JavaScript React

VSCode theme Screenshot

Versions used

• VSCode version: 1.11.0
• Theme version: 1.3.2

Ruby syntax highlighting is off

Ruby syntax highlighting is way off. I've attached a few examples of how they look into Atom and how the highlighting looks in VSC. Let me know if you'd like me to provide more examples.

Here is the correct version from Atom:

Here is the same file in VSC:

Python comments hard to see in git changes

When you are comparing git changes it is really hard to see Python comments (they are gray).

Should be another color, maybe white?

Issue with JSX

As you can see, that there is some problem while using a function inside an JSX attribute

The problematic code is

<div className={colStyles}>
        <TextInput label='Fuel Quantity (Lts)' readOnly
            value={(data.get('cost') / data.get('fuelRate')).toFixed(2)} />
    </div>
</div>

Cursor transparency

Sample code

  def show
    respond_with @report
  end

Filename and Language selected

report_controller.rb
Ruby

Atom Original theme Screenshot

VSCode theme Screenshot

Versions used

• VSCode version: 1.11.1
• Theme version: 1.3.2

Extra information

Are color theme extensions allowed to modify CSS? There's a PR that added more cursor styles to VSCode here.

JS React coloring issues

As reported by @iddan in #35:

code:

import * as styles from './mission.scss';

export default function MissionIcon({ key, title }) {
	return <i class={classnames(
		styles['mission__icon'],
		{
			[styles['mission__icon-letter']]: title.match(A_HEBREW_LETTER),
			[styles['mission__icon-first']]: !key,
		}
	)}>{title}</i>;
}

Another bugs:

braces and semi-colons in yellow
decorator @ in grey
Variables inconsistent colouring (or is it intended because they "become" keys?)
code:

@connect(
    ({ artists }) => ({ artists }),
    dispatch => bindActionCreators({ getArtists, getArtist, addArtist, editArtist, removeArtist }, dispatch)
)
export default class AdminArtists extends Component {
    
	componentWillMount = () => {
		this.props.getArtists();
	}

	render = () => {
		console.log(this.props.artists);
		return <div>

        </div>;
	}
}

C# coloring broken after plugin externalization

C# coloring is broken after update 10.10

C# variable declaration colour should be swapped with normal variable colour

In Atom when declaring a variable the colour is red and normal variable use is white. Right now in VS Code (for C#) it's the opposite, white when declaring and red for normal use.

Sample code

public class MyClass
{
    private const float float1 = 10f;
    private float float2 = 0f;

    private void Update()
    {
        while(float2 > float1)
            float2 += Time.deltaTime;
    }
}

Atom Original theme Screenshot

https://puu.sh/vbZux/3ab94a46d8.png

VSCode theme Screenshot

https://puu.sh/vbZtG/9e7f07f183.png

Versions used

• VSCode version: 1.11.1
• Theme version: 1.3.2

Extra information

Other plugins I'm using.
C# https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp
Rainbow Brackets https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
Unity Tools https://marketplace.visualstudio.com/items?itemName=Tobiah.unity-tools

Visible whitespace too brightly colored

Hello, I have received the upgrade recently and I noticed there was something distracting me. I made before/after screenshots. In short, visible whitespace is too bright. It used to look fine before.

Before:

After:

Notice how it is a light grey now and does not match Atom anymore:

Versions used

• VSCode version: 1.12.2
• Theme version: 2.0.1

Extra information

In the provided screenshot, I am using the Rust language plugin, but I have also noticed this at my work computer where I use JavaScript.

TypeScript and TypeScriptReact template string problems

#It doesn't seem to take in consideration the presence of a variable inside the template string whilst using .ts(TypeScript Lang) or .tsx(TypeScript React)

Thats where constants comes from

import * as constants from '../configs/constants'

Thanks :)!

Java script highlights only partially

Hi,

There are large inconsistencies between atom and vscode for javascript for your one dark theme. I prefer more color to less. Left is Atom, right is vscode.

The important points for me are:

• Highlight function, to clearly see when I do function calls
• I would like all variables or objects not used as funtions in consistent color, notice how line 33 var bottomMenu is highlighted in vscode, but not in Atom , while line 32 vm.bottomMenu is highlighted other way around.

/Paul

Fix C# and Java coloring

Right now they are broken and not useful at all.

Rust type parameters with lifetime are colored incorrectly

Code:

fn whatever(&self, closure: Box<Fn() + 'static>) {
  // do nothing
}

Atom:

VS Code:

The Fn() part should not be colored as a lifetime.

Inconsistency in javascript Object methods - const

Sample code

const a = [...Object.keys(b)]
const c = Object.keys(b)

Filename and Language selected

Extension is .js for javascript

Atom Original theme Screenshot

VSCode theme Screenshot

Versions used

• VSCode version: 1.12.2
• Theme version: 1.3.2

Extra information

No other plugins affecting js.

Cheers!

How to active this package?

I could install the theme just fine using the command from the gallery, but it did not active automatically in VSCode 1.1.

Adding some info on how to active this to the README would be very helpful.

Weird "chunking" of the background on a fresh install

I'm not sure how to describe this, but there is a weird chunking behaviour in the background when this theme is installed.

I'm on the latest vscode and latest theme. Interestingly when I move the cursor about, the chunking jumps around.

URLs, JS Template Literal, punctuation/grammar Colors

First of all, thank you for making this theme. It's awesome. 👍

The colors associated with URL strings, JS String Interpolation/Template Literals, and minor punctuation characters are a bit inaccurate compared to Atom's One Dark Theme (see screenshot below for reference).

URL Strings

In Atom, URL strings in code appear in magenta color.
In VS Code, they appear in a regular string color (green).

Note: The red curly braces ${...} in VS Code is due to the VS Code Atom JavaScript Grammar package being installed in my editor. Otherwise, the curly braces appear in a regular string color (green).

JavaScript String Interpolation/Template Literals

In Atom, variables in template literals appear in "red"-ish color.
In VS Code, they appear in a regular string color (green).

Punctuation/Grammar (Minor issue)

In Atom, punctuation (e.g. :, ${}) appear in teal/cyan, except for a few punctuation characters (e.g. ;).
In VS Code, punctuations appear in white color.

Screenshot

Your Theme

Some other One Dark theme

Disclaimer

Even though the other VS Code One Dark theme has those correct JavaScript grammar/syntax colors, I'd much rather continue using your theme. You have more accurate colors when it comes to other languages (e.g. PHP, Ruby, Rust, Go) compared to the other One Dark theme.

class (public) properties highlighting

Please provide as much information as possible, usually I need these information to actually start working on an issue, so try to fill as much of these as possible

Sample code

export class DatePickerInput extends React.Component {
  state = {
    showOverlay: false,
    value: '',
    selectedDay: null
  };
}

Filename and Language selected

filename: DatePickerInput.js
lang: JavaScriptReact

VSCode theme Screenshot

Versions used

• VSCode version: 1.11.1
• Theme version: 1.3.2

Extra information

https://babeljs.io/docs/plugins/transform-class-properties/

Dot notation with line breaks

cells should be treated as an object (red).

function Table({ columns, cells }) {
  columns.map(column => {
    return <div style={column.style}>{
      cells
        .filter(cell => cell.column === column.id)
    }</div>;
  });
}

Indent Guides Missing in v2

With editor.renderIndentGuides: true

Sample code

function foobar () {
    for (const i of [1, 2, 3]) {
        console.info(i);
    }
}

Filename and Language selected

JavaScript, TypeScript, JSON

VSCode theme Screenshot

Versions used

• VSCode version: 1.12.2
• Theme version: 2.0.0

Types in Golang Should Appear Yellow Instead of Blue

In Atom, golang types (both interfaces and structs) appear in yellow (see screenshot here: http://imgur.com/CknvW71).

In vscode-theme-onedark, they appear blue (screenshot: http://imgur.com/Lqg8WEK)

HTML attributes not being highlighted in PHP files

Atom:

VSCode with one dark theme:

Is it possible to fix this?

Italic variant

Similarly to https://github.com/TimoSta/one-dark-italic-syntax, it would be great to have an italic variant:

Incomplete support of python keywords

Support of some python keywords does not match one dark theme from original atom.

For example, the following keywords (and maybe some others) are not covered: "not", "in", "and", "is"

Example in real atom

Example in vscode with current color theme

Missing syntax coloring for Asciidoctor

Syntax highlighting for asciidoctor language syntax is completely absent.

Atom Settings (windows 7):

Visual Studio code:

Consider adding a screenshot to the Readme

It's hard to tell what this theme will look like while scrolling through the marketplace without a screenshot. There are several OneDark clones, so it would be lovely to see what this one looks like in the Readme.

File Explorer Not Styled

Please extend the theme to also include the file explorer, I love the theme but I cant bring myself to use it if its inconsistent with the explorer.

backslash in strings c/c++ hard-to-impossible to read

In C/C++, the following string is displayed nicely:

"\n"

The following string, however, isn't (note that it is not a valid escape sequence):

"\ "

The backslash is coloured in the standard background color, and is thus only visible if the line is the active line - even then, it's very hard to see.

It would be great if the colour was changed to something readable - maybe red, indicating that it's not a valid sequence? For comparison, here's Github's markup:

"\n"
"\ "

Rename of the theme definition file

For those who wonder. After the rename of the theme def file (3ab6e97) one needs to reselect "Atom One Dark" in the theme selection context menu.

Make object/property names red in JS

I love the atom dark theme, so thanks for doing this! One of my favorite things about atom dark in javaScript is missing, though. In atom, all object and object property names are colored red, whereas in your version for VS Code, they are gray, just like any other variable or parameter name. I love this distinction that One Dark for atom brings between object/property names, and names of variables/parameters.

Colorizing array's object keys or values

It would be better if color of object keys and values differ like in default monokai dimmed theme.

Sample code

const APP_ROUTES: Routes = [
  { path: '',           component: HomeComponent },
  { path: 'login',      component: LoginComponent },
  { path: 'profile',    component: ProfileComponent, canActivate:[AuthGuard] },
  { path: 'register',   component: RegisterComponent },
  { path: 'dashboard',  component: DashboardComponent, canActivate:[AuthGuard] }
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    DashboardComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(APP_ROUTES),
    FlashMessagesModule
  ],
  providers: [
    ValidateService,
    AuthService,
    AuthGuard
  ],
  bootstrap: [AppComponent]
})

Filename and Language selected

TypeScript

VSCode theme Screenshot

Versions used

• VSCode version: 1.9.1
• Theme version: 1.3.0

Rust lifetime colors are incorrect

Atom

VS Code

See line 19:

fn entry<'a>(&self, _: &CommandInfo, matches: &ArgMatches<'a>) {

The 'a is the lifetime, which is colored incorrectly.

Create a "One Dark+" theme

VSCode introduced a Dark+ theme that adds way more colors to many languages (like C#), so One Dark+ theme could be a "merge", having more token coloring like Dark+ but following the colors from Atom's One Dark

Diff screen: can't clearly see changed commented lines.

When using this theme I cant clearly see difference in commented lines. Adjust a little bit color on diff screen for clear visibility.

Python syntax highlighting

Atom LEFT, VS Code RIGHT

Some small issues I found with python.
I like the small distinction atom has for "classmethod", but I guess that is preference.
The coloring of arguments though is really useful.

Thanks for porting the theme to VS Code!

default is not highlighted correctly

Fix theme for new scoping in VSCode 1.9

VSCode 1.9 completely changed the way it handles tmTheme scopes for coloring.

The whole theme is broken at the moment and needs to be pretty much re-done from zero.

More information: microsoft/vscode#18357