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#0D9488
  • activityBar.background#FBFDFD
  • activityBar.border#00000000
  • activityBar.foreground#33413F
  • activityBar.inactiveForeground#C3D2D0
  • activityBarBadge.background#0D9488
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0D9488
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#0D9488
  • breadcrumb.focusForeground#33413F
  • breadcrumb.foreground#A5B8B5
  • button.background#0D9488
  • button.foreground#FFFFFF
  • button.hoverBackground#0B857A
  • button.secondaryBackground#E5EFEE
  • button.secondaryForeground#33413F
  • button.secondaryHoverBackground#DAE8E6
  • debugIcon.breakpointForeground#C14953
  • debugToolBar.background#F7FAFA
  • descriptionForeground#8AA09D
  • diffEditor.insertedLineBackground#2E9E8312
  • diffEditor.insertedTextBackground#2E9E831F
  • diffEditor.removedLineBackground#C1495312
  • diffEditor.removedTextBackground#C149531F
  • dropdown.background#F7FAFA
  • dropdown.border#EAF1F0
  • dropdown.foreground#33413F
  • editor.background#FBFDFD
  • editor.findMatchBackground#14B8A64D
  • editor.findMatchHighlightBackground#14B8A626
  • editor.foreground#33413F
  • editor.hoverHighlightBackground#0D948818
  • editor.inactiveSelectionBackground#0D948813
  • editor.lineHighlightBackground#F2F7F6
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#0D94880C
  • editor.selectionBackground#0D948826
  • editor.selectionHighlightBackground#0D94881A
  • editor.wordHighlightBackground#0D948814
  • editor.wordHighlightStrongBackground#0D948822
  • editorBracketHighlight.foreground1#0D9488
  • editorBracketHighlight.foreground2#BC5273
  • editorBracketHighlight.foreground3#3667B0
  • editorBracketMatch.background#0D948820
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#A5B8B5
  • editorCursor.foreground#0D9488
  • editorError.foreground#C14953
  • editorGroup.border#EAF1F0
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#F7FAFA
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#2E9E83
  • editorGutter.deletedBackground#C14953
  • editorGutter.modifiedBackground#0D9488
  • editorHoverWidget.background#F7FAFA
  • editorHoverWidget.border#EAF1F0
  • editorIndentGuide.activeBackground1#CBDCDA
  • editorIndentGuide.background1#EAF1F0
  • editorInfo.foreground#0D9488
  • editorLineNumber.activeForeground#7F9693
  • editorLineNumber.foreground#C3D2D0
  • editorLink.activeForeground#0D9488
  • editorRuler.foreground#EAF1F0
  • editorSuggestWidget.background#F7FAFA
  • editorSuggestWidget.border#EAF1F0
  • editorSuggestWidget.highlightForeground#0D9488
  • editorSuggestWidget.selectedBackground#0D948818
  • editorWarning.foreground#B98A1F
  • editorWhitespace.foreground#DCE7E6
  • editorWidget.background#F7FAFA
  • editorWidget.border#EAF1F0
  • errorForeground#C14953
  • focusBorder#0D948840
  • foreground#33413F
  • gitDecoration.addedResourceForeground#2E9E83
  • gitDecoration.conflictingResourceForeground#BC5273
  • gitDecoration.deletedResourceForeground#C14953
  • gitDecoration.ignoredResourceForeground#B5C4C2
  • gitDecoration.modifiedResourceForeground#0D9488
  • gitDecoration.untrackedResourceForeground#2E9E83
  • input.background#F2F7F6
  • input.border#00000000
  • input.foreground#33413F
  • input.placeholderForeground#A5B8B5
  • inputOption.activeBackground#0D948826
  • inputOption.activeBorder#00000000
  • list.activeSelectionBackground#0D948818
  • list.activeSelectionForeground#33413F
  • list.errorForeground#C14953
  • list.focusBackground#0D948818
  • list.highlightForeground#0D9488
  • list.hoverBackground#0D94880A
  • list.hoverForeground#33413F
  • list.inactiveSelectionBackground#0D94880F
  • list.inactiveSelectionForeground#33413F
  • list.warningForeground#B98A1F
  • menu.background#F7FAFA
  • menu.border#EAF1F0
  • menu.foreground#33413F
  • menu.selectionBackground#0D948818
  • menu.selectionForeground#33413F
  • menubar.selectionBackground#0D948814
  • minimap.findMatchHighlight#14B8A666
  • minimap.selectionHighlight#0D948840
  • notificationCenterHeader.background#F7FAFA
  • notificationLink.foreground#0D9488
  • notifications.background#F7FAFA
  • notifications.border#EAF1F0
  • panel.background#FBFDFD
  • panel.border#EAF1F0
  • panelTitle.activeBorder#0D9488
  • panelTitle.activeForeground#33413F
  • panelTitle.inactiveForeground#A5B8B5
  • peekView.border#0D9488
  • peekViewEditor.background#F5FAF9
  • peekViewEditor.matchHighlightBackground#14B8A633
  • peekViewResult.background#F7FAFA
  • peekViewResult.matchHighlightBackground#14B8A633
  • peekViewTitle.background#F7FAFA
  • pickerGroup.border#EAF1F0
  • pickerGroup.foreground#0D9488
  • problemsErrorIcon.foreground#C14953
  • problemsInfoIcon.foreground#0D9488
  • problemsWarningIcon.foreground#B98A1F
  • progressBar.background#0D9488
  • quickInput.background#F7FAFA
  • quickInputList.focusBackground#0D948818
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#33413F2E
  • scrollbarSlider.background#33413F14
  • scrollbarSlider.hoverBackground#33413F22
  • selection.background#0D948833
  • settings.headerForeground#33413F
  • settings.modifiedItemIndicator#0D9488
  • sideBar.background#F7FAFA
  • sideBar.border#00000000
  • sideBar.foreground#5F7370
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#5F7370
  • sideBarTitle.foreground#8AA09D
  • statusBar.background#FBFDFD
  • statusBar.border#00000000
  • statusBar.debuggingBackground#0D9488
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#8AA09D
  • statusBar.noFolderBackground#FBFDFD
  • statusBar.noFolderForeground#8AA09D
  • statusBarItem.hoverBackground#0D948814
  • statusBarItem.remoteBackground#0D9488
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FBFDFD
  • tab.activeBorder#0D9488
  • tab.activeForeground#33413F
  • tab.border#00000000
  • tab.hoverBackground#FBFDFD
  • tab.inactiveBackground#F7FAFA
  • tab.inactiveForeground#A5B8B5
  • tab.unfocusedActiveForeground#8AA09D
  • tab.unfocusedInactiveForeground#C3D2D0
  • terminal.ansiBlack#33413F
  • terminal.ansiBlue#3B82A0
  • terminal.ansiBrightBlack#7F9693
  • terminal.ansiBrightBlue#4E96B5
  • terminal.ansiBrightCyan#14B8A6
  • terminal.ansiBrightGreen#37B394
  • terminal.ansiBrightMagenta#CC6486
  • terminal.ansiBrightRed#D65F69
  • terminal.ansiBrightWhite#F0F6F5
  • terminal.ansiBrightYellow#CE9B2A
  • terminal.ansiCyan#0D9488
  • terminal.ansiGreen#2E9E83
  • terminal.ansiMagenta#BC5273
  • terminal.ansiRed#C14953
  • terminal.ansiWhite#DCE7E6
  • terminal.ansiYellow#B98A1F
  • terminal.background#FBFDFD
  • terminal.foreground#33413F
  • terminalCursor.foreground#0D9488
  • textBlockQuote.background#F2F7F6
  • textBlockQuote.border#0D9488
  • textCodeBlock.background#F2F7F6
  • textLink.activeForeground#0B857A
  • textLink.foreground#0D9488
  • textPreformat.foreground#3667B0
  • titleBar.activeBackground#FBFDFD
  • titleBar.activeForeground#33413F
  • titleBar.border#00000000
  • titleBar.inactiveBackground#FBFDFD
  • titleBar.inactiveForeground#A5B8B5
  • tree.indentGuidesStroke#E0EAE9
  • walkThrough.embeddedEditorBackground#F7FAFA
  • widget.border#EAF1F0
  • widget.shadow#00000012

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A5B8B5italic
comment.block.documentation, string.quoted.docstring#9DB3B0italic
string, string.quoted, string.template#47803A
constant.character.escape, string constant.other.placeholder#BC5273
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0D9488
constant.numeric#996B10
constant.language, constant.character, constant.other, support.constant, variable.other.enummember#BC5273
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.other.using, keyword.other.namespace, keyword.control.directive#0D9488
keyword.operator, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#7F9693
keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.delete, keyword.operator.sizeof#0D9488
entity.name.function, support.function, variable.function, meta.function-call.generic.python, entity.name.function.member#3667B0
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class#7048C6
variable, variable.other.readwrite, meta.definition.variable#33413F
variable.parameter#55716Eitalic
variable.other.property, variable.other.object.property, support.variable.property#33413F
variable.language#0D9488italic
entity.name.function.decorator, meta.decorator, punctuation.decorator, meta.attribute entity.name.type#BC5273italic
entity.name.tag#0D9488
punctuation.definition.tag#9DB3B0
entity.other.attribute-name#7048C6italic
support.type.property-name.css, support.type.vendored.property-name.css#33413F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#7048C6
support.constant.property-value.css, keyword.other.unit, constant.other.color#996B10
meta.preprocessor, keyword.control.directive.include, keyword.control.directive.define, punctuation.definition.directive#0D9488
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#0D9488bold
markup.italicitalic
markup.boldbold
markup.underline.link, string.other.link#3667B0
markup.inline.raw, markup.fenced_code.block#47803A
support.type.property-name.json#3667B0
entity.name.tag.yaml, support.type.property-name.toml, keyword.key.toml, entity.name.section.group-title.ini, keyword.other.definition.ini, support.type.property-name#3667B0
string.regexp, constant.regexp#BC5273
storage.type.annotation, punctuation.definition.annotation, meta.attribute.rust, storage.modifier.attribute.swift, entity.other.attribute.swift#BC5273italic
entity.name.function.macro, support.function.macro, entity.name.other.preprocessor.macro#0D9488
storage.modifier.lifetime, punctuation.definition.lifetime, entity.name.type.lifetime#BC5273italic
storage.type.function.arrow#7F9693
support.other.namespace.php, entity.name.type.namespace, entity.name.type.module#7048C6
markup.inserted#2E9E83
markup.deleted#C14953
markup.changed#B98A1F
markup.quote#8AA09Ditalic
punctuation.definition.list.begin.markdown#7F9693
invalid, invalid.illegal#C14953
Frost & Cherry by ilke Eren - VS Code Theme