G-dark Themes for Vscode

If you like this theme, please support it by giving it a star on github or leave a review on the marketplace.

If you have any issue, please report them on the issue page

• G-dark Themes for Vscode
  • Getting started
    • Installation
    • Support
      • Languages
      • Night Mode
    • Other Editors
    • Custom Settings
      • Fonts
    • Happy coding

Give it a try and if you like and can spare e few minutes of time, help spread the word, give a ☆ on github or leave a review if you have time, thank you and happy coding✌🏾

Getting started

Installation

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 theme variants to preview
6. Press Enter to activate the theme

Support

Languages

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

Night Mode

All themes Work well with F.lux/Night Shift or other similar tools.

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 & Linux

Other Editors

• For Nova

Custom Settings

Fonts

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 to display white space indicator only on selection

    "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"
    ],

Happy coding

All contribution are welcome