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.activeBackground#39c5d733
  • activityBar.activeBorder#39c5d7
  • activityBar.background#051214
  • activityBar.border#102022
  • activityBar.foreground#158898
  • activityBar.inactiveForeground#15889877
  • activityBarBadge.background#158898
  • activityBarBadge.foreground#102022
  • badge.background#158898
  • badge.foreground#102022
  • button.background#0a8899
  • button.foreground#e5fcff
  • button.hoverBackground#0baacc
  • dropdown.background#051214
  • dropdown.border#051214
  • dropdown.foreground#8ca8ac
  • editor.background#051214
  • editor.findMatchBackground#40d4a6
  • editor.findMatchHighlightBackground#40d4a633
  • editor.findRangeHighlightBackground#39c5d722
  • editor.foreground#b0c5c8
  • editor.hoverHighlightBackground#0a404a
  • editor.inactiveSelectionBackground#15889833
  • editor.lineHighlightBackground#0e353a
  • editor.lineHighlightBorder#0e353a00
  • editor.selectionBackground#15889844
  • editor.selectionHighlightBackground#15889822
  • editor.wordHighlightBackground#d19a6622
  • editor.wordHighlightStrongBackground#d19a6644
  • editorBracketHighlight.foreground1#85efff
  • editorBracketHighlight.foreground2#40d4a6
  • editorBracketHighlight.foreground3#d19a66
  • editorBracketHighlight.foreground4#e17ba5
  • editorBracketHighlight.foreground5#39c5d7
  • editorBracketHighlight.foreground6#cc8866
  • editorBracketMatch.background#15889833
  • editorBracketMatch.border#158898
  • editorCursor.foreground#85efff
  • editorError.foreground#e55225
  • editorGutter.addedBackground#40d4a6
  • editorGutter.background#051214
  • editorGutter.deletedBackground#e55225
  • editorGutter.modifiedBackground#d19a66
  • editorHoverWidget.background#072f34ee
  • editorHoverWidget.border#102022
  • editorIndentGuide.activeBackground#426d73
  • editorIndentGuide.background#274248
  • editorInfo.foreground#39c5d7
  • editorLineNumber.activeForeground#158898
  • editorLineNumber.foreground#52757a
  • editorSuggestWidget.background#072f34ee
  • editorSuggestWidget.border#102022
  • editorSuggestWidget.foreground#8ca8ac
  • editorSuggestWidget.highlightForeground#39c5d7
  • editorSuggestWidget.selectedBackground#117380
  • editorSuggestWidget.selectedForeground#f0ffff
  • editorWarning.foreground#d89544
  • editorWhitespace.foreground#20444a
  • editorWidget.background#072f34ee
  • editorWidget.border#102022
  • editorWidget.foreground#b0c5c8
  • extensionButton.prominentBackground#0a8899
  • extensionButton.prominentForeground#e0f5f5
  • extensionButton.prominentHoverBackground#0baacc
  • focusBorder#072f34
  • foreground#b0c5c8
  • gitDecoration.addedResourceForeground#1ab980
  • gitDecoration.conflictingResourceForeground#d19a66
  • gitDecoration.deletedResourceForeground#e55225
  • gitDecoration.ignoredResourceForeground#6a8488
  • gitDecoration.modifiedResourceForeground#40d4a6
  • gitDecoration.untrackedResourceForeground#39c5d7
  • input.background#063337
  • input.border#0a4850
  • input.foreground#ccd8da
  • input.placeholderForeground#8ca8ac
  • inputOption.activeBorder#158898
  • inputValidation.errorBackground#5a1810ee
  • inputValidation.errorBorder#721e10
  • inputValidation.errorForeground#ff4444
  • inputValidation.infoBackground#117885ee
  • inputValidation.infoBorder#1598aa
  • inputValidation.infoForeground#39c5d7
  • inputValidation.warningBackground#8a7055cc
  • inputValidation.warningBorder#aa8860
  • inputValidation.warningForeground#d89544
  • list.activeSelectionBackground#117380
  • list.activeSelectionForeground#e5fcff
  • list.dropBackground#00455a
  • list.errorForeground#e55225
  • list.focusBackground#00455a
  • list.focusForeground#e5fcff
  • list.highlightForeground#39c5d7
  • list.hoverBackground#0c5966
  • list.hoverForeground#e5fcff
  • list.inactiveFocusBackground#073339
  • list.inactiveSelectionBackground#083d44
  • list.inactiveSelectionForeground#b0c5c8
  • list.warningForeground#ffaa88
  • minimap.errorHighlight#e55225ee
  • minimap.findMatchHighlight#39c5d7ee
  • minimap.warningHighlight#d89544ee
  • minimapGutter.addedBackground#1ab980
  • minimapGutter.deletedBackground#e55225
  • minimapGutter.modifiedBackground#40d4a6
  • panel.background#020a0c
  • panel.border#117380
  • panelTitle.activeBorder#117380
  • panelTitle.activeForeground#39c5d7
  • panelTitle.inactiveForeground#8ca8ac
  • peekView.border#158898
  • peekViewEditor.background#00252a
  • peekViewEditor.matchHighlightBackground#00788a79
  • peekViewEditorGutter.background#00252a
  • peekViewResult.background#051214
  • peekViewResult.fileForeground#d19a66
  • peekViewResult.lineForeground#8ca8ac
  • peekViewResult.matchHighlightBackground#072f34
  • peekViewResult.selectionBackground#072f34
  • peekViewResult.selectionForeground#8ca8ac
  • peekViewTitle.background#051214
  • peekViewTitleDescription.foreground#8ca8ac
  • peekViewTitleLabel.foreground#d19a66
  • progressBar.background#39c5d7
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#158898ad
  • scrollbarSlider.background#70959a5b
  • scrollbarSlider.hoverBackground#15889862
  • selection.background#117888
  • sideBar.background#021012
  • sideBar.border#102022
  • sideBar.foreground#9cb4b8
  • sideBarSectionHeader.background#0a4048
  • sideBarSectionHeader.foreground#9cb4b8
  • sideBarTitle.foreground#9cb4b8
  • statusBar.background#051214
  • statusBar.border#102022
  • statusBar.debuggingBackground#051214
  • statusBar.debuggingBorder#e17ba5af
  • statusBar.debuggingForeground#e17ba550
  • statusBar.foreground#158898
  • statusBar.noFolderBackground#051214
  • statusBar.noFolderBorder#051214
  • statusBar.noFolderForeground#8ca8ac
  • statusBarItem.activeBackground#1abacc45
  • statusBarItem.hoverBackground#072f34
  • statusBarItem.prominentBackground#021012
  • statusBarItem.prominentHoverBackground#003340
  • tab.activeBackground#051214
  • tab.activeBorder#051214
  • tab.activeBorderTop#39c5d7
  • tab.activeForeground#e5fcff
  • tab.activeModifiedBorder#40d4a6
  • tab.border#102022
  • tab.inactiveBackground#072f34
  • tab.inactiveForeground#8ca8ac
  • tab.unfocusedActiveBackground#0b1618
  • tab.unfocusedActiveBorder#051214
  • tab.unfocusedActiveForeground#8ca8ac
  • tab.unfocusedHoverBackground#15889821
  • tab.unfocusedInactiveForeground#8ca8ac
  • terminal.ansiBlack#334b50
  • terminal.ansiBlue#4ab0d9
  • terminal.ansiBrightBlack#486d73
  • terminal.ansiBrightBlue#5db9df
  • terminal.ansiBrightCyan#5dd5e5
  • terminal.ansiBrightGreen#5bd9b3
  • terminal.ansiBrightMagenta#e799bb
  • terminal.ansiBrightRed#ea8260
  • terminal.ansiBrightWhite#c0d5d8
  • terminal.ansiBrightYellow#d89544
  • terminal.ansiCyan#39c5d7
  • terminal.ansiGreen#40d4a6
  • terminal.ansiMagenta#e17ba5
  • terminal.ansiRed#e7704a
  • terminal.ansiWhite#b0c5c8
  • terminal.ansiYellow#d19a66
  • terminal.background#020809
  • terminal.foreground#b0c5c8
  • terminalCursor.background#020809
  • terminalCursor.foreground#b0c5c8
  • titleBar.activeBackground#051214
  • titleBar.activeForeground#b0c5c8
  • titleBar.inactiveBackground#051214
  • titleBar.inactiveForeground#8ca8ac
  • tree.indentGuidesStroke#426d73
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5f8a90italic
variable, string constant.other.placeholder#d19a66
keyword, storage.type, storage.modifier#e17ba5
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#e7704a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e7704a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1aacbf
meta.block variable.other#d19a66
support.other.variable, string.other.link#e7704a
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#7a70e9
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#40d4a6
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#39c5d7
support.type#cc8866
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#4ab0d9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e7704a
variable.language#e7704aitalic
entity.name.method.js#1aacbfitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#1aacbf
entity.other.attribute-name#d9a520
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#d9a520italic
entity.other.attribute-name.class#d9a520
source.sass keyword.control#1aacbf
markup.inserted#40d4a6
markup.deleted#e55225
markup.changed#d9a520
string.regexp#1ab980
constant.character.escape#1ab980
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1aacbfitalic
source.js constant.other.object.key.js string.unquoted.label.js#e7704aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#4ab0d9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d9a520
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7704a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7704a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cc8866
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1aacbf
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e7704a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e17ba5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#40d4a6
markup.italic#e7704aitalic
markup.bold, markup.bold string#e7704abold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e7704abold
markup.underline#e7704aunderline
markup.quote punctuation.definition.blockquote.markdown#5f8a90
markup.quoteitalic
string.other.link.title.markdown#1aacbf
string.other.link.description.title.markdown#e17ba5
constant.other.reference.link.markdown#d9a520
markup.raw.block#e17ba5
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#b0c5c8
variable.language.fenced.markdown#5f8a90
meta.separator#5f8a90bold
markup.table#b0c5c8
Aether - Sublime Coding Experience by Yonas Valentin Mougaard Kristensen - VS Code Theme