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#ec775c
  • activityBar.background#22272e
  • activityBar.border#444c56
  • activityBar.foreground#CDD3DE
  • activityBar.inactiveForeground#768390
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cdd9e5
  • badge.background#316dca
  • badge.foreground#cdd9e5
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#CDD3DE
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#2d333b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#CDD3DE
  • button.secondaryHoverBackground#444c56
  • checkbox.background#2d333b
  • checkbox.border#444c56
  • debugConsole.errorForeground#ff938a
  • debugConsole.infoForeground#768390
  • debugConsole.sourceForeground#daaa3f
  • debugConsole.warningForeground#c69026
  • debugConsoleInputIcon.foreground#b083f0
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#6bc46d
  • debugTokenExpression.error#ff938a
  • debugTokenExpression.name#6cb6ff
  • debugTokenExpression.number#6bc46d
  • debugTokenExpression.string#96d0ff
  • debugTokenExpression.value#96d0ff
  • debugToolBar.background#2d333b
  • descriptionForeground#768390
  • diffEditor.insertedLineBackground#347d3926
  • diffEditor.insertedTextBackground#57ab5a4d
  • diffEditor.removedLineBackground#c93c3726
  • diffEditor.removedTextBackground#f470674d
  • dropdown.background#2d333b
  • dropdown.border#444c56
  • dropdown.foreground#CDD3DE
  • dropdown.listBackground#2d333b
  • editor.background#22272e
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#eac55f80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#636e7b1a
  • editor.foreground#CDD3DE
  • editor.lineHighlightBackground#636e7b1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#57ab5a40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#636e7b80
  • editor.wordHighlightBorder#636e7b99
  • editor.wordHighlightStrongBackground#636e7b4d
  • editor.wordHighlightStrongBorder#636e7b99
  • editorBracketHighlight.foreground1#ffd700
  • editorBracketHighlight.foreground2#da6dcb
  • editorBracketHighlight.foreground3#179fff
  • editorBracketHighlight.foreground4#ffd700
  • editorBracketHighlight.foreground5#da6dcb
  • editorBracketHighlight.foreground6#179fff
  • editorBracketHighlight.unexpectedBracket.foreground#768390
  • editorBracketMatch.background#57ab5a40
  • editorBracketMatch.border#57ab5a99
  • editorCursor.foreground#dddddd
  • editorGroup.border#444c56
  • editorGroupHeader.tabsBackground#1c2128
  • editorGroupHeader.tabsBorder#444c56
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground1#CDD3DE3d
  • editorIndentGuide.background1#CDD3DE1f
  • editorInlayHint.background#76839033
  • editorInlayHint.foreground#768390
  • editorInlayHint.typeBackground#76839033
  • editorInlayHint.typeForeground#768390
  • editorLineNumber.activeForeground#CDD3DE
  • editorLineNumber.foreground#636e7b
  • editorOverviewRuler.border#1c2128
  • editorUnnecessaryCode.border#7f8490
  • editorWhitespace.foreground#545d68
  • editorWidget.background#2d333b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#CDD3DE
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#636e7b
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#768390
  • input.background#22272e
  • input.border#444c56
  • input.foreground#CDD3DE
  • input.placeholderForeground#636e7b
  • keybindingLabel.foreground#CDD3DE
  • list.activeSelectionBackground#636e7b66
  • list.activeSelectionForeground#CDD3DE
  • list.focusBackground#4184e426
  • list.focusForeground#CDD3DE
  • list.highlightForeground#539bf5
  • list.hoverBackground#636e7b1a
  • list.hoverForeground#CDD3DE
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#636e7b66
  • list.inactiveSelectionForeground#CDD3DE
  • minimapSlider.activeBackground#76839047
  • minimapSlider.background#76839033
  • minimapSlider.hoverBackground#7683903d
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2d333b
  • notifications.border#444c56
  • notifications.foreground#CDD3DE
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#1c2128
  • panel.border#444c56
  • panelInput.border#444c56
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#CDD3DE
  • panelTitle.inactiveForeground#768390
  • peekViewEditor.background#636e7b1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#444c56
  • pickerGroup.foreground#768390
  • progressBar.background#316dca
  • quickInput.background#2d333b
  • quickInput.foreground#CDD3DE
  • scrollbar.shadow#545d6833
  • scrollbarSlider.activeBackground#76839047
  • scrollbarSlider.background#76839033
  • scrollbarSlider.hoverBackground#7683903d
  • settings.headerForeground#CDD3DE
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#1c2128
  • sideBar.border#444c56
  • sideBar.foreground#CDD3DE
  • sideBarSectionHeader.background#1c2128
  • sideBarSectionHeader.border#444c56
  • sideBarSectionHeader.foreground#CDD3DE
  • sideBarTitle.foreground#CDD3DE
  • statusBar.background#22272e
  • statusBar.border#444c56
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cdd9e5
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#768390
  • statusBar.noFolderBackground#22272e
  • statusBarItem.activeBackground#CDD3DE1f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#CDD3DE14
  • statusBarItem.prominentBackground#636e7b66
  • statusBarItem.remoteBackground#444c56
  • statusBarItem.remoteForeground#CDD3DE
  • symbolIcon.arrayForeground#e0823d
  • symbolIcon.booleanForeground#539bf5
  • symbolIcon.classForeground#e0823d
  • symbolIcon.colorForeground#6cb6ff
  • symbolIcon.constantForeground#b4f1b4#8ddb8c#6bc46d#57ab5a#46954a#347d39#2b6a30#245829#1b4721#113417
  • symbolIcon.constructorForeground#dcbdfb
  • symbolIcon.enumeratorForeground#e0823d
  • symbolIcon.enumeratorMemberForeground#539bf5
  • symbolIcon.eventForeground#636e7b
  • symbolIcon.fieldForeground#e0823d
  • symbolIcon.fileForeground#c69026
  • symbolIcon.folderForeground#c69026
  • symbolIcon.functionForeground#b083f0
  • symbolIcon.interfaceForeground#e0823d
  • symbolIcon.keyForeground#539bf5
  • symbolIcon.keywordForeground#f47067
  • symbolIcon.methodForeground#b083f0
  • symbolIcon.moduleForeground#f47067
  • symbolIcon.namespaceForeground#f47067
  • symbolIcon.nullForeground#539bf5
  • symbolIcon.numberForeground#57ab5a
  • symbolIcon.objectForeground#e0823d
  • symbolIcon.operatorForeground#6cb6ff
  • symbolIcon.packageForeground#e0823d
  • symbolIcon.propertyForeground#e0823d
  • symbolIcon.referenceForeground#539bf5
  • symbolIcon.snippetForeground#539bf5
  • symbolIcon.stringForeground#6cb6ff
  • symbolIcon.structForeground#e0823d
  • symbolIcon.textForeground#6cb6ff
  • symbolIcon.typeParameterForeground#6cb6ff
  • symbolIcon.unitForeground#539bf5
  • symbolIcon.variableForeground#e0823d
  • tab.activeBackground#22272e
  • tab.activeBorder#22272e
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#CDD3DE
  • tab.border#444c56
  • tab.hoverBackground#22272e
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#768390
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#444c56
  • tab.unfocusedHoverBackground#636e7b1a
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • terminal.foreground#CDD3DE
  • textBlockQuote.background#1c2128
  • textBlockQuote.border#444c56
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.foreground#768390
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#22272e
  • titleBar.activeForeground#768390
  • titleBar.border#444c56
  • titleBar.inactiveBackground#1c2128
  • titleBar.inactiveForeground#768390
  • tree.indentGuidesStroke#373e47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#65737E
constant, variable.other.constant, variable.other.enummember#6dcae8
constant.numeric#C4A7E7
meta.function-call, entity.name.function#ea9a97
entity.name.section, entity.name.namespace, entity.name.type#6dcae8
entity.name.tag#FC5D7C
entity.other.attribute-name#6dcae8
entity.other.inherited-class#C4A7E7
invalid#eb6f92
invalid.deprecated#908caa
keyword, variable.language.this#4EC9B0
keyword.operator#4EC9B0
markup.inserted.diff#6dcae8
markup.deleted.diff#eb6f92
markup.headingbold
markup.bold.markdownbold
markup.italic.markdown
meta.diff.range#C4A7E7
meta.tag, meta.brace#CDD3DE
meta.import, meta.export#C4A7E7
meta.directive.vue#C4A7E7
meta.property-name.css#6dcae8
meta.property-value.css#f6c177
meta.tag.other.html#908caa
punctuation#6dcae8
punctuation.accessor, storage.type.js, storage.type.ts, storage.type.function.ts#C4A7E7
punctuation.definition.string#f6c177
punctuation.definition.tag#6dcae8
storage.type, storage.modifier, support.type#6dcae8
string#f6c177
support#f6c177
support.constant#f6c177
support.function#4EC9B0
variable, meta.member.access.python, meta.attribute.python, meta.member.access, meta.attribute#CDD3DE
variable.other, variable.other.readwrite, variable.other.readwrite.js, variable.language, variable.function, variable.argument#CDD3DE
variable.parameter, variable.parameter.function-call.python#C4A7E7
Rose Pine Dimmed by Aayush Kunwar - VS Code Theme