Midnight Emerald
Publisher: SaptanshuWanjariThemes in package: 1
A dark theme with emerald accents, vibrant syntax highlighting, and enhanced code readability
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#0f0e15
- activityBar.border#1f1e25
- activityBar.foreground#f8fafc
- activityBar.inactiveForeground#64748b
- activityBarBadge.background#10b981
- activityBarBadge.foreground#000000
- badge.background#10b981
- badge.foreground#000000
- button.background#10b981
- button.foreground#000000
- button.hoverBackground#059669
- dropdown.background#1f1e25
- dropdown.border#374151
- dropdown.foreground#e4e4e7
- editor.background#15141b
- editor.findMatchBackground#3b82f6
- editor.findMatchHighlightBackground#24b3fb50
- editor.foreground#f8fafc
- editor.lineHighlightBackground#1a1922
- editor.selectionBackground#1f2937
- editor.selectionHighlightBackground#1f293750
- editor.wordHighlightBackground#1f293750
- editor.wordHighlightStrongBackground#37415150
- editorCursor.foreground#10b981
- editorError.foreground#ef4444
- editorGroupHeader.border#1f1e25
- editorGroupHeader.tabsBackground#0f0e15
- editorHint.foreground#10b981
- editorIndentGuide.activeBackground1#06b6d4
- editorIndentGuide.activeBackground2#0891b2
- editorIndentGuide.activeBackground3#0e7490
- editorIndentGuide.activeBackground4#155e75
- editorIndentGuide.activeBackground5#164e63
- editorIndentGuide.activeBackground6#083344
- editorIndentGuide.background1#3a3744
- editorIndentGuide.background2#4a4552
- editorIndentGuide.background3#565160
- editorIndentGuide.background4#625d6e
- editorIndentGuide.background5#6e697c
- editorIndentGuide.background6#7a758a
- editorInfo.foreground#3b82f6
- editorLineNumber.activeForeground#e2e8f0
- editorLineNumber.foreground#64748b
- editorWarning.foreground#06b6d4
- editorWhitespace.foreground#374151
- extensionButton.prominentBackground#10b981
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#059669
- input.background#1f1e25
- input.border#374151
- input.foreground#e4e4e7
- input.placeholderForeground#6b7280
- inputOption.activeBorder#10b981
- list.activeSelectionBackground#1f2937
- list.activeSelectionForeground#e4e4e7
- list.deemphasizedForeground#64748b
- list.dropBackground#1f293750
- list.errorForeground#ef4444
- list.focusBackground#0f0e15
- list.highlightForeground#24b3fb
- list.hoverBackground#1f2937
- list.inactiveSelectionBackground#1f2937
- list.inactiveSelectionForeground#e4e4e7
- list.warningForeground#06b6d4
- menu.background#15141b
- menu.border#1f1e25
- menu.foreground#e4e4e7
- menu.selectionBackground#1f2937
- menu.selectionForeground#e4e4e7
- minimap.background#15141b
- notificationCenter.border#1f1e25
- notificationCenterHeader.background#0f0e15
- notifications.background#15141b
- notifications.border#1f1e25
- notifications.foreground#e4e4e7
- notificationToast.border#1f1e25
- panel.background#0f0e15
- panel.border#1f1e25
- panelTitle.activeBorder#10b981
- panelTitle.activeForeground#e4e4e7
- panelTitle.inactiveForeground#6b7280
- peekView.border#3b82f6
- peekViewEditor.background#15141b
- peekViewResult.background#0f0e15
- peekViewTitle.background#1f1e25
- progressBar.background#3b82f6
- scrollbarSlider.activeBackground#3b82f6
- scrollbarSlider.background#374151
- scrollbarSlider.hoverBackground#4b5563
- sideBar.background#0f0e15
- sideBar.border#1f1e25
- sideBar.foreground#f8fafc
- sideBarSectionHeader.background#0f0e15
- sideBarSectionHeader.border#0f0e15
- sideBarSectionHeader.foreground#64748b
- sideBarTitle.foreground#f8fafc
- statusBar.background#0f0e15
- statusBar.border#1f1e25
- statusBar.debuggingBackground#3b82f6
- statusBar.foreground#e4e4e7
- statusBar.noFolderBackground#0f0e15
- statusBarItem.hoverBackground#374151
- tab.activeBackground#15141b
- tab.inactiveBackground#0f0e15
- tab.inactiveForeground#6b7280
- terminal.ansiBlack#1f2937
- terminal.ansiBlue#3b82f6
- terminal.ansiCyan#06b6d4
- terminal.ansiGreen#10b981
- terminal.ansiMagenta#8b5cf6
- terminal.ansiRed#ef4444
- terminal.ansiWhite#e4e4e7
- terminal.ansiYellow#06b6d4
- terminal.background#15141b
- terminal.foreground#e4e4e7
- titleBar.activeBackground#0f0e15
- titleBar.activeForeground#e4e4e7
- titleBar.border#1f1e25
- titleBar.inactiveBackground#0f0e15
- titleBar.inactiveForeground#6b7280
- tree.indentGuidesStroke#3a3744
- tree.tableOddRowsBackground#13121a
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6b7280 | italic |
| string, string.quoted | #ffd166 | — |
| constant.numeric | #f59e0b | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #f59e0b | — |
| constant.character, constant.other | #f59e0b | — |
| variable | #e4e4e7 | — |
| keyword, keyword.control | #a855f7 | bold |
| storage, storage.type, storage.modifier | #a855f7 | — |
| storage.type.class, storage.type.function, storage.type.interface | #a855f7 | bold |
| entity.name.class, entity.name.type.class | #06b6d4 | bold |
| entity.other.inherited-class | #14b8a6 | — |
| entity.name.function | #10b981 | bold |
| variable.parameter | #e4e4e7 | — |
| entity.name.tag | #ec4899 | — |
| entity.other.attribute-name | #3bf6dd | italic |
| support.function | #10b981 | — |
| support.constant | #f59e0b | — |
| support.type, support.class | #06b6d4 | — |
| support.variable | #e4e4e7 | — |
| invalid | #ef4444 | — |
| invalid.deprecated | #f59e0b | strikethrough |
| keyword.operator | #ec4899 | — |
| punctuation.separator, punctuation.terminator | #e4e4e7 | — |
| punctuation.accessor | #ec4899 | — |
| support.function.hook.react, entity.name.function, variable.function, support.function, meta.function-call, meta.function.declaration, meta.function.method | #10b981 | bold |
| variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx | #06b6d4 | — |
| meta.tag.sgml.html, meta.tag.sgml.doctype.html, meta.tag.metadata.doctype.html | #10b981 | — |
| entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, meta.tag.jsx entity.name.tag, entity.name.tag.ts, entity.name.tag.js | — | |
| entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #3bf6dd | italic |
| string.quoted.double.html, string.quoted.single.html, string.quoted.double.jsx, string.quoted.single.jsx | #ffd166 | — |
| meta.embedded.expression.js, meta.embedded.expression.ts, meta.embedded.expression.tsx, source.js.embedded.html, source.ts.embedded.html | #06b6d4 | — |
| punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html | #06d6a0 | — |
| keyword.control.jsx, keyword.control.tsx, keyword.control.import.js, keyword.control.import.ts | #a855f7 | bold |
| support.class.component.jsx, support.class.component.tsx, entity.name.type.jsx, entity.name.type.tsx, meta.tag.jsx entity.name.type, entity.name.type.js, entity.name.type.ts | #61AFEF | bold |
| string.template.js, string.template.ts, string.template.tsx | #ffd166 | — |
| punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js | #06d6a0 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #3b82f6 | — |
| support.type.property-name.css, support.type.property-name.json | #06b6d4 | — |