G-dark Theme for Vscode
Atom Editor
G Dark themes for Atom
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
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
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
- Open Extensions sidebar panel in VS Code.
View → Extensions
- Search for
g-dark
- Click Install to install it.
- A drop down list will appear.
- Select on of g-dark-default theme variants to preview
- Press Enter to activate the theme
Activate theme
Launch Quick Open:
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!