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#33548D
  • activityBar.activeBorder#47BFEE
  • activityBar.background#232937
  • activityBar.foreground#ABABAB
  • activityBar.inactiveForeground#ABABAB
  • activityBarBadge.background#47BFEE
  • activityBarBadge.foreground#33548D
  • button.background#33548D
  • button.foreground#D7DAE0
  • button.secondaryBackground#404754
  • button.secondaryForeground#D7DAE0
  • debugToolBar.background#212530
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#2E343F
  • dropdown.border#333944
  • editor.background#212530
  • editor.findMatchBackground#000
  • editor.findMatchBorder#E5C07B
  • editor.findMatchHighlightBackground#000
  • editor.findMatchHighlightBorder#D19A66
  • editor.foreground#ABABAB
  • editor.lineHighlightBackground#2C313C
  • editor.selectionBackground#455368
  • editor.selectionForeground#F0F
  • editor.selectionHighlightBackground#2C313C
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#455368
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#47BFEE
  • editorBracketMatch.background#000
  • editorBracketMatch.border#000
  • editorCursor.background#FFFFFFC9
  • editorCursor.foreground#528BFF
  • editorError.foreground#C24038
  • editorGroup.border#181A1F
  • editorGroup.dropBackground#00000060
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#1C202B
  • editorGutter.addedBackground#50AF8E
  • editorGutter.deletedBackground#E05561
  • editorGutter.modifiedBackground#518EC7
  • editorHoverWidget.background#212530
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground1#C8C8C859
  • editorIndentGuide.background1#2C313C
  • editorInlayHint.background#67769630
  • editorInlayHint.foreground#65738B
  • editorLineNumber.activeForeground#33548D
  • editorLineNumber.foreground#455368
  • editorMarkerNavigation.background#212530
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#212530
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313C
  • editorWarning.foreground#D19A66
  • editorWhitespace.foreground#00000020
  • editorWidget.background#212530
  • focusBorder#252A35
  • gitDecoration.deletedResourceForeground#FF616E
  • gitDecoration.ignoredResourceForeground#343E50
  • gitDecoration.modifiedResourceForeground#61AFEF
  • gitDecoration.untrackedResourceForeground#7CCA8D
  • input.background#2C313C
  • inputOption.activeForeground#47BFEE
  • list.activeSelectionBackground#383E4A
  • list.activeSelectionForeground#FFF
  • list.focusBackground#383E4A
  • list.focusForeground#ABABAB
  • list.highlightForeground#47BFEE
  • list.hoverBackground#292d37
  • list.hoverForeground#ABABAB
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • list.warningForeground#D19A66
  • menu.foreground#C8C8C8
  • panelSectionHeader.background#212530
  • peekViewEditor.background#1B1D23
  • peekViewEditor.matchHighlightBackground#29244B
  • peekViewResult.background#20252E
  • sash.hoverBorder#33548D
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566660
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1C202B
  • sideBar.border#252A35
  • sideBar.foreground#5F6A79
  • sideBarSectionHeader.background#2E343F
  • sideBarSectionHeader.border#252A35
  • statusBar.background#33548D
  • statusBar.debuggingBackground#50AF8E
  • statusBar.debuggingBorder#32746D
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#E7E7E7
  • statusBar.noFolderBackground#212530
  • statusBarItem.hoverBackground#2C313A
  • statusBarItem.remoteBackground#4D78CC
  • statusBarItem.remoteForeground#F8FAFD
  • tab.activeBackground#252A35
  • tab.activeBorderTop#47BFEE
  • tab.activeForeground#DCDCDC
  • tab.border#212530
  • tab.hoverBackground#2A2F3A
  • tab.inactiveBackground#2E343F
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3F4451
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#4F5666
  • terminal.ansiBrightBlue#47BFEE
  • terminal.ansiBrightCyan#4CD1E0
  • terminal.ansiBrightGreen#A5E075
  • terminal.ansiBrightMagenta#DE73FF
  • terminal.ansiBrightRed#FF616E
  • terminal.ansiBrightWhite#D7DAE0
  • terminal.ansiBrightYellow#F0A45D
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#50AF8E
  • terminal.ansiMagenta#C162DE
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#E6E6E6
  • terminal.ansiYellow#E5C07B
  • terminal.background#212530
  • terminal.border#373E49
  • terminal.foreground#ABB2BF
  • terminal.selectionBackground#ABB2BF30
  • textLink.foreground#61AFEF
  • titleBar.activeBackground#212530
  • titleBar.activeForeground#E7E7E7
  • titleBar.inactiveBackground#373E49
  • titleBar.inactiveForeground#E7E7E7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.ignore, keyword.other.definition#A9DEF9
storage, storage.type#6A76DFitalic
keyword.control#C678DDitalic
string#D19A66italic
string.regexp#56B6C2
entity.name.function#61AFEF
entity.name.namespace#7CCA8D
support.function#61AFEF
meta.class entity.name.type.class, meta.class entity.name.function, new.expr entity.name.function, new.expr support.class#4CD1E0
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum#2EA7B7
meta.at-rule#9FA0FF
variable.other.readwrite.alias, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type, meta.return.type entity.name.type, entity.other.inherited-class, meta.object.member variable.other.readwrite, entity.name.type.rust#9FA0FF
entity.name.type.struct#E5C07B
constant.language, support.type.builtin#6A76DF
constant.numeric#4CD1E0
variable, expression.ng variable.other.readwrite, support.type.property-name, meta.object-literal.key, variable.other.rust, variable.other.readwrite, keyword.key#A9DEF9
punctuation.support.type.property-name#6A76DF
meta.ng-binding.event expression.ng variable.other.readwrite#A9DEF9
variable.other.constant, support.variable.property#E5C07B
variable.other.readwrite#A9DEF9
variable.language#E06C75
variable.scss#50AF8E
variable.parameter#99CABBitalic
comment, punctuation.definition.comment#5F6A79
source.rust meta.attribute.rust punctuation.definition.attribute.rust#47BFEE
source.rust meta.attribute.rust#6A76DF
keyword.operator#2EA7B7
keyword.operator.new, keyword.operator.expression#C678DD
keyword.operator.type, meta.brace.round, punctuation.accessor#CACACA
keyword.other.unit#2EA7B7
meta.brace.round, punctuation.accessor#ABABAB
punctuation.definition.template-expression, punctuation.section.embedded.rust#C678DD
punctuation.section.embedded.rust#E5C07B
support.type.primitive#98C379
support.class.builtin, meta.block entity.name.type#E06C75
meta.class support.class.error#E06C75
entity.name.tag#E06C75
entity.name.tag support.class.component#FF616E
entity.other.attribute-name, punctuation.definition.ng-binding-name#98C379italic
entity.other.attribute-name.id#E5C07B
entity.other.attribute-name.class, punctuation.definition.entity#7CCA8D
meta.at-rule.apply.tailwind entity.other.attribute-name.class#9FA0FF
entity.other.ng-binding-name#50AF8E
punctuation.definition.string, string.quoted.double punctuation.definition.block, text.html.derivative punctuation.definition.block#99582A
support.type.object.module#E5C07B
support.constant.property-value#6A76DF
support.constant.font-name, meta.property-value#E5C07B
punctuation#ABABAB
punctuation.definition.keyword#C678DD
support.type.vendored#7CCA8D
constant.character.entity#6A76DF
source#ABABAB
source.ini#D19A66
source.python#A9DEF9
source.python support.type, support.function.builtin#2EA7B7italic
source.python meta.function, source.python meta.function-call.generic#61AFEF
meta.function-call#E5C07B
markup.heading.markdown, markup.heading entity.name#61AFEF
punctuation.definition.heading.markdown#455368
Leone Dark by brankoleone - VS Code Theme