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#082121
  • activityBar.foreground#A7F3EA
  • activityBar.inactiveForeground#6CCFC4
  • activityBarBadge.background#2DD4BF
  • activityBarBadge.foreground#03201D
  • editor.background#082121
  • editor.foreground#D6F5F2
  • editor.inactiveSelectionBackground#14B8A62A
  • editor.lineHighlightBackground#082322
  • editor.selectionBackground#14B8A655
  • editorBracketHighlight.foreground1#2DD4BF
  • editorBracketHighlight.foreground2#7AE7DA
  • editorBracketHighlight.foreground3#34D399
  • editorBracketHighlight.foreground4#60A5FA
  • editorBracketHighlight.foreground5#A78BFA
  • editorBracketHighlight.foreground6#FBBF24
  • editorBracketHighlight.unexpectedBracket.foreground#FB7185
  • editorBracketPairGuide.activeBackground1#2DD4BF88
  • editorBracketPairGuide.activeBackground2#7AE7DA88
  • editorBracketPairGuide.activeBackground3#34D39988
  • editorBracketPairGuide.activeBackground4#60A5FA88
  • editorBracketPairGuide.activeBackground5#A78BFA88
  • editorBracketPairGuide.activeBackground6#FBBF2488
  • editorBracketPairGuide.background1#2DD4BF44
  • editorBracketPairGuide.background2#7AE7DA44
  • editorBracketPairGuide.background3#34D39944
  • editorBracketPairGuide.background4#60A5FA44
  • editorBracketPairGuide.background5#A78BFA44
  • editorBracketPairGuide.background6#FBBF2444
  • editorCursor.foreground#2DD4BF
  • editorIndentGuide.activeBackground1#2DD4BF
  • editorIndentGuide.background1#0D2E2C
  • editorLineNumber.activeForeground#A7F3EA
  • editorLineNumber.foreground#2A6B67
  • editorWhitespace.foreground#123A38
  • focusBorder#2DD4BF
  • panel.background#082121
  • panel.border#2DD4BF
  • sideBar.background#082121
  • sideBar.foreground#D6F5F2
  • sideBarTitle.foreground#A7F3EA
  • statusBar.background#082121
  • statusBar.debuggingBackground#0F766E
  • statusBar.debuggingForeground#EFFFFD
  • statusBar.foreground#A7F3EA
  • tab.activeBackground#113d3a
  • tab.activeBorderTop#2DD4BF
  • tab.activeForeground#A7F3EA
  • tab.inactiveBackground#082121
  • tab.inactiveForeground#6CCFC4
  • terminal.ansiBlue#60A5FA
  • terminal.ansiCyan#2DD4BF
  • terminal.ansiGreen#34D399
  • terminal.ansiMagenta#A78BFA
  • terminal.ansiRed#FB7185
  • terminal.ansiWhite#D6F5F2
  • terminal.ansiYellow#FBBF24
  • terminal.background#082121
  • terminal.foreground#D6F5F2
  • titleBar.activeBackground#082121
  • titleBar.activeForeground#A7F3EA
  • titleBar.inactiveBackground#031010
  • titleBar.inactiveForeground#6CCFC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8ea7a5italic
string, punctuation.definition.string#7AE7DA
keyword, storage.type#2DD4BF
keyword, storage.modifier#2DD4BF
keyword, keyword.control#2DD4BF
constant.numeric, constant.language#FBBF24
entity.name.function#34D399
support.function#0F766E
entity.name.type, support.type#A78BFA
variable, identifier#D6F5F2
punctuation.curlybrace.open, punctuation.curlybrace.close, meta.brace.curly#2DD4BF
punctuation.squarebracket.open, punctuation.squarebracket.close#60A5FA
punctuation.parenthesis.open, punctuation.parenthesis.close, meta.brace.round#A78BFA
entity.name.tag, entity.name.tag.html#2DD4BF
entity.name.tag.end, entity.name.tag.structure#2DD4BF
entity.other.attribute-name, entity.other.attribute-name.html#7AE7DA
string.quoted, string.quoted.double.html, string.quoted.single.html#34D399
variable.other.readwrite.angular, variable.other.component, meta.template.expression variable#D6F5F2
meta.template.expression entity.name.function#34D399
meta.directive.property-binding, meta.attribute.angular#60A5FA
meta.directive.event-binding#FBBF24
entity.other.attribute-name.structural.directive.angular, meta.directive.structural#A78BFAitalic
meta.interpolation, meta.template.expression#D6F5F2
punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end#2DD4BF
keyword.operator.pipe, punctuation.separator.pipe, keyword.operator.angular#FBBF24
support.pipe, entity.name.function.pipe, entity.name.function.pipe.angular#A78BFA
entity.name.function.pipe.async, support.pipe.async#2DD4BFbold
meta.pipe.arguments, meta.expression.pipe#34D399
string.unquoted.pipe.async, meta.expression.pipe.async#2DD4BFbold underline
variable.parameter, meta.parameter.object-binding-pattern#7AE7DA
variable.other.object.property, meta.object-literal.key#9FE7DA
entity.other.attribute-name.structural.directive.angular, meta.directive.structural#A78BFAbold italic
meta.directive.property-binding, entity.other.attribute-name.property-binding#60A5FA
meta.directive.event-binding, entity.other.attribute-name.event-binding#FBBF24bold
variable.other.readwrite, variable.other.object.property#7AE7DA
meta.expression.pipe.async, meta.template.expression.pipe.async#2DD4BFbold underline
meta.expression.pipe#9FE7DA
entity.name.function.rxjs, support.function.rxjs, meta.import variable.other.readwrite, meta.function-call variable.function#FBBF24italic
entity.name.function.pipe, support.function.pipe#2DD4BFbold
variable.other.readwrite, variable.other.object.property, meta.definition.variable#7AE7DAitalic
support.pipe, entity.name.function.pipe.angular#A78BFA
entity.name.function.pipe.custom, meta.pipe.custom#C084FCitalic
keyword.control.as, meta.template.expression keyword#FBBF24bold
meta.template.expression variable.other.alias, variable.other.alias#34D399bold
variable.other.template, meta.template.variable variable#34D399italic
keyword.declaration.let, meta.template.expression keyword#2DD4BF
meta.function-call variable.function.map#34D399
meta.function-call variable.function.switchmap#2DD4BFbold
meta.function-call variable.function.mergemap#60A5FA
meta.function-call variable.function.tap#A78BFAitalic
meta.function-call variable.function.filter#FBBF24
meta.function-call variable.function.catcherror#FB7185bold
invalid, invalid.illegal, invalid.deprecated#FB7185underline
keyword.operator.optional, punctuation.accessor.optional#FBBF24
punctuation.accessor.safe, keyword.operator.safe-navigation#7AE7DAitalic
meta.expression.pipe.async#2DD4BFbold underline
meta.function-call variable.function.map#6EE7B7
meta.function-call variable.function.switchmap#2DD4BFbold
meta.function-call variable.function.mergemap#38BDF8
meta.function-call variable.function.exhaustmap#22D3EEbold underline
meta.definition.variable, variable.other.readwrite#2DD4BF
meta.function-call#34D399
meta.function-call variable.function.switchmap, meta.function-call variable.function.mergemap, meta.function-call variable.function.exhaustmap#22D3EE
meta.function-call variable.function.tap#A78BFAitalic
meta.function-call variable.function.signal#2DD4BFbold
meta.function-call variable.function.computed#34D399
meta.function-call variable.function.effect#A78BFAitalic
meta.function-call variable.function#7AE7DA
EKKL3S1A Themes by ekkl3s1a - VS Code Theme