G-dark Theme for Vscode

NOTE

• For the longtime users, please delete the version installed in vscode and install this version to be able to receive update, sorry about that

Atom Editor

G Dark themes for Atom

Also available for Nova Editor

G Dark Themes for Nova

Optimized for PHP, Laval, Blade Template, Jinja, Python, HTML, CSS, JSON, Markdown, JS (Vanilla) and Others Languages.

Please open an Issue if the themes don't display correctly for your languages Thanks. Give it a star on github or marketplace if you have time, thank you and be safe✌🏾

Note: Some themes are work better in dark room or similar as well as some in bright room or outside, I suggest you try every themes on different sets to find the one that work for you.

Tested on macOS

• Getting started
  • Installation
  • Custom Setting
  • Activate theme

Preview

Getting started

You can install this theme by downloading or cloning this repo or from vscode extensions website.

Installation

Launch Quick Open:

Linux Ctrl+P

• macOS ⌘P

• Windows Ctrl+P

Paste the following command and press Enter:

ext install g-dark theme

or from within VS Code by launching Quick Open and running the Install from VSIX... command.

Custom Settings

To get the most out of this them please add the following configuration:

1 Download and install Haskling fonts Hasklig or JetBrains Mono 2 Enable ligature in vscode setting or add to settings.json :

  "editor.fontLigatures": true,
  "editor.fontWeight": "600",
  "editor.fontSize": 14.5,
  "window.zoomLevel": 1,

3 Install Indent-Rainbow

• add this to settings.json:

    "indentRainbow.colors": [
      "rgba(16,16,16,0.10)",
      "rgba(16,16,16,0.20)",
      "rgba(16,16,16,0.30)",
      "rgba(16,16,16,0.35)",
      "rgba(16,16,16,0.40)",
      "rgba(16,16,16,0.45)",
      "rgba(16,16,16,0.50)",
      "rgba(16,16,16,0.55)",
      "rgba(16,16,16,0.60)",
      "rgba(16,16,16,0.65)",
      ],
  

4 Add the following to setting.json

    "editor.renderWhitespace": "selection",

5 Auto switch between dark and light theme (macOS only)

Install auto-darkmode

• add the following to settings.json:

    "autoDarkMode.darkTheme": "G Dark",
    "autoDarkMode.lightTheme": "G Light",

6 For colored brackets

    "editor.fontWeight": "600",
    "bracketPairColorizer.forceUniqueOpeningColor":true,
    "bracketPairColorizer.forceIterationColorCycle":true,
    "bracketPairColorizer.colorMode":"Consecutive",
    "bracketPairColorizer.highlightActiveScope":true,
    "bracketPairColorizer.activeScopeCSS":[
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {color}; opacity: 0.3",
        "backgroundColor : {color}"
    ],
    "editor.matchBrackets":"never",
    "bracketPairColorizer.showBracketsInGutter":true,
    "bracketPairColorizer.consecutivePairColors":[
        "()",
        "[]",
        "{}",
        ["<", "</"],
        ["<", "/>"],
        [
            "Gold",
            "Orchid",
            "LightSkyBlue",
            "#854442",
            "#08C08C"
        ],
        "Red"
    ],

7 To use a unique color for Vscode Separator

  "separators.methods.borderColor": "#64778b3a",  
  "separators.functions.borderColor": "#64778b3a",  
  "separators.constructors.borderColor": "#64778b3a",
  "separators.classes.borderColor": "#64778b3a",  
  "separators.enums.borderColor": "#64778b3a",  
  "separators.namespaces.borderColor": "#64778b3a",

From Vscode

1. Open Extensions sidebar panel in VS Code. View → Extensions
2. Search for g-dark
3. Click Install to install it.
4. A drop down list will appear.
5. Select on of g-dark-default theme variants to preview
6. Press Enter to activate the theme

Activate theme

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type theme, choose Preferences: Color Theme, and select one of the G-dark Theme variants from the list.

Happy coding

If you do like this theme, give it a rating G Dark-theme

All contribution are welcome

For any issues Issues.Thanks so much!