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#1c1e27
  • activityBar.border#85eea7
  • activityBar.foreground#85eea7
  • activityBar.inactiveForeground#85eea766
  • activityBarBadge.background#85eea7
  • activityBarBadge.foreground#1c1e27
  • button.background#85eea7
  • button.foreground#1c1e27
  • button.hoverBackground#85eea7
  • dropdown.background#1c1e27
  • dropdown.border#181a1f
  • dropdown.foreground#f0f0f0
  • editor.background#1C1E2D
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#1A0B2E21
  • editor.selectionBackground#ffffff3b
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketHighlight.foreground1#FF6B35
  • editorBracketHighlight.foreground2#FF1493
  • editorBracketHighlight.foreground3#DA70D6
  • editorBracketHighlight.foreground4#00FFFF
  • editorBracketHighlight.foreground5#85eea7
  • editorBracketHighlight.foreground6#FFD700
  • editorBracketHighlight.unexpectedBracket.foreground#ff1212cc
  • editorBracketMatch.background#FF149340
  • editorBracketMatch.border#FF1493
  • editorCursor.foreground#85eea7
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground1#FF1493
  • editorIndentGuide.background1#8f97ff28
  • editorLineNumber.activeForeground#FF1493
  • editorLineNumber.foreground#8f97ff4d
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.errorForeground#ff1212b3
  • editorOverviewRuler.findMatchForeground#d186167e
  • editorOverviewRuler.infoForeground#3794ff
  • editorOverviewRuler.warningForeground#cca700
  • editorRuler.foreground#cd60ff56
  • editorSuggestWidget.background#1c1e27
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.foreground#f5f5f5
  • editorSuggestWidget.highlightForeground#d7dae0
  • editorSuggestWidget.selectedBackground#2c313a
  • editorSuggestWidget.selectedForeground#d7dae0
  • editorWhitespace.foreground#8f97ff28
  • editorWidget.background#222438
  • editorWidget.border#454545
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#85eea7
  • focusBorder#85eea7
  • gitDecoration.addedResourceForeground#78a8d6
  • gitDecoration.conflictingResourceForeground#e4676b
  • gitDecoration.deletedResourceForeground#ff16b0
  • gitDecoration.ignoredResourceForeground#d5d8da59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.untrackedResourceForeground#85eea7
  • input.background#2a2d45
  • input.border#4e5480
  • input.foreground#cccccc
  • input.placeholderForeground#cccccc80
  • inputOption.activeBackground#85eea766
  • inputOption.activeBorder#007acc
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c313a
  • list.highlightForeground#d7dae0
  • list.hoverBackground#2c313a
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#cca700
  • panel.background#2a2d45
  • panel.border#85eea7
  • panelTitle.activeForeground#85eea7
  • panelTitle.inactiveForeground#d998f799
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#232745
  • sideBar.border#85eea7
  • sideBar.foreground#f5f5f5
  • sideBarSectionHeader.background#4e5480
  • sideBarSectionHeader.foreground#f5f5f5
  • sideBarTitle.foreground#85eea7
  • statusBar.background#194052
  • statusBar.debuggingBackground#85eea7
  • statusBar.debuggingForeground#1c1e27
  • statusBar.foreground#B5CFC1
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#4e5480
  • tab.activeBorder#85eea7
  • tab.activeForeground#ffffff
  • tab.border#85eea7
  • tab.inactiveBackground#2a2d45
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#78a8d6
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#78a8d6
  • terminal.ansiBrightCyan#6be4e6
  • terminal.ansiBrightGreen#85eea7
  • terminal.ansiBrightMagenta#f806fa
  • terminal.ansiBrightRed#ff407b
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#ffea16
  • terminal.ansiCyan#59e1e3
  • terminal.ansiGreen#85eea7
  • terminal.ansiMagenta#f806fa
  • terminal.ansiRed#ff407b
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#ffea16
  • terminal.background#2a2d45
  • terminal.foreground#f1f1f1
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#070930
  • terminalCursor.foreground#85eea7
  • titleBar.activeBackground#1c1e27
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#15171d
  • titleBar.inactiveForeground#7b7f86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7D8799italic
string.quoted, string.template, punctuation.definition.string, punctuation.definition.block.js#6DF18E—
string.template meta.embedded.line#F3F3F3—
variable, entity.name.variable#85EEA7—
variable.language, variable.other.object.js#78A8D6normal
variable.parameter#14FFD4bold
storage.type, storage.modifier#3ED9F1bold
constant#FFD700—
string.regexp#85EEA7—
constant.numeric#EEFF00bold
constant.language#00FF91—
constant.character.escape#F2F2F2—
entity.name#78A8D6—
entity.name.tag#14FFE0bold
entity.name.tag.boxlang, entity.name.tag.bx#35FF78bold
entity.name.tag.boxlang.component, meta.tag.boxlang entity.name.tag, source.boxlang entity.name.tag#FF6B35bold
punctuation.definition.tag.boxlang, punctuation.definition.tag.begin.boxlang, punctuation.definition.tag.end.boxlang#14FF76—
punctuation.definition.tag#DA70D6—
entity.other.attribute-name#85EEA7—
entity.name.type#7C5CFAbold
entity.other.inherited-class#F2F2F2—
entity.name.function, variable.function#7EDA70bold
keyword#37FF14bold
keyword.control#69FDFFbold
keyword.operator#F535FFbold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#00FFFFbold
keyword.other.unit#85EEA7—
support#78A8D6bold
support.function#F5FAF3—
support.variable#78A8D6—
meta.object-literal.key, support.type.property-name#85EEA7—
variable.other.property.js#7ADAD1bold
punctuation.separator.key-value#AB35FFbold
punctuation.section.embedded#F2F2F2—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF1493—
support.type.property-name.css, support.type.vendored.property-name.css#85EEA7
constant.other.color#FFA500bold
support.constant.font-name#85EEA7—
entity.other.attribute-name.id#FFD700bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#70CEDA—
support.function.misc.css#14FFCCbold
markup.heading, entity.name.section#FF6B35—
markup.quote#FF1493bold
beginning.punctuation.definition.list#85EEA7—
markup.underline.link#00FFFF—
string.other.link.description#85EEA7—
token.info-token#78A8D6—
token.warn-token#FFA500—
token.error-token#FF1493—
token.debug-token#DA70D6—
BoxLang Theme by Ortus Solutions - VS Code Theme