Skip to main content
Coding Theme

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#fafafa
  • activityBar.activeBorder#fdabab
  • activityBar.activeFocusBorder#fdabab
  • activityBar.background#f7f7f7
  • activityBar.border#bbbbbb62
  • activityBar.dropBackground#f7f7f7
  • activityBar.foreground#fdabab
  • activityBar.inactiveForeground#8a8a8a
  • activityBarBadge.background#fd9999
  • button.background#b4b3b3
  • button.foreground#f7f7f7
  • button.hoverBackground#fd99998c
  • debugIcon.breakpointCurrentStackframeForeground#ff0000
  • debugIcon.breakpointDisabledForeground#c0c0c0
  • debugIcon.breakpointForeground#fd9999
  • debugIcon.breakpointStackframeForeground#ff0000
  • debugIcon.breakpointUnverifiedForeground#ff0000
  • descriptionForeground#fd9999
  • diffEditor.diagonalFill#cbcbcb
  • diffEditor.insertedTextBackground#61afee31
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#fdabab5e
  • diffEditor.removedTextBorder#00000000
  • diffEditorGutter.insertedLineBackground#62abe65a
  • diffEditorGutter.removedLineBackground#fdabab90
  • dropdown.background#f7f7f7
  • dropdown.foreground#2c2c2c
  • dropdown.listBackground#f7f7f7
  • editor.background#f7f7f7
  • editor.findMatchBackground#ffabab55
  • editor.findMatchHighlightBackground#ffabab55
  • editor.foreground#2c2c2c
  • editor.inactiveSelectionBackground#ffabab55
  • editor.lineHighlightBackground#fd999928
  • editor.lineHighlightBorder#ff000000
  • editor.selectionBackground#ffc3c3a2
  • editor.selectionForeground#ffa1a1
  • editor.selectionHighlightBackground#ff000000
  • editor.selectionHighlightBorder#ff9f9f
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#ff8e8e
  • editor.wordHighlightStrongBackground#ffe5e5
  • editor.wordHighlightStrongBorder#ff9f9f
  • editorBracketHighlight.foreground1#2c2c2c
  • editorBracketHighlight.foreground2#2c2c2c
  • editorBracketHighlight.foreground3#2c2c2c
  • editorBracketHighlight.foreground4#61aeee
  • editorBracketHighlight.foreground5#fd9999
  • editorBracketHighlight.foreground6#61aeee
  • editorBracketHighlight.unexpectedBracket.foreground#afb2b8
  • editorBracketPairGuide.activeBackground1#fdb7b7
  • editorBracketPairGuide.activeBackground2#fdb7b7
  • editorBracketPairGuide.activeBackground3#fdb7b7
  • editorBracketPairGuide.activeBackground4#fdb7b7
  • editorBracketPairGuide.activeBackground5#fdb7b7
  • editorBracketPairGuide.activeBackground6#fdb7b7
  • editorCursor.foreground#fd9999
  • editorGroup.border#fdababc7
  • editorGroup.dropBackground#fd99992a
  • editorGroupHeader.tabsBackground#f1f1f1
  • editorIndentGuide.activeBackground#fd999973
  • editorIndentGuide.background#c0c0c0
  • editorLineNumber.activeForeground#c0c0c0
  • editorLineNumber.foreground#c0c0c0
  • editorLink.activeForeground#61aeee
  • editorMarkerNavigation.background#c0c0c0
  • editorOverviewRuler.selectionHighlightForeground#ffabab55
  • editorSuggestWidget.background#f7f7f7
  • editorSuggestWidget.foreground#2c2c2c
  • editorSuggestWidget.highlightForeground#61aeee
  • editorSuggestWidget.selectedBackground#fdababa8
  • editorWidget.background#f7f7f7
  • list.activeSelectionBackground#ffffffb7
  • list.activeSelectionForeground#fdabab
  • list.dropBackground#e9dfdf
  • list.errorForeground#61aeee
  • list.filterMatchBackground#ff000000
  • list.filterMatchBorder#ff000000
  • list.focusBackground#f7f7f7
  • list.focusForeground#fdabab
  • list.highlightForeground#61aeee
  • list.hoverBackground#f7f7f7
  • list.hoverForeground#fdabab
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#f5f4f4
  • list.inactiveSelectionForeground#fdabab
  • list.invalidItemForeground#fdabab
  • list.warningForeground#ccaa6c
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#fdfdfd
  • menu.selectionBackground#f7f7f7
  • menubar.selectionBackground#f7f7f7
  • menubar.selectionForeground#fdabab
  • minimap.errorHighlight#f2747f
  • minimap.findMatchHighlight#fdabab
  • minimap.selectionHighlight#00000000
  • minimap.warningHighlight#FFA500
  • notificationCenterHeader.background#f7f7f7
  • progressBar.background#fd99997e
  • scrollbar.shadow#fdabab6b
  • scrollbarSlider.activeBackground#fdababce
  • scrollbarSlider.background#fdabab63
  • scrollbarSlider.hoverBackground#fdabab8e
  • selection.background#ffd8d8
  • settings.checkboxBackground#f7f7f7
  • settings.checkboxBorder#6b6b6b67
  • settings.checkboxForeground#2c2c2c
  • settings.dropdownBackground#f7f7f7
  • settings.dropdownBorder#6b6b6b67
  • settings.dropdownForeground#2c2c2c
  • settings.dropdownListBorder#6b6b6b67
  • settings.headerForeground#fd9999
  • settings.modifiedItemIndicator#fd9999
  • settings.numberInputBackground#f7f7f7
  • settings.numberInputBorder#6b6b6b67
  • settings.numberInputForeground#2c2c2c
  • settings.textInputBackground#f7f7f7
  • settings.textInputBorder#6b6b6b67
  • settings.textInputForeground#2c2c2c
  • sideBar.background#f1f1f1
  • sideBar.border#ececec
  • sideBar.dropBackground#e2a6a6
  • sideBar.foreground#797979
  • sideBarSectionHeader.background#fd999983
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#2c2c2c
  • statusBar.background#f7f7f7
  • statusBar.border#2c2c2c0e
  • statusBar.debuggingBackground#fdabab
  • statusBar.debuggingBorder#2c2c2c0e
  • statusBar.debuggingForeground#2c2c2c
  • statusBar.foreground#2c2c2c
  • statusBar.noFolderBackground#f7f7f7
  • statusBar.noFolderBorder#2c2c2c0e
  • statusBar.noFolderForeground#2c2c2c
  • statusBarItem.activeBackground#dadada
  • statusBarItem.hoverBackground#00000000
  • statusBarItem.prominentBackground#f7f7f7
  • statusBarItem.prominentForeground#2c2c2c
  • statusBarItem.prominentHoverBackground#f7f7f7
  • statusBarItem.remoteBackground#fdabab
  • statusBarItem.remoteForeground#f7f7f7
  • tab.activeForeground#fd9999
  • tab.inactiveForeground#c0c0c0
  • tab.unfocusedActiveForeground#c0c0c0
  • textLink.activeForeground#fd9999
  • textLink.foreground#61aeee
  • textPreformat.foreground#ccaa6c
  • titleBar.activeBackground#f7f7f7
  • tree.indentGuidesStroke#000000
  • welcomePage.background#f7f7f7
  • welcomePage.buttonBackground#e2e2e2
  • welcomePage.buttonHoverBackground#fdabab80
  • window.activeBorder#fdabab
  • window.inactiveBorder#2c2c2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a1a4aa
punctuation.definition.string.begin, punctuation.definition.string.end#e6a1a1
string.quoted, punctuation.definition.string#fd9999
constant.other.placeholder, constant.character.format.placeholder.other.python#fd9999bold underline
constant.numeric, storage.type.number, keyword.other.unit#FFA500
entity.name.function.definition, entity.name.function.python#f2747fbold
meta.function-call.generic, entity.name.function.call, entity.name.function.member, support.function.builtin#f2747f
variable.parameter#72C7D2
keyword.operator#2c2c2c
variable.other.enummember#61aeee
meta.tail.enum, meta.tail.struct#2c2c2cbold
keyword.control.directive#98c379bold
entity.name.type.class, entity.name.type.constructor, entity.name.type.destructor, entity.name.scope-resolution.function.definition#61aeeebold
entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor#2c2c2c
keyword.operator.assignment#2c2c2c
entity.name.function.preprocessor#FFA500bold
keyword.operator.new#f2747fbold
constant.other.caps#ccaa6c
meta.member.access#2c2c2c
punctuation.separator.arguments, punctuation.separator.parameters, punctuation.separator.element, punctuation.separator.comma, punctuation.separator.delimiter.comma#61aeee
keyword.operator.comparison#EB1165
punctuation.separator.pointer-access#61aeeebold
keyword.control#c678dd
storage.modifier, storage.type, support.type, keyword.other.typedef, keyword.other.using#c678ddbold
constant.character.escape#FFA500
constant.language#72C7D2
storage.modifier.array.bracket.square#2c2c2c
keyword.reserved.vhdl, entity.name.tag.vhdl, support.constant.std_standard.vhdl#c678dd
keyword.operator.vhdl#e6a1a1
meta.block.type_statement.vhdl, entity.name.type.vhdl#61aeee
entity.name.type.ieee_std_logic_1164.vhdl, meta.block.subtype_indication.vhdl#f2747fbold
support.type.exception.python#2c2c2c
entity.name.function.decorator.python#98c379
support.variable.magic.python, support.function.magic.python#ccaa6c
variable.parameter.function.language.special.self.python, variable.language.special.self.python#fd9999
storage.type.function.python#c678dd
keyword.operator.logical.python#c678dd
markup.heading.markdown#f2747fbold
markup.underline.link.markdown#ccaa6cunderline
markup.bold.markdown#ccaa6cbold
markup.quote.markdown#98c379italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown, meta.link.inline.markdown#61aeeebold
punctuation.definition.list.begin.markdown, meta.separator.markdown#c678ddbold
markup.raw.block.markdown, markup.fenced_code.block.markdown#72C7D2
markup.inline.raw.string.markdown#FFA500
markup.inline.raw.string.markdownbold
punctuation.definition.metadata.markdown#2c2c2c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown
entity.name.function.js#f2747fbold
variable.language.this.js#fd9999
keyword.other.class.cs, keyword.other.using.cs, keyword.other.namespace.cs#c678ddbold
keyword.type.cs#c678ddbold
keyword.other.new.cs#f2747fbold
entity.name.function.cs#f2747f
keyword.other.this.cs#fd9999
keyword.other.enum.cs#C678DDbold
keyword.operator.null-conditional.cs#F2747Fbold
meta.preprocessor.cs#98c379bold
entity.name.variable.preprocessor.symbol.cs, string.unquoted.preprocessor.message.cs#FFA500bold
True Pink Theme by ProgCat - VS Code Theme