rokoroku / vscode-theme-darcula

A theme for Visual Studio Code based on Darcula theme from Jetbrains IDEs.

Darcula

A theme extension for Visual Studio Code based on Darcula theme from Jetbrains IDEs.

---

Changelog

See CHANGELOG.md

Description

• Mainly focused on HTML5 / CSS / JS (TS) development.
• Not exactly same with the theme from Jetbrains IDE. There are few modifications to match look and feel with VS Code IDE.
• Follows common textmate tokens (such as entity.name.type, entity.name.function, variable.property...) so try it on any languages and report issues on the GitHub repo.
• Any suggestions/contributions are welcomed!

Setting

• When installation completes, select Darcula as your color theme (Preferences → Workbench: Color Theme → Darcula)

Customizing

• If you want to customize on top of this theme, use vscode's color customization feature.
  (Related Issue: #9, #15)

Screenshot

Enjoy!

vscode-theme-darcula's Issues

Support JSON property name

I think it would be easier to see the JSON property names and values in a different color, as in the JetBrains IDE.

VSCode Darcula theme

JetBrains IDE（RubyMine）

Highlight active line number

As for February 2018 update now we can highlight active line number: https://code.visualstudio.com/updates/v1_21#_coloring-of-active-line-number

Would be great to add this to the theme.

.length() as function call is not properly themed

microsoft/TypeScript-TmLanguage#730

Sass highlighting

Sass (scss) code is not highlighted properly, take a look:

CSS property values, sass variables, classNames after & are not highlighted. Compare it to what I see in WebStorm:

Could you please have a look?

Improve colors

Hey, thank you for the great extension.
I found that some of the primary colors don't match the originals. This may cause eye fatigue. I feel a little discomfort from such bright yellow and white. Please, take a look at these pictures bellow.

Webstorm:

VS Code:

Have these colors been changed on purpose?

Use theme in IntelliJ

Is it possible to make this theme usable with intelliJ? I really like it

UI styling

Annyeong-haseyo

I've created a new theme based on your great work. The main difference is that mine is also styling UI elements, since that's now supported. I first wanted to create a pull request, but the differences were too big (XML => JSON). But if you don't mind these changes, we could still merge?

https://github.com/kraftwer1/vscode-theme-darcula-extra

Python: No hightlighting for 'not' and 'in'

Seems like highlighting is missing for these keywords in Python.

Here's how it looks on vscode darcula:

Here's how it looks on pycharm's darcula:

And for reference, here's vscode Dark+:

Fix `const` variable coloring

microsoft/TypeScript-TmLanguage#542
Prior to above patch, variable.other.constant only match for UPPER_CASED constants, but now it matches all const variable. So coloring of const variable going to be broken.

Colorize (PHP) $variables

When using $variable the variable doesn't get a color. In a single line cases it would be ok, but when using in just a little more complex syntax, distinguishing a variable from operators and constants gets hard to read. I know the theme is not intended for PHP, but when this could be implemented, I think PHP would be verry complete too.

Red lines are the 'hotspots'.

Thank you for this lovely theme!

support golang syntax

Please include colors for diffs

When viewing a .diff/.patch file there is currently no syntax highlighting - and since vscode doesn't have an option to use a different theme for certain file types I currently need to change the global theme away from this one temporarily if I want to view a diff file properly...

PHP Dollar Sign ($) Color Bug

1. Add The Color Customization In VSC Configurations:

    "editor.tokenColorCustomizations": {
        "variables": {
            "foreground": "#bf72e6",
        }
    },

2. Create This Simple Class:

<?php

namespace Project\Src;

class Test
{
    public function test()
    {
        $Int = 0;

        return boolval($Int);
    }
}

The Syntax Highlight In boolval($Int) Will Be Incorrect.

The Dolar Sign ($) Will Be In White

Make file bar more contrast

Please, have a look at how the file bar looks at your screenshot:

And this is how it looks for me:

Is it how it is expected to look like in the latest version? If so, it is a bit messy in my opinion, can we make it a bit more contrast?

Background color of 'editorGutter' does not match editor background color

Installing the darcula theme on VS Code Version Version: 1.42.1 looks like the following screenshot:

I think the background color of the editorGutter should match the background color of the editor, like in the screenshot of the readme, for these reasons:

• It looks more consistent in my opinion
• All other default themes use the same color for gutter and editor backgrounds
• The breadcrumb also has the editors background color, making the gutter look a bit out of place

What do you think, should the gutters background color be adjusted accordingly?

If the gutters background color gets changed, I think the sidebars background color must be adjusted, too (darker or lighter).

JS template strings not recognized properly

Currently JavaScript template strings are not recognized correctly.

Here is a preview.

Currently the string token scopes are listed like

 {
      "name": "Strings",
      "scope": "string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag",
      "settings": {
        "foreground": "#6A8759"
      }
    },
    {
      "name": "String Interpolation Begin and End",
      "scope": "punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end",
      "settings": {
        "foreground": "#CC8242"
      }
    },
    {
      "name": "String Interpolation Body",
      "scope": "expression.string,meta.template.expression",
      "settings": {
        "foreground": "#CCCCCC"
      }
    },

I was able to fix with the following customizations,
It may be something you want to change in the core theme.

  "editor.tokenColorCustomizations": {
    "[Darcula]": {
      "textMateRules": [
        {
          "name": "Strings",
          "scope": "string",
          "settings": {
            "foreground": "#6A8759"
          }
        },
        {
          "name": "String Interpolation Begin and End",
          "scope": "punctuation.quasi.element.begin,punctuation.quasi.element.end",
          "settings": {
            "foreground": "#CC8242"
          }
        },
        {
          "name": "String Interpolation Body",
          "scope": "entity.quasi.element,expression.string",
          "settings": {
            "foreground": "#CCCCCC"
          }
        }
      ]
    }
  }

which yields

and is what I think was originally intended.

Thanks!

No margin between gutter and editor.

There's no margin between the Gutter and the code in editor on left.

VSCode

WebStorm

Plain text and variables have the same color in JSX

Can we have different colors for them?

Add LICENSE

I'd like to use this theme in VSCodium. The OpenVSX Extension Library allows suggestions at https://github.com/open-vsx/publish-extensions but requires hosted extensions to have a LICENSE compatible with the Eclipse Public License 2.0. Please consider adding one to this repository.

Small colors amend request

Hi. Thanks for the amazing theme. Really close to the original one used in JetBrains products.

Here are some small things I'd like to be changed: http://take.ms/Z62D3

The top one is vs-code with your theme and the bottom one is WebStrom with built-in Darcula theme. What do you think?

Add goland's bluish tint color for user defined types

In Go, types are defined like so:

type logLevel int

Your extension colors these a bluish tint, which is similar to how Goland darcula does it.

It'd be great to extend this coloring for any time user defined types appear, such as:

package main

type logLevel int

const (
    Info logLevel = 0 // `logLevel` should be of different color than `Info`
    Warn logLevel = 1
    Error logLevel = 2
)
// same goes for functions argument types and return types
func SetLogLevel(lvl logLevel) logLevel {
   var packageLevel logLevel = lvl // and var declarations types
   var lotsLevels []logLevel
}

All logLevel appearances should have a slightly different color. See this image https://www.jetbrains.com/go/img/screenshots/1_Code_insight_2.png and this one https://www.jetbrains.com/go/img/screenshots/2_Navigation_Search.png

Mini color change :)

Hi!

I really like your theme and it is really nice to be able to use it in the different editors I use including vscode :).

I would really happy if you could change the lineHighlight color to the color of the original jetbrains theme (I think it is #323232). Because of this the line I am editing is not highlighted.

Thanks in advance!

Difference between single/double quotes

On Intellij has some diference between quotes.

Components without color on vue 3.

The quotation marks doesn't have color neither.

VSC

WebStorm

Thanks, this is a nice theme to use in vscode.