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—