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.activeBorder#408080
  • activityBar.background#ffffff
  • activityBar.border#ebebeb
  • activityBar.foreground#35393b
  • activityBar.inactiveForeground#35393b50
  • activityBarBadge.background#464c4f
  • activityBarBadge.foreground#ffffff
  • badge.background#35393b90
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#22222224
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#35393b
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#ffffff
  • button.background#408080
  • button.foreground#ffffff
  • button.hoverBackground#408080
  • checkbox.background#f7f7f7
  • checkbox.border#d4d4d4
  • debugToolBar.background#ffffff
  • descriptionForeground#35393b90
  • diffEditor.insertedTextBackground#1c6b4830
  • diffEditor.removedTextBackground#ab595940
  • dropdown.background#ffffff
  • dropdown.border#ebebeb
  • dropdown.foreground#35393b
  • dropdown.listBackground#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fef08a
  • editor.foldBackground#22222210
  • editor.foreground#35393b
  • editor.inactiveSelectionBackground#22222216
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#22222224
  • editor.selectionHighlightBackground#22222216
  • editor.stackFrameHighlightBackground#fef9c3
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#666666
  • editorBracketHighlight.foreground2#666666
  • editorBracketHighlight.foreground3#666666
  • editorBracketHighlight.foreground4#666666
  • editorBracketHighlight.foreground5#666666
  • editorBracketHighlight.foreground6#666666
  • editorBracketMatch.background#1c6b4820
  • editorError.foreground#a65363
  • editorGroup.border#ebebeb
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ebebeb
  • editorGutter.addedBackground#408061
  • editorGutter.commentRangeForeground#35393b50
  • editorGutter.deletedBackground#a65363
  • editorGutter.foldingControlForeground#35393b90
  • editorGutter.modifiedBackground#4d8199
  • editorHint.foreground#408061
  • editorInfo.foreground#4d8199
  • editorInlayHint.background#f7f7f7
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#464c4f
  • editorLineNumber.foreground#35393b50
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#f7f7f7
  • editorStickyScrollHover.background#f7f7f7
  • editorWarning.foreground#a67453
  • editorWhitespace.foreground#00000015
  • editorWidget.background#ffffff
  • errorForeground#a65363
  • focusBorder#00000000
  • foreground#35393b
  • gitDecoration.addedResourceForeground#408061
  • gitDecoration.conflictingResourceForeground#a67453
  • gitDecoration.deletedResourceForeground#a65363
  • gitDecoration.ignoredResourceForeground#35393b50
  • gitDecoration.modifiedResourceForeground#4d8199
  • gitDecoration.submoduleResourceForeground#35393b90
  • gitDecoration.untrackedResourceForeground#408080
  • input.background#f7f7f7
  • input.border#ebebeb
  • input.foreground#35393b
  • input.placeholderForeground#35393b90
  • inputOption.activeBackground#35393b50
  • list.activeSelectionBackground#f7f7f7
  • list.activeSelectionForeground#35393b
  • list.focusBackground#f7f7f7
  • list.highlightForeground#408080
  • list.hoverBackground#f7f7f7
  • list.hoverForeground#35393b
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#f7f7f7
  • list.inactiveSelectionForeground#35393b
  • menu.separatorBackground#ebebeb
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#737373
  • notifications.background#ffffff
  • notifications.border#ebebeb
  • notifications.foreground#35393b
  • notificationsErrorIcon.foreground#a65363
  • notificationsInfoIcon.foreground#4d8199
  • notificationsWarningIcon.foreground#a67453
  • panel.background#ffffff
  • panel.border#ebebeb
  • panelInput.border#e5e5e5
  • panelTitle.activeBorder#408080
  • panelTitle.activeForeground#35393b
  • panelTitle.inactiveForeground#737373
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#ebebeb
  • pickerGroup.foreground#35393b
  • problemsErrorIcon.foreground#a65363
  • problemsInfoIcon.foreground#4d8199
  • problemsWarningIcon.foreground#a67453
  • progressBar.background#408080
  • quickInput.background#ffffff
  • quickInput.foreground#35393b
  • quickInputList.focusBackground#f7f7f7
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#35393b50
  • scrollbarSlider.background#35393b10
  • scrollbarSlider.hoverBackground#35393b50
  • settings.headerForeground#35393b
  • settings.modifiedItemIndicator#408080
  • sideBar.background#ffffff
  • sideBar.border#ebebeb
  • sideBar.foreground#464c4f
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#ebebeb
  • sideBarSectionHeader.foreground#35393b
  • sideBarTitle.foreground#35393b
  • statusBar.background#ffffff
  • statusBar.border#ebebeb
  • statusBar.debuggingBackground#f7f7f7
  • statusBar.debuggingForeground#464c4f
  • statusBar.foreground#464c4f
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f7f7f7
  • tab.activeBackground#ffffff
  • tab.activeBorder#ebebeb
  • tab.activeBorderTop#35393b90
  • tab.activeForeground#35393b
  • tab.border#ebebeb
  • tab.hoverBackground#f7f7f7
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBorder#ebebeb
  • tab.unfocusedActiveBorderTop#ebebeb
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#0f0f0f
  • terminal.ansiBlue#4d8199
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#4d8199
  • terminal.ansiBrightCyan#408080
  • terminal.ansiBrightGreen#408061
  • terminal.ansiBrightMagenta#a66395
  • terminal.ansiBrightRed#a65363
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#a69553
  • terminal.ansiCyan#408080
  • terminal.ansiGreen#408061
  • terminal.ansiMagenta#a66395
  • terminal.ansiRed#a65363
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#a69553
  • terminal.foreground#35393b
  • terminal.selectionBackground#22222224
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#ebebeb
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#408080
  • textLink.foreground#408080
  • textPreformat.foreground#525252
  • textSeparator.foreground#d4d4d4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#464c4f
  • titleBar.border#f7f7f7
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#737373
  • tree.indentGuidesStroke#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#999999
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, keyword.operator.type, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, meta.objectliteral.ts, punctuation, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue#666666
constant, entity.name.constant, variable.language, meta.definition.variable#a69553
entity, entity.name#4d8199
variable.parameter.function#35393b
entity.name.tag, tag.html#408080
entity.name.function#4d8199
keyword, storage.type.class.jsdoc, punctuation.definition.template-expression#408080
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null, constant.language.import-export-all.ts#a65363
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#35393b
string, string punctuation.section.embedded source, attribute.value#a67453
punctuation.definition.string#a6745377
punctuation.support.type.property-name#40808077
support#408080
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#408080
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#a69553
variable, identifier#a69553
support.type.primitive, entity.name.type#408061
namespace#408061
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#a65363
invalid.broken#b91c1citalic
invalid.deprecated#b91c1citalic
invalid.illegal#b91c1citalic
invalid.unimplemented#b91c1citalic
carriage-return#fafafaitalic underline
message.error#b91c1c
string variable#a67453
source.regexp, string.regexp#a65363
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repetition#a67453
string.regexp constant.character.escape#a69553
support.constant#a69553
keyword.operator.quantifier.regexp, constant.numeric, number#a66395
keyword.other.unit#a65363
constant.language.boolean, constant.language#a66395
meta.module-reference#408080
punctuation.definition.list.begin.markdown#a67453
markup.heading, markup.heading entity.name#408080bold
markup.quote#408061
markup.italic#35393bitalic
markup.bold#35393bbold
markup.raw#408080
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b91c1c
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#16a34a
markup.changed, punctuation.definition.changed#ea580c
markup.ignored, markup.untracked#f5f5f5
meta.diff.range#a855f7bold
meta.diff.header#2563eb
meta.separator#2563ebbold
meta.output#2563eb
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#525252
brackethighlighter.unmatched#b91c1c
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#a67453
markup.underline.link.markdown, markup.underline.link.image.markdown#35393b90underline
type.identifier, constant.other.character-class.regexp#408061
entity.other.attribute-name.html.vue#4d8199
invalid.illegal.unrecognized-tag.html
Idle theme for VSCode by luojiahai - VS Code Theme