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#f9f9f9
  • activityBar.foreground#030303cc
  • activityBarBadge.background#ff6363
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.focusForeground#030303cc
  • breadcrumb.foreground#03030366
  • button.background#ff6363
  • button.foreground#FFFFFF
  • commandCenter.background#ffffff
  • commandCenter.border#03030314
  • commandCenter.foreground#03030399
  • diffEditor.insertedLineBackground#006b4f0D
  • diffEditor.insertedTextBackground#006b4f15
  • diffEditor.removedLineBackground#b124240D
  • diffEditor.removedTextBackground#b1242415
  • dropdown.background#fcfcfc
  • dropdown.listBackground#fcfcfc
  • editor.background#ffffff
  • editor.findMatchBackground#C75D074d
  • editor.findMatchHighlightBackground#C75D0726
  • editor.foreground#030303
  • editor.lineHighlightBackground#fefefe
  • editor.lineHighlightBorder#fefefe
  • editor.selectionBackground#fdfdfd
  • editor.wordHighlightBackground#03030314
  • editorBracketHighlight.foreground1#8B6D3F
  • editorBracketHighlight.foreground2#6B5BA0
  • editorBracketHighlight.foreground3#4A8490
  • editorBracketHighlight.foreground4#8B6D3F
  • editorBracketHighlight.foreground5#6B5BA0
  • editorBracketHighlight.foreground6#4A8490
  • editorBracketHighlight.unexpectedBracket.foreground#b12424
  • editorBracketMatch.background#03030314
  • editorBracketMatch.border#03030333
  • editorCursor.foreground#ff6363
  • editorError.foreground#b12424
  • editorGroupHeader.tabsBackground#fcfcfc
  • editorGroupHeader.tabsBorder#fefefe
  • editorGutter.addedBackground#006b4f
  • editorGutter.deletedBackground#b12424
  • editorGutter.modifiedBackground#F8A300
  • editorIndentGuide.activeBackground1#0303031f
  • editorIndentGuide.background1#0303030d
  • editorInfo.foreground#138AF2
  • editorLineNumber.activeForeground#03030399
  • editorLineNumber.foreground#03030333
  • editorOverviewRuler.errorForeground#b12424
  • editorOverviewRuler.infoForeground#138AF2
  • editorOverviewRuler.warningForeground#C75D07
  • editorWarning.foreground#C75D07
  • editorWhitespace.foreground#03030314
  • editorWidget.background#fcfcfc
  • editorWidget.border#03030314
  • focusBorder#fcfcfc
  • gitDecoration.addedResourceForeground#006b4f
  • gitDecoration.conflictingResourceForeground#C75D07
  • gitDecoration.deletedResourceForeground#b12424
  • gitDecoration.ignoredResourceForeground#03030333
  • gitDecoration.modifiedResourceForeground#F8A300
  • gitDecoration.untrackedResourceForeground#006b4f
  • input.background#ffffff
  • input.border#0303031f
  • input.foreground#030303
  • input.placeholderForeground#03030366
  • list.activeSelectionBackground#0303031a
  • list.activeSelectionForeground#030303
  • list.focusBackground#fefefe
  • list.highlightForeground#ff6363
  • list.hoverBackground#0303030f
  • list.inactiveSelectionBackground#0303030f
  • minimap.background#fefefe
  • minimap.findMatchHighlight#C75D0766
  • minimap.selectionHighlight#03030333
  • notifications.background#fcfcfc
  • notifications.border#03030314
  • panel.background#ffffff
  • panel.border#03030314
  • panelTitle.activeBorder#ff6363
  • panelTitle.activeForeground#030303cc
  • panelTitle.inactiveForeground#03030366
  • peekView.border#ff6363
  • peekViewEditor.background#fcfcfc
  • peekViewResult.background#fcfcfc
  • peekViewTitle.background#fcfcfc
  • quickInput.background#fcfcfc
  • quickInput.foreground#030303
  • scrollbarSlider.activeBackground#0303032e
  • scrollbarSlider.background#0303030f
  • scrollbarSlider.hoverBackground#0303031f
  • sideBar.background#fcfcfc
  • sideBar.foreground#03030399
  • sideBarTitle.foreground#030303cc
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#b12424
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#03030399
  • tab.activeBackground#ffffff
  • tab.activeForeground#030303
  • tab.border#fefefe
  • tab.inactiveBackground#fcfcfc
  • tab.inactiveForeground#03030380
  • terminal.ansiBlack#FFFFFF
  • terminal.ansiBlue#138AF2
  • terminal.ansiBrightBlack#03030366
  • terminal.ansiBrightBlue#138AF2
  • terminal.ansiBrightCyan#138AF2
  • terminal.ansiBrightGreen#006b4f
  • terminal.ansiBrightMagenta#9a1b6e
  • terminal.ansiBrightRed#b12424
  • terminal.ansiBrightWhite#030303
  • terminal.ansiBrightYellow#F8A300
  • terminal.ansiCyan#138AF2
  • terminal.ansiGreen#006b4f
  • terminal.ansiMagenta#9a1b6e
  • terminal.ansiRed#b12424
  • terminal.ansiWhite#030303
  • terminal.ansiYellow#F8A300
  • terminal.background#ffffff
  • terminal.foreground#030303cc
  • titleBar.activeBackground#fcfcfc
  • titleBar.activeForeground#030303cc
  • titleBar.inactiveBackground#fcfcfc
  • titleBar.inactiveForeground#03030366
  • widget.shadow#03030315

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#030303—
emphasis—italic
strong, markup.heading.markdown, markup.bold.markdown—bold
markup.italic.markdown—italic
meta.link.inline.markdown#ff6363underline
string, markup.fenced_code, markup.inline, string.quoted.docstring.multi.python#C03030—
comment, string.quoted.docstring.multi#999999—
constant.numeric, constant.language, constant.other.placeholder, constant.character.format.placeholder, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#030303—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, entity.name.tag.yaml, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#666666—
variable.parameter.function#333333italic
support.function, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#C75D07—
entity.name.tag, support.class.component, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#C75D07—
string.quoted, string.template, string.regexp, string.interpolated#C03030—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#666666—
markup.underline.link, punctuation.definition.metadata.markdown#ff6363—
beginning.punctuation.definition.list.markdown#C03030—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown#666666—
constant.numeric.decimal, constant.language.boolean, meta.var.exp.ts#030303—
support.variable.property#333333—
markup.inserted#006b4f—
markup.deleted#b12424—
markup.changed#F8A300—