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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

BoxLang Theme - Coding Theme