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#020F1F
  • activityBar.activeBorder#F59A38
  • activityBar.activeFocusBorder#052C3D
  • activityBar.background#020F1F
  • activityBar.border#052C3D
  • activityBar.dropBorder#0D7B91
  • activityBar.foreground#85E7FF
  • activityBar.inactiveForeground#18687B
  • activityBarBadge.background#F59A38
  • activityBarBadge.foreground#020F1F
  • badge.background#F59A38
  • badge.foreground#020F1F
  • button.background#08495C
  • button.foreground#B7E5F1
  • button.hoverBackground#0C6D82
  • checkbox.background#031D2E
  • checkbox.border#0D7B91
  • checkbox.foreground#B7E5F1
  • debugIcon.breakpointCurrentStackframeForeground#F8B772
  • debugIcon.breakpointDisabledForeground#C19F9F
  • debugIcon.breakpointForeground#F87272
  • debugIcon.breakpointStackframeForeground#F87272
  • debugIcon.breakpointUnverifiedForeground#F8B772
  • debugIcon.continueForeground#00BD1F
  • debugIcon.disconnectForeground#F87272
  • debugIcon.pauseForeground#F8B772
  • debugIcon.restartForeground#00BD1F
  • debugIcon.startForeground#00BD1F
  • debugIcon.stepBackForeground#F8EB72
  • debugIcon.stepIntoForeground#29F5BB
  • debugIcon.stepOutForeground#72F8E4
  • debugIcon.stepOverForeground#DD72F8
  • debugIcon.stopForeground#F872C7
  • debugToolBar.background#031D2E
  • debugToolBar.border#042536
  • descriptionForeground#0D7B91
  • diffEditor.border#020F1F
  • diffEditor.diagonalFill#020F1F
  • diffEditor.insertedTextBackground#011D0B
  • diffEditor.insertedTextBorder#011D0B
  • diffEditor.removedTextBackground#330000
  • diffEditor.removedTextBorder#330000
  • dropdown.background#031627
  • dropdown.border#0D7B91
  • dropdown.foreground#B7E5F1
  • dropdown.listBackground#031D2E
  • editor.background#020F1F
  • editor.findMatchBackground#62045F
  • editor.findMatchBorder#93068E
  • editor.findMatchHighlightBackground#08495C
  • editor.findMatchHighlightBorder#0D7B91
  • editor.findRangeHighlightBackground#08495C
  • editor.findRangeHighlightBorder#0D7B91
  • editor.focusedStackFrameHighlightBackground#330000
  • editor.foldBackground#0D7B9140
  • editor.foreground#05D5FF
  • editor.hoverHighlightBackground#08495C
  • editor.inactiveSelectionBackground#08495C80
  • editor.lineHighlightBackground#031627
  • editor.lineHighlightBorder#042536
  • editor.rangeHighlightBackground#031627
  • editor.rangeHighlightBorder#08495C
  • editor.selectionBackground#08495C
  • editor.selectionForeground#B7E5F1
  • editor.selectionHighlightBackground#042536
  • editor.selectionHighlightBorder#074154
  • editor.snippetFinalTabstopHighlightBackground#08495C
  • editor.snippetFinalTabstopHighlightBorder#0D7B91
  • editor.snippetTabstopHighlightBackground#08495C
  • editor.snippetTabstopHighlightBorder#0D7B91
  • editor.stackFrameHighlightBackground#330000
  • editor.symbolHighlightBackground#08495C
  • editor.symbolHighlightBorder#0D7B91
  • editor.wordHighlightBackground#063345
  • editor.wordHighlightBorder#074154
  • editor.wordHighlightStrongBackground#063345
  • editor.wordHighlightStrongBorder#063345
  • editorBracketMatch.background#042536
  • editorBracketMatch.border#074154
  • editorCodeLens.foreground#0D7B91
  • editorCursor.background#020F1F
  • editorCursor.foreground#B7E5F1
  • editorGroup.border#052C3D
  • editorGroup.dropBackground#08495C80
  • editorGroup.emptyBackground#020F1F
  • editorGroup.focusedEmptyBorder#0C7489
  • editorGroupHeader.border#052C3D
  • editorGroupHeader.noTabsBackground#020F1F
  • editorGroupHeader.tabsBackground#020F1F
  • editorGroupHeader.tabsBorder#052C3D
  • editorGutter.addedBackground#058F35
  • editorGutter.background#031627
  • editorGutter.commentRangeForeground#0C7489
  • editorGutter.deletedBackground#DA4949
  • editorGutter.foldingControlForeground#0C7489
  • editorGutter.modifiedBackground#0C7489
  • editorIndentGuide.activeBackground#0C7489
  • editorIndentGuide.background#042536
  • editorLineNumber.activeForeground#09576B
  • editorLineNumber.foreground#063A4D
  • editorLink.activeForeground#B6AF25
  • editorMarkerNavigation.background#042536
  • editorMarkerNavigationError.background#cc0000
  • editorMarkerNavigationInfo.background#44BCDA
  • editorMarkerNavigationWarning.background#EDEAA6
  • editorSuggestWidget.background#042536
  • editorSuggestWidget.border#0D7B91
  • editorSuggestWidget.foreground#AEDFF4
  • editorSuggestWidget.highlightForeground#E5E234
  • editorSuggestWidget.selectedBackground#08495C
  • editorWidget.background#031D2E
  • editorWidget.border#0C7489
  • editorWidget.foreground#B7E5F1
  • editorWidget.resizeBorder#0C7489
  • errorForeground#FF7070
  • focusBorder#0D7B91
  • foreground#44BCDA
  • gitDecoration.addedResourceForeground#61D16C
  • gitDecoration.conflictingResourceForeground#FF85DE
  • gitDecoration.deletedResourceForeground#FF8080
  • gitDecoration.ignoredResourceForeground#D085FF
  • gitDecoration.modifiedResourceForeground#FFC180
  • gitDecoration.submoduleResourceForeground#B3CDFF
  • gitDecoration.untrackedResourceForeground#C3B3FF
  • icon.foreground#0D7B91
  • input.background#031627
  • input.border#0D7B91
  • input.foreground#B7E5F1
  • input.placeholderForeground#0D7B91
  • inputOption.activeBackground#08495C
  • inputOption.activeBorder#0C6D82
  • inputOption.activeForeground#B7E5F1
  • inputValidation.errorBackground#A21111
  • inputValidation.errorBorder#E82121
  • inputValidation.errorForeground#F2F2F2
  • list.activeSelectionBackground#08495C
  • list.activeSelectionForeground#85E7FF
  • list.deemphasizedForeground#0D7B91
  • list.dropBackground#08495C
  • list.errorForeground#FF5757
  • list.filterMatchBackground#530337
  • list.filterMatchBorder#55114D
  • list.focusBackground#042536
  • list.focusForeground#85E7FF
  • list.highlightForeground#EDEAA6
  • list.hoverBackground#031D2E
  • list.hoverForeground#85E7FF
  • list.inactiveFocusBackground#042536
  • list.inactiveSelectionBackground#042536
  • list.inactiveSelectionForeground#44BCDA
  • list.invalidItemForeground#FF5757
  • list.warningForeground#FB9393
  • notificationCenter.border#031D2E
  • notificationCenterHeader.background#031627
  • notificationCenterHeader.foreground#F59A38
  • notificationLink.foreground#EDEAA6
  • notifications.background#031627
  • notifications.border#031D2E
  • notifications.foreground#B7E5F1
  • notificationsErrorIcon.foreground#cc0000
  • notificationsInfoIcon.foreground#44BCDA
  • notificationsWarningIcon.foreground#EDEAA6
  • notificationToast.border#031627
  • panel.background#020F1F
  • panel.border#052C3D
  • panel.dropBorder#0D7B91
  • panelInput.border#0D7B91
  • panelSection.border#052C3D
  • panelSection.dropBackground#08495C40
  • panelSectionHeader.background#031627
  • panelSectionHeader.border#052C3D
  • panelSectionHeader.foreground#44BCDA
  • panelTitle.activeBorder#F59A38
  • panelTitle.activeForeground#44BCDA
  • panelTitle.inactiveForeground#18687B
  • peekView.border#0C7489
  • peekViewEditor.background#031627
  • peekViewEditor.matchHighlightBackground#063345
  • peekViewEditor.matchHighlightBorder#063345
  • peekViewEditorGutter.background#031627
  • peekViewResult.background#020F1F
  • peekViewResult.fileForeground#031D2E
  • peekViewResult.lineForeground#B7E5F1
  • peekViewResult.matchHighlightBackground#063345
  • peekViewResult.selectionBackground#074154
  • peekViewResult.selectionForeground#B7E5F1
  • peekViewTitle.background#4D2400
  • peekViewTitleDescription.foreground#D4EBFC
  • peekViewTitleLabel.foreground#D4EBFC
  • pickerGroup.border#44BCDA
  • pickerGroup.foreground#F59A38
  • progressBar.background#F59A38
  • quickInput.background#031627
  • quickInput.foreground#44BCDA
  • scrollbar.shadow#063A4D
  • scrollbarSlider.activeBackground#2AACC690
  • scrollbarSlider.background#6CCCE090
  • scrollbarSlider.hoverBackground#2DB2CD90
  • selection.background#2AA7C0
  • settings.headerForeground#F59A38
  • sideBar.background#020F1F
  • sideBar.border#052C3D
  • sideBar.dropBackground#08495C40
  • sideBar.foreground#66C8E1
  • sideBarSectionHeader.background#031627
  • sideBarSectionHeader.border#042536
  • sideBarSectionHeader.foreground#0D7B91
  • sideBarTitle.foreground#F59A38
  • statusBar.background#020F1F
  • statusBar.border#052C3D
  • statusBar.debuggingBackground#F59A38
  • statusBar.debuggingBorder#F59A38
  • statusBar.debuggingForeground#020F1F
  • statusBar.foreground#66C8E1
  • statusBar.noFolderBackground#4D2400
  • statusBar.noFolderBorder#4D2400
  • statusBar.noFolderForeground#66C8E1
  • statusBarItem.activeBackground#08495C
  • statusBarItem.hoverBackground#031D2E
  • statusBarItem.prominentBackground#031627
  • statusBarItem.prominentForeground#F59A38
  • statusBarItem.prominentHoverBackground#ff0000
  • statusBarItem.remoteBackground#031627
  • statusBarItem.remoteForeground#F59A38
  • symbolIcon.arrayForeground#D77676
  • symbolIcon.booleanForeground#FFB700
  • symbolIcon.classForeground#F49227
  • symbolIcon.colorForeground#ff0000
  • symbolIcon.constantForeground#CBC53D
  • symbolIcon.constructorForeground#80cbc4
  • symbolIcon.enumeratorForeground#F49227
  • symbolIcon.enumeratorMemberForeground#05D5FF
  • symbolIcon.eventForeground#05D5FF
  • symbolIcon.fieldForeground#EFEFEF
  • symbolIcon.fileForeground#05D5FF
  • symbolIcon.folderForeground#05D5FF
  • symbolIcon.functionForeground#80cbc4
  • symbolIcon.interfaceForeground#FFB700
  • symbolIcon.keyForeground#FFB700
  • symbolIcon.keywordForeground#1AFF3C
  • symbolIcon.methodForeground#80cbc4
  • symbolIcon.moduleForeground#F49227
  • symbolIcon.namespaceForeground#F49227
  • symbolIcon.nullForeground#CBC53D
  • symbolIcon.numberForeground#CBC53D
  • symbolIcon.objectForeground#FFFFFF
  • symbolIcon.operatorForeground#F0BD6A
  • symbolIcon.packageForeground#F49227
  • symbolIcon.propertyForeground#d0a661
  • symbolIcon.referenceForeground#05D5FF
  • symbolIcon.snippetForeground#05D5FF
  • symbolIcon.stringForeground#C7BDFF
  • symbolIcon.structForeground#05D5FF
  • symbolIcon.textForeground#05D5FF
  • symbolIcon.typeParameterForeground#05D5FF
  • symbolIcon.unitForeground#05D5FF
  • symbolIcon.variableForeground#B7BA09
  • tab.activeBackground#020F1F
  • tab.activeBorder#020F1F
  • tab.activeBorderTop#F59A38
  • tab.activeForeground#66C8E1
  • tab.activeModifiedBorder#ff0000
  • tab.border#052C3D
  • tab.hoverBackground#031D2E
  • tab.hoverBorder#ff0000
  • tab.hoverForeground#66C8E1
  • tab.inactiveBackground#031627
  • tab.inactiveForeground#0D7B91
  • tab.inactiveModifiedBorder#ff0000
  • tab.unfocusedActiveBackground#020F1F
  • tab.unfocusedActiveBorder#020F1F
  • tab.unfocusedActiveBorderTop#0D7B91
  • tab.unfocusedActiveForeground#0D7B91
  • tab.unfocusedActiveModifiedBorder#ff0000
  • tab.unfocusedHoverBackground#031D2E
  • tab.unfocusedHoverBorder#ff0000
  • tab.unfocusedHoverForeground#0D7B91
  • tab.unfocusedInactiveBackground#031627
  • tab.unfocusedInactiveForeground#0D7B91
  • tab.unfocusedInactiveModifiedBorder#ff0000
  • terminal.ansiBlack#020F1F
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#6C8099
  • terminal.ansiBrightBlue#B8E7FF
  • terminal.ansiBrightCyan#02ADCF
  • terminal.ansiBrightGreen#09B944
  • terminal.ansiBrightMagenta#FFCCEA
  • terminal.ansiBrightRed#FFDCDB
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F9C994
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#5af78e
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff615b
  • terminal.ansiWhite#50D6E1
  • terminal.ansiYellow#F49227
  • terminal.background#020F1F
  • terminal.border#8AE2F4
  • terminal.foreground#EDEAA6
  • terminal.selectionBackground#08495C60
  • terminalCursor.background#020F1F
  • terminalCursor.foreground#44BCDA
  • textBlockQuote.background#042536
  • textBlockQuote.border#F59A38
  • textCodeBlock.background#0D7B91
  • textLink.activeForeground#EDEAA6
  • textLink.foreground#B6AF25
  • textPreformat.foreground#FAD0A3
  • textSeparator.foreground#EDEAA6
  • titleBar.activeBackground#020F1F
  • titleBar.activeForeground#85E7FF
  • titleBar.inactiveBackground#031627
  • titleBar.inactiveForeground#85E7FF
  • tree.indentGuidesStroke#052C3D
  • walkThrough.embeddedEditorBackground#031627
  • welcomePage.buttonBackground#03162780
  • welcomePage.buttonHoverBackground#031627
  • widget.shadow#000000
  • window.activeBorder#052C3D
  • window.inactiveBorder#052C3D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#0D7B91italic
source.js constant#CBC53D
meta#8AE2F4
string.quoted#C7BDFF
string#C7BDFF
constant.numeric#CBC53D
constant.language#CBC53D
keyword.operator#F0BD6A
punctuation.definition.binding-pattern, meta.import punctuation.definition.block#77C4D6
keyword.control#1AFF3C
storage.type#FFB700
storage.modifier#34945E
variable.language#FEFBFB
constant.character, constant.other#34945E
storage.other#FC9C9D
entity.name.class, entity.name.type#F49227
punctuation.separator.variable#EFEFEF
support.function#DBA80A
meta.tag punctuation.definition.string#DBA80A
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#DBA80A
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#cecece
meta.tag.inline source, text.html.php.source#D17F26
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#D17F26
meta.tag.other#8AE2F4
variable.other.property#B7BA09
meta.function-call.object#9872A2
variable.other.normal#B7BA09
meta.brace.erb.html#D08442
meta.object-literal.key#eeeeee
meta.toc-list.id#D17F26
punctuation.section.embedded.coffee#D08442
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#FFADE9
variable.language.ruby#B7BA09
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#9872A2
markup.list#D17F26
markup.bold, markup.italic#6089B4
markup.inline.raw#FFB8DB
token.info-token#57c7ff
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
markup.heading#F49227
markup.heading.setext#F49227
meta.diff, meta.diff.header#F49227
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#D08442
keyword.other.special-method.ruby#FFB700
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D08442
constant.other.symbol.ruby#CBC53D
source.php.embedded.line.html#676867
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#9AA83A
meta.function-call.object.php#D0B344
variable.language.js#B7BA09
support.type.property-name.css#F49227
meta.selector.css entity.other.attribute-name.id#a27272
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#FFBAA8
invalid#EE2222
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#C7BDFF
punctuation.separator, punctuation.terminator#D0D0D0
string.regexp, string.regexp keyword.control, string.regexp keyword.operator#1AFF3C
string.regexp punctuation.definition.string#A9B9B0
string.regexp keyword.other#FF5E5E
entity.name.function#80cbc4
punctuation.definition.parameters, punctuation.definition.arguments#C9E9E0
meta.parameters#C9E9E0
variable.parameter#FFADD8
variable.function, meta.function-call entity.name.function, meta.method-call entity.name.function#CCD279
entity.name.type.class, entity.other.inherited-class, support.class#F49227
keyword.control.conditional, keyword.control.import#1AFF3C
meta.tag.sgml, meta.tag.sgml variable.language, meta.tag.sgml punctuation.definition.tag#FFCC32
meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor punctuation.definition.tag#FFCC32
entity.name.tag#E0C600
punctuation.definition.tag#D0D0D0
entity.other.attribute-name#8CDAFF
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag#B8FCB1
support.type.property-name#d0a661
meta.property-value#BDBFFF
punctuation.section#D0D0D0
variable.css, variable.scss#B7BA09
punctuation.definition.entity, punctuation.definition.attribute-selector#8CDAFF
keyword.control.at-rule, keyword.control.at-rule punctuation#69f0ae
meta.at-rule support.function#8CDAFF
meta.at-rule.mixin variable.scss, meta.at-rule.function variable.scss#D0D0D0
meta.at-rule.mixin support.constant, meta.at-rule.mixin variable.parameter, meta.at-rule.function support.constant, meta.at-rule.function variable.parameter#69f0ae
meta.at-rule.mixin constant.numeric, meta.at-rule.function constant.numeric#CBC53D
keyword.control.at-rule.include, keyword.control.at-rule.include punctuation#69f0aeitalic
meta.at-rule.function punctuation.section#C9E9E0
meta.at-rule.return#D0D0D0
meta.at-rule.return punctuation.definition.begin.bracket, meta.at-rule.return punctuation.definition.end.bracket#D0D0D0
meta.at-rule.include entity.name.function, meta.at-rule.include punctuation, meta.property-value punctuation.section.function#C9E9E0
punctuation.definition.interpolation#D77676
punctuation.definition.map#D77676
comment storage.type, comment punctuation.definition.block#0D7B91italic
punctuation.definition.block, punctuation.definition.dictionary#8AE2F488
meta.brace.square, punctuation.definition.array#D77676
meta.brace.round#C9E9E0
meta.embedded, source.groovy.embedded#FFB638
string source#D08442
punctuation.accessor#F0BD6A
support.variable.dom, support.class.console, support.type.object#DEC9CB
support.variable.property.js#B7BA09
support.class.js, support.class.builtin.js#F49227
meta.function-call support.class.builtin.js, new.expr entity.name.type.js#F49227
support.class.js#F8F8F2
string.template.js, punctuation.definition.string.template#69f0ae
meta.template.expression#F8F8F2
punctuation.definition.template-expression#D77676
punctuation.support.type.property-name#FFB638
punctuation.section.embedded#A9B9B0
punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round#C9E9E0
variable.other.php#C75180
meta.function.parameter#D0D0D0
punctuation.section.array#D77676
keyword.other.new#F0BD6A
keyword.other.sql, keyword.other.DML.sql, keyword.other.alias.sql#F0BD6A
keyword.other.DDL.create.II.sql#CBC53D
entity.name.section, punctuation.definition.heading#F49227
markup beginning.punctuation#FF5E5E
markup punctuation#B2B2B1
string.other.link#00d3b6
markup.underline.link#B6AF25
string.other.link.description.title#B6AF25
meta.link punctuation#00d3b6
meta.image punctuation#00a090
markup.fenced_code punctuation#3C697A