Skip to main content
Coding Theme

Color themes

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.activeBorder#40E0D0
  • activityBar.background#0A150A
  • activityBar.border#2F4F2F55
  • activityBar.foreground#7FE07F
  • activityBar.inactiveForeground#4F6F4F
  • activityBarBadge.background#00FFFF
  • activityBarBadge.foreground#0A150A
  • breadcrumb.activeSelectionForeground#FFD700
  • breadcrumb.focusForeground#E8F5E8
  • breadcrumb.foreground#8FBC8F
  • breadcrumbPicker.background#1A2F1ADD
  • button.background#40E0D0
  • button.foreground#0A150A
  • button.hoverBackground#00FFFF
  • checkbox.background#121F12
  • checkbox.border#2F4F2F
  • debugConsole.errorForeground#FF6B6B
  • debugConsole.infoForeground#7FE07F
  • debugConsole.warningForeground#FFD700
  • debugToolBar.background#121F12
  • descriptionForeground#B8D4B8
  • diffEditor.insertedLineBackground#32CD3218
  • diffEditor.insertedTextBackground#32CD3233
  • diffEditor.removedLineBackground#DC143C18
  • diffEditor.removedTextBackground#DC143C33
  • dropdown.background#1A2F1ADD
  • dropdown.border#2F4F2F
  • editor.background#0F1B0F
  • editor.findMatchBackground#FFD70066
  • editor.findMatchBorder#FFD700
  • editor.findMatchHighlightBackground#FFD70033
  • editor.foreground#E8F5E8
  • editor.hoverHighlightBackground#40E0D022
  • editor.inactiveSelectionBackground#40E0D022
  • editor.lineHighlightBackground#1A2F1A
  • editor.lineHighlightBorder#2F4F2F44
  • editor.linkedEditingBackground#40E0D020
  • editor.rangeHighlightBackground#40E0D018
  • editor.selectionBackground#40E0D044
  • editor.selectionHighlightBackground#FFD70033
  • editor.wordHighlightBackground#9370DB33
  • editor.wordHighlightStrongBackground#7FE07F33
  • editorBracketHighlight.foreground1#00FFFF
  • editorBracketHighlight.foreground2#7FE07F
  • editorBracketHighlight.foreground3#9370DB
  • editorBracketHighlight.foreground4#FFD700
  • editorBracketHighlight.foreground5#FF69B4
  • editorBracketHighlight.foreground6#40E0D0
  • editorBracketMatch.background#40E0D033
  • editorBracketMatch.border#40E0D0
  • editorCodeLens.foreground#8FBC8F
  • editorCursor.background#0F1B0F
  • editorCursor.foreground#00FFFF
  • editorGutter.addedBackground#32CD3288
  • editorGutter.background#0F1B0F
  • editorGutter.deletedBackground#DC143C88
  • editorGutter.modifiedBackground#4169E188
  • editorHoverWidget.background#1A2F1ADD
  • editorHoverWidget.border#40E0D044
  • editorIndentGuide.activeBackground1#40E0D0
  • editorIndentGuide.background1#2F4F2F
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00FFFF99
  • editorOverviewRuler.errorForeground#FF6B6B99
  • editorOverviewRuler.infoForeground#40E0D099
  • editorOverviewRuler.warningForeground#FFD70099
  • editorRuler.foreground#1A2F1A
  • editorSuggestWidget.background#1A2F1ADD
  • editorSuggestWidget.border#40E0D044
  • editorSuggestWidget.highlightForeground#FFD700
  • editorUnnecessaryCode.opacity#00000088
  • editorWhitespace.foreground#4F6F4F55
  • editorWidget.background#1A2F1ADD
  • editorWidget.border#40E0D044
  • focusBorder#40E0D0AA
  • foreground#E8F5E8
  • gitDecoration.addedResourceForeground#32CD32
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#4F6F4F
  • gitDecoration.modifiedResourceForeground#4169E1
  • gitDecoration.untrackedResourceForeground#9370DB
  • icon.foreground#7FE07F
  • input.background#1A2F1ADD
  • input.border#2F4F2F
  • input.placeholderForeground#4F6F4F
  • list.activeSelectionBackground#40E0D033
  • list.activeSelectionForeground#FFD700
  • list.errorForeground#FF6B6B
  • list.focusBackground#40E0D033
  • list.highlightForeground#00FFFF
  • list.hoverBackground#40E0D018
  • list.inactiveSelectionBackground#40E0D022
  • list.warningForeground#FFD700
  • minimap.background#0F1B0F
  • minimap.findMatchHighlight#FFD70066
  • minimap.selectionHighlight#40E0D066
  • notebook.cellBorderColor#2F4F2F
  • notebook.cellEditorBackground#0F1B0F
  • notifications.background#1A2F1ADD
  • notifications.border#40E0D044
  • panel.background#121F12
  • panel.border#2F4F2F55
  • panelTitle.activeBorder#40E0D0
  • panelTitle.activeForeground#E8F5E8
  • panelTitle.inactiveForeground#8FBC8F
  • scrollbar.shadow#0D1A0D99
  • scrollbarSlider.activeBackground#40E0D077
  • scrollbarSlider.background#40E0D033
  • scrollbarSlider.hoverBackground#40E0D055
  • sideBar.background#121F12
  • sideBar.border#2F4F2F55
  • sideBar.foreground#E8F5E8
  • sideBarSectionHeader.background#0F1B0F
  • sideBarSectionHeader.foreground#7FE07F
  • sideBarTitle.foreground#FFD700
  • statusBar.background#0A150A
  • statusBar.border#2F4F2F55
  • statusBar.debuggingBackground#9370DB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E8F5E8
  • statusBar.noFolderBackground#0A150A
  • statusBarItem.remoteBackground#40E0D0
  • statusBarItem.remoteForeground#0A150A
  • terminal.ansiBlack#0A150A
  • terminal.ansiBlue#4169E1
  • terminal.ansiBrightBlack#4F6F4F
  • terminal.ansiBrightBlue#6495ED
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#7FE07F
  • terminal.ansiBrightMagenta#DA70D6
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE55C
  • terminal.ansiCyan#40E0D0
  • terminal.ansiGreen#32CD32
  • terminal.ansiMagenta#9370DB
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#E8F5E8
  • terminal.ansiYellow#FFD700
  • terminal.background#0F1B0F
  • terminal.foreground#E8F5E8
  • terminal.selectionBackground#40E0D044
  • terminalCursor.background#0F1B0F
  • terminalCursor.foreground#00FFFF
  • testing.iconFailed#FF6B6B
  • testing.iconPassed#32CD32
  • testing.iconQueued#FFD700
  • titleBar.activeBackground#0A150A
  • titleBar.activeForeground#E8F5E8
  • titleBar.inactiveBackground#0A150A
  • titleBar.inactiveForeground#4F6F4F
  • widget.shadow#0D1A0D88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#E8F5E8
invalid, invalid.illegal#FF6B6Bbold
comment, punctuation.definition.comment#4F6F4Fitalic
comment.block.documentation#8FBC8Fitalic
string, punctuation.definition.string#7FE07F
string.template, punctuation.definition.template-string#98FB98
string.regexp, constant.character.escape#40E0D0
constant.numeric, constant.language#FFD700bold
constant.character, constant.other#FF69B4
keyword.control, storage.type, storage.modifier#9370DBitalic bold
keyword.operator#00FFFFbold
punctuation, meta.brace, meta.delimiter#4F6F4F
variable, meta.definition.variable#E8F5E8
variable.other.readwrite#B8D4B8
variable.parameter#DDA0DDitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#98FB98
entity.name.function, support.function#32CD32bold
meta.function-call, entity.name.function.call#7FE07F
entity.name.class, entity.name.type.class, support.class#40E0D0bold
entity.name.type, support.type, entity.name.interface#87CEEBitalic
entity.name.namespace, entity.name.module, entity.name.package#9370DBbold
support.class.component, support.type.component#FF69B4bold
entity.name.tag#32CD32bold
entity.other.attribute-name#FFD700italic
meta.decorator, storage.type.annotation, punctuation.decorator#FF8C00italic bold
markup.heading, markup.heading.setext, entity.name.section#FFD700bold
markup.bold, markup.italic#40E0D0
markup.inline.raw, markup.fenced_code#7FE07F