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.background#080E0C
  • activityBar.foreground#3DD6C8
  • activityBar.inactiveForeground#3A5446
  • activityBarBadge.background#3DD6C8
  • activityBarBadge.foreground#080E0C
  • badge.background#3DD6C8
  • badge.foreground#080E0C
  • breadcrumb.activeSelectionForeground#C4CCBF
  • breadcrumb.focusForeground#3DD6C8
  • breadcrumb.foreground#3A5446
  • button.background#3DD6C8
  • button.foreground#080E0C
  • button.hoverBackground#5EEADC
  • dropdown.background#080E0C
  • dropdown.border#3A5446
  • dropdown.foreground#C4CCBF
  • editor.background#0B1210
  • editor.findMatchBackground#5E9E7E44
  • editor.findMatchHighlightBackground#5E9E7E22
  • editor.foreground#C4CCBF
  • editor.lineHighlightBackground#0F1A16
  • editor.selectionBackground#3DD6C840
  • editor.selectionHighlightBackground#3DD6C825
  • editor.wordHighlightBackground#3DD6C825
  • editor.wordHighlightStrongBackground#3DD6C840
  • editorBracketHighlight.foreground1#3DD6C8
  • editorBracketHighlight.foreground2#5E9E7E
  • editorBracketHighlight.foreground3#8B6D4A
  • editorBracketHighlight.foreground4#7A6B8B
  • editorBracketHighlight.foreground5#4A7A8B
  • editorBracketHighlight.foreground6#AB8D6A
  • editorBracketMatch.background#3DD6C825
  • editorBracketMatch.border#3DD6C8
  • editorCursor.foreground#3DD6C8
  • editorError.foreground#A65050
  • editorGroupHeader.tabsBackground#080E0C
  • editorGutter.addedBackground#5E9E7E
  • editorGutter.deletedBackground#A65050
  • editorGutter.modifiedBackground#8B6D4A
  • editorIndentGuide.activeBackground#5E9E7E
  • editorIndentGuide.background#2A3A32
  • editorLineNumber.activeForeground#3DD6C8
  • editorLineNumber.foreground#3A5446
  • editorOverviewRuler.addedForeground#5E9E7E
  • editorOverviewRuler.deletedForeground#A65050
  • editorOverviewRuler.modifiedForeground#8B6D4A
  • editorWarning.foreground#8B6D4A
  • editorWhitespace.foreground#2A3A32
  • gitDecoration.addedResourceForeground#5E9E7E
  • gitDecoration.conflictingResourceForeground#C07070
  • gitDecoration.deletedResourceForeground#A65050
  • gitDecoration.ignoredResourceForeground#2A3A32
  • gitDecoration.modifiedResourceForeground#8B6D4A
  • gitDecoration.untrackedResourceForeground#5E9E7E
  • input.background#080E0C
  • input.border#3A5446
  • input.foreground#C4CCBF
  • input.placeholderForeground#3A5446
  • inputOption.activeBorder#3DD6C8
  • list.activeSelectionBackground#1A3A2E
  • list.activeSelectionForeground#3DD6C8
  • list.focusBackground#1A3A2E
  • list.focusForeground#3DD6C8
  • list.highlightForeground#3DD6C8
  • list.hoverBackground#0F1A16
  • list.hoverForeground#C4CCBF
  • list.inactiveSelectionBackground#0F1A16
  • list.inactiveSelectionForeground#C4CCBF
  • minimap.selectionHighlight#3DD6C840
  • notificationCenter.border#3DD6C8
  • notifications.background#080E0C
  • notifications.foreground#C4CCBF
  • panel.background#080E0C
  • panel.border#0F1A16
  • panelTitle.activeBorder#3DD6C8
  • panelTitle.activeForeground#3DD6C8
  • panelTitle.inactiveForeground#3A5446
  • peekView.border#3DD6C8
  • peekViewEditor.background#080E0C
  • peekViewResult.background#080E0C
  • peekViewTitle.background#080E0C
  • peekViewTitleLabel.foreground#3DD6C8
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#3DD6C890
  • scrollbarSlider.background#3DD6C830
  • scrollbarSlider.hoverBackground#3DD6C860
  • sideBar.background#080E0C
  • sideBar.border#0F1A16
  • sideBar.foreground#8A9A8E
  • sideBarSectionHeader.background#0B1210
  • sideBarSectionHeader.foreground#3DD6C8
  • sideBarTitle.foreground#3DD6C8
  • statusBar.background#080E0C
  • statusBar.debuggingBackground#3DD6C8
  • statusBar.debuggingForeground#080E0C
  • statusBar.foreground#3DD6C8
  • statusBar.noFolderBackground#0B1210
  • tab.activeBackground#0B1210
  • tab.activeBorderTop#3DD6C8
  • tab.activeForeground#3DD6C8
  • tab.border#080E0C
  • tab.inactiveBackground#080E0C
  • tab.inactiveForeground#3A5446
  • terminal.ansiBlack#080E0C
  • terminal.ansiBlue#4A7A8B
  • terminal.ansiBrightBlack#3A5446
  • terminal.ansiBrightBlue#6A9AAB
  • terminal.ansiBrightCyan#66FFE8
  • terminal.ansiBrightGreen#7EBE9E
  • terminal.ansiBrightMagenta#9A8BAB
  • terminal.ansiBrightRed#C07070
  • terminal.ansiBrightWhite#E4ECDF
  • terminal.ansiBrightYellow#AB8D6A
  • terminal.ansiCyan#3DD6C8
  • terminal.ansiGreen#5E9E7E
  • terminal.ansiMagenta#7A6B8B
  • terminal.ansiRed#A65050
  • terminal.ansiWhite#C4CCBF
  • terminal.ansiYellow#8B6D4A
  • terminal.background#080E0C
  • terminal.foreground#C4CCBF
  • titleBar.activeBackground#080E0C
  • titleBar.activeForeground#3DD6C8
  • titleBar.inactiveBackground#080E0C
  • titleBar.inactiveForeground#3A5446

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#C4CCBF
comment, punctuation.definition.comment#3A5446italic
string, string.quoted, string.template, punctuation.definition.string#8B6D4A
constant.numeric#AB8D6A
constant.language#AB8D6Aitalic
constant.character, constant.other#AB8D6A
keyword, keyword.control, keyword.operator.new#5E9E7Ebold
keyword.operator#C4CCBF
storage, storage.type#5E9E7Eitalic
storage.modifier#5E9E7Eitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#3DD6C8underline
entity.name.function, support.function, meta.function-call#66FFE8
variable.parameter#AB8D6Aitalic
variable, variable.other#C4CCBF
variable.language#3DD6C8italic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#9ABAAE
entity.name.tag#5E9E7E
entity.other.attribute-name#3DD6C8italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5E9E7E
support.type.property-name.css#C4CCBF
support.constant.property-value.css#8B6D4A
keyword.other.unit.css#AB8D6A
punctuation.separator, punctuation.terminator, punctuation.accessor#8A9A8E
punctuation.section, punctuation.definition.block, meta.brace#8A9A8E
markup.heading, entity.name.section.markdown#3DD6C8bold
markup.bold#5E9E7Ebold
markup.italic#8B6D4Aitalic
markup.underline.link#3DD6C8
markup.inline.raw, markup.fenced_code#8B6D4A
support.type.property-name.json#5E9E7E
string.quoted.double.json#8B6D4A
entity.name.tag.yaml#5E9E7E
meta.decorator, punctuation.decorator#7A6B8Bitalic
string.regexp#3DD6C8
constant.character.escape#3DD6C8
support.type, support.class#3DD6C8
support.constant#AB8D6A
invalid#FFFFFF
invalid.deprecated#FFFFFF
Geaux Themes by williamg - VS Code Theme