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#EEF3F6
  • activityBar.border#EEF3F6
  • activityBar.foreground#5F6E78
  • activityBar.inactiveForeground#99A7B3
  • badge.background#6B8EBB
  • badge.foreground#FFFFFF
  • button.background#6B8EBB
  • button.foreground#FFFFFF
  • button.hoverBackground#5E81AD
  • descriptionForeground#6E7C88
  • diffEditor.insertedTextBackground#5F8F7520
  • diffEditor.removedTextBackground#C65F6F20
  • dropdown.background#EEF3F6
  • dropdown.border#EEF3F6
  • dropdown.foreground#23303A
  • dropdown.listBackground#EEF3F6
  • editor.background#F7FAFC
  • editor.foreground#23303A
  • editor.hover.background#FAFCFD
  • editor.hover.border#DDE5EB
  • editor.hover.foreground#23303A
  • editor.hover.statusBarBackground#EEF3F6
  • editor.lineHighlightBackground#F1F6F9
  • editor.selectionBackground#6B8EBB33
  • editor.selectionHighlightBackground#5F8F7520
  • editor.wordHighlightBackground#6B8EBB15
  • editor.wordHighlightStrongBackground#6B8EBB1F
  • editorBracketHighlight.foreground1#B82858
  • editorBracketHighlight.foreground2#1860B8
  • editorBracketHighlight.foreground3#907208
  • editorBracketHighlight.foreground4#347A42
  • editorBracketHighlight.foreground5#A87030
  • editorBracketHighlight.foreground6#087A78
  • editorBracketMatch.background#6B8EBB15
  • editorBracketMatch.border#6B8EBB
  • editorCursor.foreground#6B8EBB
  • editorGroupHeader.tabsBackground#EEF3F6
  • editorGroupHeader.tabsBorder#EEF3F600
  • editorGutter.addedBackground#5F8F75
  • editorGutter.deletedBackground#C65F6F
  • editorGutter.modifiedBackground#6B8EBB
  • editorHoverWidget.background#FAFCFD
  • editorHoverWidget.border#DDE5EB
  • editorHoverWidget.foreground#23303A
  • editorHoverWidget.statusBarBackground#EEF3F6
  • editorIndentGuide.activeBackground#D8E1E7
  • editorIndentGuide.background#E4EBF0
  • editorWhitespace.foreground#D8E1E7
  • editorWidget.background#EEF3F6
  • editorWidget.border#EEF3F6
  • errorForeground#C65F6F
  • focusBorder#6B8EBB80
  • foreground#23303A
  • gitDecoration.conflictingResourceForeground#C65F6F
  • gitDecoration.ignoredResourceForeground#B0BCC5
  • gitDecoration.modifiedResourceForeground#6B8EBB
  • gitDecoration.untrackedResourceForeground#5F8F75
  • icon.foreground#5F6E78
  • input.background#FAFCFD
  • input.border#FAFCFD00
  • input.foreground#23303A
  • input.placeholderForeground#99A7B3
  • inputOption.activeBackground#6B8EBB1A
  • list.activeSelectionBackground#6B8EBB12
  • list.activeSelectionForeground#23303A
  • list.focusBackground#6B8EBB12
  • list.hoverBackground#6B8EBB0D
  • list.inactiveSelectionBackground#6B8EBB12
  • menu.background#EEF3F6
  • menu.foreground#23303A
  • menu.selectionBackground#6B8EBB1A
  • menu.separatorBackground#DDE5EB
  • menubar.selectionBackground#E4EBF0
  • notificationCenter.background#EEF3F6
  • notificationCenter.border#DDE5EB
  • notificationCenterHeader.background#EEF3F6
  • notificationCenterHeader.foreground#23303A
  • notificationLink.foreground#5D82B4
  • notifications#5D82B4
  • notifications.background#EEF3F6
  • notifications.foreground#5D82B4
  • notificationsErrorIcon.foreground#C65F6F
  • notificationsInfoIcon.foreground#6B8EBB
  • notificationsWarningIcon.foreground#B98533
  • notificationToast.background#EEF3F6
  • notificationToast.border#DDE5EB
  • panel.background#F7FAFC
  • panel.border#F7FAFC
  • panelTitle.activeForeground#23303A
  • panelTitle.inactiveForeground#5F6E78
  • peekView.border#6B8EBB
  • peekViewEditor.background#F7FAFC
  • peekViewResult.background#EEF3F6
  • peekViewResult.selectionBackground#6B8EBB1A
  • peekViewTitle.background#EEF3F6
  • peekViewTitleDescription.foreground#6E7C88
  • peekViewTitleLabel.foreground#23303A
  • pickerGroup.border#EEF3F6
  • pickerGroup.foreground#99A7B3
  • quickInput.background#EEF3F6
  • quickInput.foreground#23303A
  • quickInputList.focusBackground#6B8EBB1A
  • quickInputList.focusForeground#23303A
  • quickInputTitle.background#EEF3F6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#90A3B0
  • scrollbarSlider.background#B5C3CD80
  • scrollbarSlider.hoverBackground#A2B2BEB0
  • selection.background#6B8EBB33
  • sideBar.background#EEF3F6
  • sideBar.border#EEF3F6
  • sideBar.foreground#5F6E78
  • sideBarSectionHeader.background#EEF3F6
  • sideBarSectionHeader.border#EEF3F6
  • sideBarSectionHeader.foreground#23303A
  • statusBar.background#EEF3F6
  • statusBar.border#EEF3F6
  • statusBar.foreground#5F6E78
  • tab.activeBackground#F7FAFC
  • tab.activeBorder#6B8EBB
  • tab.activeForeground#23303A
  • tab.border#EEF3F600
  • tab.inactiveBackground#EEF3F6
  • tab.inactiveForeground#99A7B3
  • tab.unfocusedActiveBorder#6B8EBB80
  • terminal.ansiBlack#4E5D67
  • terminal.ansiBlue#5D82B4
  • terminal.ansiCyan#3B8C8B
  • terminal.ansiGreen#5F8F75
  • terminal.ansiMagenta#7A6CCF
  • terminal.ansiRed#B85E6D
  • terminal.ansiWhite#F4F8FA
  • terminal.ansiYellow#B98533
  • terminal.background#F7FAFC
  • terminal.foreground#4E5D67
  • terminal.selectionBackground#6B8EBB33
  • textCodeBlock.background#E6EDF3
  • textLink.foreground#5D82B4
  • textSeparator.foreground#E4EBF0
  • titleBar.activeBackground#F7FAFC
  • titleBar.activeForeground#23303A
  • titleBar.border#F7FAFC
  • titleBar.inactiveBackground#F7FAFC
  • titleBar.inactiveForeground#99A7B3
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7E8A94italic
string, punctuation.definition.string#347A42—
constant.numeric, constant.language, constant.character, constant.other#A87030—
keyword, storage.type, storage.modifier#B82858—
keyword.operator#6E7E88—
entity.name.function, support.function, meta.function-call#1860B8—
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#907208—
variable, meta.definition.variable, support.variable, entity.name.variable#384850—
variable.parameter#384850italic
variable.other.property, support.type.property-name#087A78—
punctuation#6E7E88—
meta.object-literal.key#087A78—
entity.name.tag, punctuation.definition.tag#B82858—
entity.other.attribute-name#907208—
string.regexp#A87030—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#B82858—
support.type.property-name.css#087A78—
support.constant.property-value.css, keyword.other.unit.css#A87030—
entity.other.attribute-name.html.vue#B82858—
support.class.component.html.vue#907208—
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#A87030—
markup.heading.markdown#1860B8—
markup.underline.link.markdown, string.other.link.title.markdown#347A42—
markup.bold.markdown—bold
markup.italic.markdown—italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#6E7E88—
invalid#C05050—
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#347A42—
support.function.builtin.python#1860B8italic
support.function.magic.python#1860B8italic
support.type.python#907208—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#B82858italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#A87030—
support.variable.magic.python#087A78—
support.class.exception.python#907208—
meta.fstring.python variable, constant.character.format.placeholder.other.python#384850—