G-dark Themes for Vscode

---

A set of dual/unique background themes design to help protect you're eyes while optimizing readability using common but beautiful color palettes uniquely. 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✌🏾

Atom Text Editor

G Dark Themes for Atom

Nova Text Editor

G Dark Themes for Nova

Languages support

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.

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.

Night Mode

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

Tested on macOS

• Getting started
  • Installation
  • Custom Setting
  • Activate theme

Getting started

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

Installation

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

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

7 To use a unique color for vscode functions & methods 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",

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

All contribution are welcome

For any issues Issues.Thanks for your support!