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#4d9de0
  • activityBar.background#141619
  • activityBar.foreground#8f95a3
  • badge.background#4d9de0
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d4d7dd
  • breadcrumb.foreground#7a8089
  • button.background#4d9de0
  • button.foreground#ffffff
  • button.hoverBackground#6eb4f7
  • diffEditor.insertedTextBackground#6ab06a20
  • diffEditor.removedTextBackground#e0785620
  • editor.background#1e2228
  • editor.findMatchBackground#42557a80
  • editor.findMatchHighlightBackground#2d3f5a50
  • editor.foreground#d4d7dd
  • editor.inactiveSelectionBackground#23304030
  • editor.lineHighlightBackground#252a3140
  • editor.rangeHighlightBackground#252a3120
  • editor.selectionBackground#2d4f6760
  • editor.selectionHighlightBackground#2a3f5440
  • editor.wordHighlightBackground#2d445630
  • editor.wordHighlightStrongBackground#36506350
  • editorCursor.foreground#4d9de0
  • editorGutter.addedBackground#6ab06a
  • editorGutter.background#1e2228
  • editorGutter.deletedBackground#e07856
  • editorGutter.modifiedBackground#e0b95a
  • editorHoverWidget.background#252b34
  • editorHoverWidget.border#3a4047
  • editorIndentGuide.activeBackground1#3d4450
  • editorIndentGuide.background1#2a2f37
  • editorLineNumber.activeForeground#7f8694
  • editorLineNumber.foreground#4a5160
  • editorSuggestWidget.background#252b34
  • editorSuggestWidget.selectedBackground#2d4f67
  • editorWhitespace.foreground#2f353e
  • editorWidget.background#252b34
  • editorWidget.border#3a4047
  • gitDecoration.conflictingResourceForeground#f09070
  • gitDecoration.deletedResourceForeground#e07856
  • gitDecoration.ignoredResourceForeground#5a6270
  • gitDecoration.modifiedResourceForeground#e0b95a
  • gitDecoration.untrackedResourceForeground#6ab06a
  • input.background#252b34
  • input.border#3a4047
  • input.foreground#d4d7dd
  • input.placeholderForeground#6a7079
  • inputOption.activeBackground#2d4f67
  • list.activeSelectionBackground#2d4f67
  • list.activeSelectionForeground#e8eaed
  • list.focusBackground#2d4f67
  • list.highlightForeground#6eb4f7
  • list.hoverBackground#252d36
  • list.inactiveSelectionBackground#2a3847
  • notificationCenter.border#3a4047
  • notificationCenterHeader.background#252b34
  • notificationCenterHeader.foreground#d4d7dd
  • notifications.background#252b34
  • notifications.border#3a4047
  • notifications.foreground#d4d7dd
  • notificationToast.border#3a4047
  • panel.background#1e2228
  • panel.border#2a2f37
  • panelTitle.activeBorder#4d9de0
  • panelTitle.activeForeground#d4d7dd
  • panelTitle.inactiveForeground#7a8089
  • peekView.border#4d9de0
  • peekViewEditor.background#1e2228
  • peekViewResult.background#181c21
  • scrollbarSlider.activeBackground#5a6270c0
  • scrollbarSlider.background#3a404780
  • scrollbarSlider.hoverBackground#4a5160a0
  • sideBar.background#181c21
  • sideBar.foreground#b8bcc4
  • statusBar.background#181c21
  • statusBar.foreground#8f95a3
  • tab.activeBackground#1e2228
  • tab.activeBorder#4d9de0
  • tab.activeForeground#d4d7dd
  • tab.border#141619
  • tab.inactiveBackground#181c21
  • tab.inactiveForeground#7a8089
  • terminal.ansiBlack#1e2228
  • terminal.ansiBlue#4d9de0
  • terminal.ansiBrightBlack#5a6270
  • terminal.ansiBrightBlue#6eb4f7
  • terminal.ansiBrightCyan#78dada
  • terminal.ansiBrightGreen#84c884
  • terminal.ansiBrightMagenta#d0a0f0
  • terminal.ansiBrightRed#f09070
  • terminal.ansiBrightWhite#e8eaed
  • terminal.ansiBrightYellow#f5d078
  • terminal.ansiCyan#5ac5c5
  • terminal.ansiGreen#6ab06a
  • terminal.ansiMagenta#b884d6
  • terminal.ansiRed#e07856
  • terminal.ansiWhite#d4d7dd
  • terminal.ansiYellow#e0b95a
  • terminal.background#1e2228
  • terminal.foreground#d4d7dd
  • titleBar.activeBackground#181c21
  • titleBar.activeForeground#b8bcc4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a7684italic
string#94c991
constant.numeric#e0b95a
constant.language, constant.character, constant.other#d89b78
keyword, storage.type, storage.modifier#b884d6
keyword.control#d896c4italic
keyword.operator#8faec7
entity.name.function, support.function, meta.function-call#6eb4f7
entity.name.type, entity.name.class, support.type, support.class#5ac5c5
variable, support.variable#d4d7dd
variable.other.property, support.type.property-name#b8d4e8
variable.parameter#d89b78italic
entity.name.tag#e07878
entity.other.attribute-name#e0b95a
keyword.control.import, keyword.control.from#b884d6
markup.heading#6eb4f7bold
markup.bold#d89b78bold
markup.italicitalic
markup.inline.raw#94c991
punctuation#8f95a3
invalid#f09070
invalid.deprecated#d89b78
Zoren Theme by viniciuslazzari - VS Code Theme